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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python列表与元组详解实例
2013/11/01 Python
python实现简单的socket server实例
2015/04/29 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
给导游的表扬信
2014/01/10 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
优秀员工推荐信
2014/05/10 职场文书
政风行风建设责任书
2014/07/23 职场文书
毕业生对母校寄语
2015/02/26 职场文书
停水通知
2015/04/16 职场文书
赢在中国观后感
2015/06/02 职场文书
汽车销售员工作总结
2015/08/12 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL