编程 Javascript

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

Posted in Javascript onSeptember 14, 2016

前提

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

这主要是因为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路由的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

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

- Author -

xingoo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

纯JavaScript实现HTML5 Canvas六种特效滤镜示例

Jun 28 Javascript

jquery 页眉单行信息滚动显示实现思路及代码

Jun 26 Javascript

javascript arguments使用示例

Dec 16 Javascript

jquery简单的弹出层浮动层代码

Apr 27 Javascript

js实现延时加载Flash的方法

Nov 26 Javascript

JS密码生成与强度检测完整实例(附demo源码下载)

Apr 06 Javascript

jQuery中使用animate自定义动画的方法

May 29 Javascript

详解基于Vue+Koa的pm2配置

Oct 24 Javascript

解决vue项目中type=”file“ change事件只执行一次的问题

May 16 Javascript

ECharts地图绘制和钻取简易接口详解

Jul 12 Javascript

webpack的tree shaking的实现方法

Sep 18 Javascript

在Angular项目使用socket.io实现通信的方法

Jan 05 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