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使用技巧精萃[代码非常实用]
Nov 21 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
thinkphp分页集成实例
2017/07/24 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
MSN消息提示类
2006/09/05 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python短信轰炸的代码
2020/03/25 Python
Python super()方法原理详解
2020/03/31 Python
python实现猜拳游戏项目
2020/11/30 Python
Python绘制数码晶体管日期
2021/02/19 Python
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
写好自荐信的要点
2013/11/06 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
班班通校本培训方案
2014/03/12 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python列表的索引与切片
2022/04/07 Python