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 基础示例的更多相关文章

  1. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  2. RabbitMQ学习总结 第五篇:路由Routing

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  3. Cisco路由技术基础知识详解

    第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是(  )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12  ...

  4. .NetCore MVC中的路由(1)路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  5. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  6. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  7. [转]Membership三步曲之入门篇 - Membership基础示例

    本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例   Members ...

  8. RabbitMQ官方中文入门教程(PHP版) 第四部分:路由(Routing)

    路由(Routing) 在前面的教程中,我们实现了一个简单的日志系统.可以把日志消息广播给多个接收者. 本篇教程中我们打算新增一个功能——使得它能够只订阅消息的一个字集.例如,我们只需要把严重的错误日 ...

  9. [AngularJS学习笔记] 基础学习01

    2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...

随机推荐

  1. WebClient 下载图片(文件)

    public static string SaveImage(string url, string newfilename) { WebClient mywebclient = new WebClie ...

  2. Win10 64位+VS2015+Opencv3.3.0安装配置

    Win10 64位+VS2015+Opencv3.3.0安装配置 1.我们首先下载VS2015.OpenCV3.3.0. 1.1 VS2015下载 在官网https://visualstudio.mi ...

  3. MySQL语句的优化

    1.使用limit 当不需要取出全部数据时,在查询后面加上limit限制. 2.select * 每次看到select * 的时候都需要用怀疑的眼光审视,是不是真的需要返回全部的列. 3.重复查询相同 ...

  4. python使用tablib库生成xls表格

    参考文档:http://python-tablib.org Tablib是一个MIT许可的格式不可知的表格数据集库.它允许您导入,导出和操作表格数据集.高级功能包括隔离,动态列,标签和过滤,以及无缝格 ...

  5. Delphi Android下包含第三方DEX

    1.将jar转换为dex call dx --dex -verbose --output=.\output\dex\test_classes.dex --positions=lines .\outpu ...

  6. hadoop 提交程序并监控运行

    程序编写及打包 使用maven导入第三方jar pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  7. C++ —— 非类中使用const定义常量的初始化,以及#define和typedef的区别

    总结一下在非类中使用const关键字定义常量时的初始化问题,亲测VS2015.顺便记录#define宏和typedef的区别. 1 首先对const声明的常量的初始化做简单小结: , w2 = , w ...

  8. 浏览器内置http抓包工具软件

    使用 360极速浏览器抓取HTTP的 请求头 与 响应头: *** 从 工具--->开发人员工具(F12) 或者 直接按下 F12键,打开抓包工具: **** 按下F5刷新: 双击其中的 Nam ...

  9. 数据结构与算法之有序数组(2)——in dart

    本文比第一篇,采用了类实现.增加了运算符重载等功能.本来有序数组是不能修改某个位置的值的,因为这样会打破数组的有序性:但为了演示,保留了修改的方法,但为此增加了排序. import 'dart:mat ...

  10. 前端chrome调试

    Resources标签页 Resources标签页可以查看到请求的资源情况,包括CSS.JS.图片等的内容.也可以设置各种断点.对存储的内容进行编辑然后保存也会实时的反应到页面上. 几个常用的断点快捷 ...