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 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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代码实现表单数据验证类
2015/07/28 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
js中符号转意问题示例探讨
2013/08/19 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python实现字符串和数字拼接
2020/03/02 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
SQL面试题
2013/04/30 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
博士生专家推荐信
2014/09/26 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang