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. tomcat启动超时, Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds...

    本文转自于:http://www.cnblogs.com/yjhrem/articles/2955207.html

  2. Xcode 提交APP时遇到 “has one iOS Distribution certificate but its private key is not installed”

    解决办法:登录Apple开发证书后台,把发布版证书.cer文件下载到本地,双击安装即可.若还没有设置发布证书文件,则创建一个后下载. Ref: https://blog.csdn.net/dingqk ...

  3. 工具 | Axure基础操作 No.6

    这个是基础教程最后一篇,但是这仅仅是个开始,需要学的东西还有很多.坚持! 1.生成部分原型页面 不能单独生成子级的页面,会自动的勾选上父级.如果想单独的生成的话,就得把这个页面的级别提高,变成一级页面 ...

  4. leyer不写content参数直接传递给子页面数据

    function btnAddClickownfund(){ //获取数据 var actual = $("#actual_capitals").html().trim(); // ...

  5. mysql数据库的导入导出命令

    1.备份一个数据库 mysqldump -h localhosot -uroot -ppassword 数据库名>数据库所在路径(路径+数据库名.sql) 注意:导出的数据库文件.sql文件不能 ...

  6. Mave实战(1)——Maven介绍

    目录 1. Maven介绍 1.1. 何为Maven 1.1.1. Maven是优秀的构建工具 1.1.2. Maven不仅仅是构建工具 1. Maven介绍 1.1. 何为Maven Maven是一 ...

  7. sublime text3 插件安装方法

    1.按Ctrl+`(ESC下方的键)调出console粘贴以下代码到底部命令行并回车 2.输入:import urllib.request,os,hashlib; h = '6f4c264a24d93 ...

  8. Leecode刷题之旅-C语言/python-434 字符串中的单词数

    /* * @lc app=leetcode.cn id=434 lang=c * * [434] 字符串中的单词数 * * https://leetcode-cn.com/problems/numbe ...

  9. dns欺骗之ettercap

    ettercap是一个基于ARP地址欺骗方式的网络嗅探工具,主要适用于局域网. ettercap是一款现有流行的网络抓包软件,它利用计算机在局域网内进行通信的ARP协议的缺陷进行攻击,在目标与服务器之 ...

  10. OpenFlow1.3.3 学习记录(持续更新)

    OpenFlow1.3.3 学习记录(持续更新) 正在学习OpenFlow1.3,该篇笔记将日常更新,主要内容大致为官方文档的总结与翻译. 交换机组件 按照优先级顺序进行包匹配,如果匹配到流表项,则执 ...