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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
详解jenkins自动化部署vue
May 14 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 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连接MSsql server的五种方法总结
2018/03/04 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JS解析XML的实现代码
2009/11/12 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
js随机生成一个验证码
2017/06/01 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue实现扫码功能
2020/01/17 Javascript
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python zip()函数使用方法解析
2019/10/31 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
人民教师求职自荐信
2014/03/12 职场文书
医学生求职自荐书
2014/06/12 职场文书
股东授权委托书范本
2014/09/13 职场文书
单位委托书格式范本
2014/09/29 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
见义勇为事迹材料
2014/12/24 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
盗窃案辩护词
2015/05/21 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技