AngularJS - 路由 routing 基础示例

AngularJS 路由 routing

可以从页面的一个视图跳转到另一个视图，对单页面应用来说是相当重要的。当应用变得愈来愈复杂时，咱们须要一个合理的方式来管理用户在使用过程当中看到的界面。AngularJS的作法是将视图分解成布局和模板视图，而且根据用户当前访问的URL来展现对应的视图。

 

本文对 AngularJS routing 作一简单示例，并说起其涉及的一些概念。

 

1、布局页面

引用scripts：

1 <script src="../Scripts/jquery-1.9.1.min.js"></script>
2 <script src="../Scripts/angular.min.js"></script>
3 <script src="../Scripts/angular-route.min.js"></script>

页面的布局比较简单：

1 <div>
2     <ul>
3         <li><a href="#page1">go page 1</a></li>
4         <li><a href="#page2">go page 2</a></li>
5         <li><a href="#other">to other page</a></li>
6     </ul>
7 </div>
8 <div ng-view></div>

ng-view是由ngRoute模块提供的一个特殊指令，其告诉AngularJS把模板渲染到何处。这个例子中，咱们将须要渲染的内容放到 下面的 div 中。上面的三个 a 连接分别指向了三个视图view。

 

2、模板页面

建立两模板页面，分别叫 Subpage_1.html 和 Subpage_2.html。

 

三、路由规则 routing config

 1 angular.module("myRouteApp", ["ngRoute"])
 2     .config(['$routeProvider', function ($routeProvider) {
 3         $routeProvider
 4             .when("/page1", {
 5                 templateUrl: "Subpage_1.html"
 6             })
 7             .when("/page2", {
 8                 templateUrl: "Subpage_2.html"
 9             })
10             .otherwise({
11                 redirectTo: "/"
12             });
13     }]);

把 ngRoute 模块在咱们的应用中看成依赖加载进来。用 config 函数在模块或应用中定义路由，使用AngularJS提供的when和otherwise两个方法来定义应用的路由。

templateUrl:

应用会根据 templateUrl 属性所指定的路径经过XHR读取视图（或者从$templateCache中读取）。若是可以找到并读取这个模板，AngularJS将模板的内容渲染到具备ng-view指令的DOM元素中。

redirectTo:

若是redirectTo属性的值是一个字符串，那么路径会被替换成这个值，并根据这个目标路径触发路由变化。若是redirectTo属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目标路径触发路由变化。

 

运行结果

点击 go page 1

 

点击 go page 2

 

参考资料

《AngularJS权威教程》

Angular.js Routing Example http://www.webcodegeeks.com/javascript/angular-js/angular-js-routing-example/