Angular 路由route实例

iSun

Design & Code

AngularJS – 路由 routing 基础示例

AngularJS 路由 routing

可见从页面包车型客车3个视图跳转到此外贰个视图,对单页面应用来讲是重点的。当使用变得更为复杂时,我们须要多个合理的措施来治本用户在应用进程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图,并且遵照用户日前访问的USportageL来展现对应的视图。

 

本文对 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>

页面包车型客车布局比较简单:

图片 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>

图片 2

ng-view是由ngRoute模块提供的3个新鲜指令,其告知AngularJS把模版渲染到哪儿。那一个例子中,大家将须求渲染的情节放到
下边包车型大巴 div 中。下面的四个 a 链接分别指向了八个视图view。

 

贰 、模板页面

创立两模板页面,分别叫 Subpage_1.html 和 Subpage_2.html。

 

叁 、路由规则 routing config

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

图片 4

把 ngRoute 模块在我们的采纳中作为正视加载进来。用 config
函数在模块或应用中定义路由,使用AngularJS提供的when和otherwise多个章程来定义应用的路由。

templateUrl:

选取会依照 templateUrl
属性所钦点的门道通过XHEscort读取视图(大概从$templateCache中读取)。尽管能够找到并读取这一个模板,AngularJS将模板的剧情渲染到持有ng-view指令的DOM元素中。

redirectTo:

只要redirectTo属性的值是多个字符串,那么路径会被替换来那个值,并基于这么些目的路径触发路由变化。假诺redirectTo属性的值是三个函数,那么路径会被替换来函数的再次来到值,并依照那个目的路径触发路由变化。

 

运作结果

点击 go page 1

图片 5

 

点击 go page 2

图片 6

 

本文转自

iSun博客

相关文章