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. ABP 开发(一)

    rh 最近搞Angular ,使用Abp+Angular建项目,遇到部分问题,记录一下,以备查: 一.Abp官网: https://aspnetboilerplate.com/ 点Get starte ...

  2. iOS下ajax回调函数里不能播放audio

    iOS下audio必须监测到事件才可播放, ajax回调函数里不能播放 解决办法 在点击方法里先播放然后立即暂停,在回调函数里重新播放 onclick(function(){ $("#_wx ...

  3. 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

    封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...

  4. Python - 入门基础(一)

    1.解释器路径 #!/usr/bin/env python 2.编码 # -*- coding:utf8 -*- 1.ascill ---00000000  (8个位表示) 缺点:表示不了英文 2.u ...

  5. MySQL数据库实验:任务一 创建数据库和表

    目录 任务一 创建数据库和表 [实训目的与要求] [实训原理] [实训步骤] 一.熟悉MySQL环境 二.利用MySQL命令行窗口创建数据库及表 三.利用界面工具创建数据库及表 任务一 创建数据库和表 ...

  6. SpringBoot入门案例——创建maven Module方式

    最近看到一个大牛写的spring boot案例,链接贴这 https://github.com/ityouknow/spring-boot-examples.git 这里通过在maven里创建多个mo ...

  7. java的三个体系

    Java是由SunMicrosystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由JamesGosling和同事们共同研发,并在1995年正式推出. Java分为 ...

  8. Hadoop学习总结之Map-Reduce的过程解析

    一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. 提交任务主要是通过JobClient.runJob(JobConf)静态函数实现的: public static Runnin ...

  9. MyDC总结

    需要补全的代码如下 public int evaluate(String expr) { int op1, op2, result = 0; String token; StringTokenizer ...

  10. 20155230 2016-2017-2 《Java程序设计》第三周学习总结

    ---恢复内容开始--- 20155230 张瑞琦 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 1.使用浮点数时用equals()进行比较,否则会出错. ...