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学习笔记8 用JSON做原型
Jan 11 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
浅析PHP开发规范
2018/02/05 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python高阶爬虫实战分析
2018/07/29 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python: 传递列表副本方式
2019/12/19 Python
技校教师求职简历的自我评价
2013/10/20 职场文书
晚归检讨书
2014/02/19 职场文书
团日活动总结范文
2014/04/25 职场文书
环保建议书100字
2014/05/14 职场文书
激励口号大全
2014/06/17 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
紧急通知
2015/04/17 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技