AngularJSAngular 路由route实例

iSun

Design & Code

AngularJS – 路由 routing 基础示例

AngularJS 路由 routing

可知起页面的一个视图跳反到另外一个视图,对单页面应用来讲是第一的。当用变得尤其复杂时,我们得一个成立的道来保管用户在利用过程中看到底界面。AngularJS的做法是拿视图分解成布局以及模板视图,并且根据用户眼前访问的URL来展示对应之视图。

 

本文对 AngularJS routing 做一样大概示例,并提及该关系的片段定义。

 

一如既往、布局页面

引用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>

页面的布局比较简单:

AngularJS 1

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>

AngularJS 2

ng-view是由于ngRoute模块提供的一个奇指令,其告AngularJS把模版渲染到哪儿。这个例子中,我们将待渲染的内容放到
下面的 div 中。上面的老三只 a 链接分别针对了三独视图view。

 

次、模板页面

始建两模板页面,分别给 Subpage_1.html 和 Subpage_2.html。

 

3、路由于规则 routing config

AngularJS 3

 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     }]);

AngularJS 4

拿 ngRoute 模块于咱们的使用被作为依赖加载进来。用 config
函数在模块或应用中定义路由,使用AngularJS提供的when和otherwise两个法子来定义应用的路由。

templateUrl:

动用会冲 templateUrl
属性所指定的路径通过XHR读取视图(或者由$templateCache中读取)。如果会找到并读取这个模板,AngularJS将模板的情渲染到具有ng-view指令的DOM元素中。

redirectTo:

只要redirectTo属性的值是一个字符串,那么路径会为轮换成这个价值,并冲这个目标路径触发路由变化。如果redirectTo属性的价值是一个函数,那么路径会受替换成函数的返值,并因这个目标路径触发路由变化。

 

运转结果

点击 go page 1

AngularJS 5

 

点击 go page 2

AngularJS 6

 

本文转自

iSun博客

相关文章