Angular 路由route实例代码


Posted in Javascript onJuly 12, 2016

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

Angular 路由route实例代码

点击 go page 2

Angular 路由route实例代码

以上这篇Angular 路由route实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
javascript中获取class的简单实现
Jul 12 #Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python高级用法总结
2018/05/26 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
护士专业推荐信
2013/11/02 职场文书
幼儿教师自我鉴定
2013/11/02 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
大学生暑期实践报告
2015/07/13 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python