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 新浪背投广告实现代码
Jul 07 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
Vue toFixed保留两位小数的3种方式
Oct 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中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP7 新增功能
2021/03/09 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue中mint-ui的使用方法
2018/04/04 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python字典操作实例详解
2017/11/16 Python
python实现内存监控系统
2021/03/07 Python
python 消费 kafka 数据教程
2019/12/21 Python
详解Scrapy Redis入门实战
2020/11/18 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
实习教师自我鉴定
2013/12/09 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis