AngularJS introductory tutorial - multi-view switching usage example-PHP开发-php.cn

AngularJS introductory tutorial - multi-view switching usage example

高洛峰

Release： 2016-12-08 10:39:58

Original

1200 people have browsed it

The example in this article describes the usage of AngularJS multi-view switching. Share it with everyone for your reference, the details are as follows:

In AngularJS applications, we can write the html fragments in a separate file, and then load the fragments in other pages. If there are multiple fragment files, we can also dynamically load different fragments in the controller based on user operations to achieve the effect of switching views.

Let’s first take a look at a case written by the author:

AngularJS introductory tutorial - multi-view switching usage example

These two poems are actually two html fragments, written in page1.html and page2.html respectively. The following is the content of these two files:

<!--page1.html内容-->
<div>
  <p>《南乡子·登京口北固亭有怀》</p>
  <p>何处望神州？满眼风光北固楼。千古兴亡多少事，悠悠，不尽长江滚滚流。</p>
  <p>年少万兜鍪，坐断东南战未休。天下英雄谁敌手，曹刘。生子当如孙仲谋。</p>
</div>

Copy after login

<!--page2.html内容-->
<div>
  <p>《蝶恋花》</p>
  <p>伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。</p>
  <p>拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。</p>
</div>

Copy after login

Next, let’s see how to switch between these two fragments.

<!DOCTYPE html>
<html ng-app="routeMod">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>
  <link type="text/css" href="css/tutorial07.css" rel="stylesheet">
  <title>tutorial07.html</title>
</head>
<body>
  <header>
    Header
  </header>
  <div id="content" ng-controller="MultiViewController">
    <div id="myView" ng-view="myView" ng-init="init()">
    </div>
    <div id="btnDiv">
      <button ng-click="prePage()">上一页</button>
      <button ng-click="nextPage()">下一页</button>
    </div>
  </div>
  <footer>
    Copyright:Rongbo_J
  </footer>
  <script>
    var routeMod = angular.module(&#39;routeMod&#39;, [&#39;ngRoute&#39;]);
    routeMod.config([&#39;$routeProvider&#39;,function($routeProvider){
      $routeProvider.when(&#39;/1&#39;,{
        templateUrl:&#39;tutorial07/page1.html&#39;,
        controller:&#39;MultiViewController&#39;
      })
      .when(&#39;/2&#39;,{
        templateUrl:&#39;tutorial07/page2.html&#39;,
        controller:&#39;MultiViewController&#39;
      })
    }])
    routeMod.controller("MultiViewController",function($scope,$log,$location){
      $scope.init = function () {
        $location.path("/1");
      }
      $scope.prePage = function () {
        $log.info("prePage");
        $location.path("/1");
      };
      $scope.nextPage = function () {
        $log.info("nextPage");
        $location.path("/2");
      };
    });
  </script>
</body>
</html>

Copy after login

Here we need to use the routing module ngRoute of AngularJs. The module code is encapsulated in the angular-route.js file. Like the previous section, we need to introduce it.

   <script type="text/javascript" src="angular-1.3.0.14/angular-route.js"></script>

Copy after login

Then inject it into our module, the code is as follows:

var routeMod = angular.module(&#39;routeMod&#39;, [&#39;ngRoute&#39;]);

Copy after login

The next work is to configure the access path of the html fragment. We need to call the config method of the module to configure the $routeProvider service, the code is as follows:

routeMod.config([&#39;$routeProvider&#39;,function($routeProvider){
  $routeProvider.when(&#39;/1&#39;,{
    templateUrl:&#39;tutorial07/page1.html&#39;,
    controller:&#39;MultiViewController&#39;
  })
  .when(&#39;/2&#39;,{
    templateUrl:&#39;tutorial07/page2.html&#39;,
    controller:&#39;MultiViewController&#39;
  })
}])

Copy after login

We define a view through the ng-view directive, and call the $location.path() method in the controller to specify which fragment to load in the view.