AngularJs ng-route路由详解及实例代码


Posted in Javascript onSeptember 14, 2016

前提

首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular

<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-route/angular-route.js"></script>

这主要是因为angular-route.js需要传入window.angular这个参数,而这个参数只有在加载完angular才会出现。

(function(window, angular, undefined) {
'use strict';
...
ngRouteModule.directive('ngView', ngViewFactory);
...
})(window, window.angular);

下载可以去官网下载,或者使用bower进行安装。

讲解

路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

一般主要通过两个方法:

when():配置路径和参数;

otherwise:配置其他的路径跳转,可以想成default。

when的第二个参数:

controller:对应路径的控制器函数,或者名称

controllerAs:给控制器起个别名

template:对应路径的页面模板,会出现在ng-view处,比如"<div>xxxx</div>"

templateUrl:对应模板的路径,比如"src/xxx.html"

resolve:这个参数着重说下,该属性会以键值对对象的形式,给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用,注入到控制器中。如果resolve中是一个promise对象,那么会等它执行成功后,才注入到控制器中,此时控制器会等待resolve中的执行结果。

详细的例子,可以参考下面的样例。

redirectTo:重定向地址

reloadOnSearch:设置是否在只有地址改变时,才加载对应的模板;search和params改变都不会加载模板

caseInsensitiveMatch:路径区分大小写

路由有几个常用的事件:

$routeChangeStart:这个事件会在路由跳转前触发

$routeChangeSuccess:这个事件在路由跳转成功后触发

$routeChangeError:这个事件在路由跳转失败后触发

使用

在页面中,写入URL跳转的按钮链接 以及 ng-view标签  

<div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a></li>
   <li><a href="#/b">click b</a></li>
  </ul>

  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>

其中,ng-view可以当作元素或者标签等。

javascript中需要定义跳转的相关配置

<script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){

  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!");
  });

  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 3 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>

上面的代码中,/b路径中的resolve关联来一个延迟方法,这个方法返回的时Promise对象,而且3秒钟后才会返回结果。因此b页面,在3秒后才会加载成功。

额外还需要提供两个html:

a.html:

<div ng-controller="aController" style="height:500px;width:100%;background-color:green;">{{hello}}</div>

以及b.html:

<div ng-controller="bController" style="height:2500px;width:100%;background-color:blue;">{{hello}}</div>

这样,就可以实现路由的跳转了。

全部的代码可以参考:

<html ng-app="myApp">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="../../bower_components/angular/angular.js"></script>
 <script src="../../bower_components/angular-route/angular-route.js"></script>
</head>
<body>
 <div ng-controller="myCtrl">
  <ul>
   <li><a href="#/a">click a</a></li>
   <li><a href="#/b">click b</a></li>
  </ul>

  <ng-view></ng-view>
  <!-- <div ng-view ></div> -->
 </div>
 <script type="text/javascript">
 angular.module("myApp",["ngRoute"])
 .controller("aController",function($scope,$route){
  $scope.hello = "hello,a!";
 })
 .controller("bController",function($scope){
  $scope.hello = "hello,b!";
 })
 .controller("myCtrl",function($scope,$location){

  $scope.$on("$viewContentLoaded",function(){
   console.log("ng-view content loaded!");
  });

  $scope.$on("$routeChangeStart",function(event,next,current){
   //event.preventDefault(); //cancel url change
   console.log("route change start!");
  });
 })
 .config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when('/a', {
   templateUrl: 'a.html',
   controller: 'aController'
   })
  .when('/b', {
   templateUrl: 'b.html',
   controller: 'bController',
   resolve: {
     // I will cause a 1 second delay
     delay: function($q, $timeout) {
     var delay = $q.defer();
     $timeout(delay.resolve, 3000);
     return delay.promise;
     }
   }
  })
  .otherwise({
   redirectTo: '/a'
   });
 });
 </script>
</body>
</html>

以上就是对AngularJS  ng-route路由的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
ES5新增数组的实现方法
May 12 Javascript
js实现文字截断功能
Sep 14 #Javascript
jQuery版AJAX简易封装代码
Sep 14 #Javascript
原生JS实现首页进度加载动画
Sep 14 #Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
Angularjs 实现分页功能及示例代码
Sep 14 #Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
You might like
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
php压缩文件夹最新版
2018/07/18 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python Deque 模块使用详解
2014/07/04 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
2014村务公开实施方案
2014/02/25 职场文书
大一新生学期自我评价
2014/04/09 职场文书
员工安全生产承诺书
2014/05/22 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2015年班组长工作总结
2015/04/10 职场文书
决心书格式范文
2015/09/23 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
全新239军机修复记
2022/04/05 无线电
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers