AngularJS - 路由 routing 基础示例
AngularJS 路由 routing
能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的。当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。
本文对 AngularJS routing 做一简单示例,并提及其涉及的一些概念。
一、布局页面
引用scripts:
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
页面的布局比较简单:
<div>
<ul>
<li><a href="#page1">go page 1</a></li>
<li><a href="#page2">go page 2</a></li>
<li><a href="#other">to other page</a></li>
</ul>
</div>
<div ng-view></div>
ng-view是由ngRoute模块提供的一个特殊指令,其告诉AngularJS把模板渲染到何处。这个例子中,我们将需要渲染的内容放到 下面的 div 中。上面的三个 a 链接分别指向了三个视图view。
二、模板页面
创建两模板页面,分别叫 Subpage_1.html 和 Subpage_2.html。
3、路由规则 routing config
angular.module("myRouteApp", ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "Subpage_1.html"
})
.when("/page2", {
templateUrl: "Subpage_2.html"
})
.otherwise({
redirectTo: "/"
});
}]);
把 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/
AngularJS - 路由 routing 基础示例的更多相关文章
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- RabbitMQ学习总结 第五篇:路由Routing
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- Cisco路由技术基础知识详解
第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是( )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12 ...
- .NetCore MVC中的路由(1)路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
- AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...
- [转]Membership三步曲之入门篇 - Membership基础示例
本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例 Members ...
- RabbitMQ官方中文入门教程(PHP版) 第四部分:路由(Routing)
路由(Routing) 在前面的教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重的错误日 ...
- [AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
随机推荐
- WebClient 下载图片(文件)
public static string SaveImage(string url, string newfilename) { WebClient mywebclient = new WebClie ...
- Win10 64位+VS2015+Opencv3.3.0安装配置
Win10 64位+VS2015+Opencv3.3.0安装配置 1.我们首先下载VS2015.OpenCV3.3.0. 1.1 VS2015下载 在官网https://visualstudio.mi ...
- MySQL语句的优化
1.使用limit 当不需要取出全部数据时,在查询后面加上limit限制. 2.select * 每次看到select * 的时候都需要用怀疑的眼光审视,是不是真的需要返回全部的列. 3.重复查询相同 ...
- python使用tablib库生成xls表格
参考文档:http://python-tablib.org Tablib是一个MIT许可的格式不可知的表格数据集库.它允许您导入,导出和操作表格数据集.高级功能包括隔离,动态列,标签和过滤,以及无缝格 ...
- Delphi Android下包含第三方DEX
1.将jar转换为dex call dx --dex -verbose --output=.\output\dex\test_classes.dex --positions=lines .\outpu ...
- hadoop 提交程序并监控运行
程序编写及打包 使用maven导入第三方jar pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- C++ —— 非类中使用const定义常量的初始化,以及#define和typedef的区别
总结一下在非类中使用const关键字定义常量时的初始化问题,亲测VS2015.顺便记录#define宏和typedef的区别. 1 首先对const声明的常量的初始化做简单小结: , w2 = , w ...
- 浏览器内置http抓包工具软件
使用 360极速浏览器抓取HTTP的 请求头 与 响应头: *** 从 工具--->开发人员工具(F12) 或者 直接按下 F12键,打开抓包工具: **** 按下F5刷新: 双击其中的 Nam ...
- 数据结构与算法之有序数组(2)——in dart
本文比第一篇,采用了类实现.增加了运算符重载等功能.本来有序数组是不能修改某个位置的值的,因为这样会打破数组的有序性:但为了演示,保留了修改的方法,但为此增加了排序. import 'dart:mat ...
- 前端chrome调试
Resources标签页 Resources标签页可以查看到请求的资源情况,包括CSS.JS.图片等的内容.也可以设置各种断点.对存储的内容进行编辑然后保存也会实时的反应到页面上. 几个常用的断点快捷 ...