Angular 路由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>
页面的布局比较简单:
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。
二、模板页面
创建两模板页面,分别叫 Subpage_1.html 和 Subpage_2.html。
3、路由规则 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
本文转自
iSun博客
最新文章
- html5悬浮球效果
- 【Networkk】一篇文章完全搞清楚 scoket read/write 返回码、阻塞与非阻塞、异常处理 等让你头疼已久的问题
- 关于html中的设置body宽高的理解
- 在matlab2015b中配置vlfeat-0.9.18
- MVC开发模式
- FastReport产品介绍及免费下载地址
- 转:微信Android客户端架构演进之路
- tcprstat源码分析之tcp数据包分析
- openstack python sdk list tenants get token get servers
- 【c#】Form调用百度地图api攻略及常见问题
- iOS UISearchBar UISearchController
- OLEDB和ODBC的区别
- Java基础之路(三)下--流程控制语句
- 地址栏输入url按回车发生了什么
- Keepalived两节点出现双VIP情况及解决方法【原创】
- js监听页面放大缩小
- 5月17 AJAX返回类型-------JSON和XML
- Java实现循环链表
- STL进阶--删除元素
- httpclient获取响应实体和信息的封装方法(解耦更新)