编程 Javascript

angular学习之ngRoute路由机制

Posted in Javascript onApril 12, 2017

ngRoute简介

路由是AngularJS很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有ngRoute和ui-route，我这里先讲ngRoute。ngRoute是一个Module，提供路由和深层链接所需的服务和指令。

注意一点，和之前的文章不一样，使用ngRoute之前你需要引入另外一个js文件angular-route.js：

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

ngRoute包含内容如下：

名称	类型	作用
ngView	Directive	路由的不同模板其实都是插入这个元素里
$routeProvider	Provider	路由配置
$route	Service	各个路由的url，view，controller
$routeParams	Service	路由参数

使用ngRoute的基本流程如下：

在需要路由的地方使用ngView来定义视图模板。
在module中注入ngRoute模块
在config中用$routeProvider来对路由进行配置templateUrl，controller，resolve。
在每个controller中写业务逻辑
在controller中可以通过注入$routeParams来获得url上的参数

可以看下下面这个例子

color.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<body ng-app="color">
<p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p>

<a href="#red" rel="external nofollow" rel="external nofollow" >Red</a>
<a href="#green" rel="external nofollow" rel="external nofollow" >Green</a>

<div ng-view></div>

</body>

<script>
  var app = angular.module("color", ["ngRoute"]);

  app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
          templateUrl: "main.html",
          controller: 'mainController'
        })
        .when("/red", {
          templateUrl: "red.html",
          controller: 'redController'
        })
        .when("/green", {
          templateUrl: "green.html",
          controller: 'greenController'
        })       
        .otherwise('/');
  });

  app.controller('mainController',['$scope',function mainController($scope){
    $scope.message='this is main page';
  }]);
  app.controller('redController',['$scope',function mainController($scope){
    $scope.message='this is red page';
  }]);
  app.controller('greenController',['$scope',function mainController($scope){
    $scope.message='this is green page';
  }]);
</script>
</html>

red.html (其他页面类似，就不重复了)

<div style="background: red">
{{message}}
</div>

例子很简单，我们就只讲下路由的配置：

使用$routeProvider.when来配置路由的关系，方法接受两个参数，第一个参数是url的路径，第二个参数是配置url对应的templateUrl和controller。
$routeProvider.otherwise方法相当于default。

路由模块化

可能你已经注意到了上面的都写在一起，如果项目越来越大，会不会很头疼，那么是不是可以把它模块化，每个模块都有直接的module，controller，config等。模块依赖的技术我们之前的module那篇文章已经讲过，那么就来看下带有路由的情况下，怎么模块化。

color.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="red.js"></script>
<script src="green.js"></script>
<script src="main.js"></script>
<body ng-app="color">
<p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p>

<a href="#red" rel="external nofollow" rel="external nofollow" >Red</a>
<a href="#green" rel="external nofollow" rel="external nofollow" >Green</a>

<div ng-view></div>

</body>

<script>
  var app = angular.module("color", ["ngRoute","Module.red","Module.main","Module.green"]);

  app.config(function ($routeProvider) {
    $routeProvider.otherwise('/');
  });
</script>
</html>

可以看到我们的color.html文件是不是很简洁，config的路由配置里只有一行$routeProvider.otherwise方法,但是module却注入了除ngRoute外的三个module：”Module.red”,”Module.main”,”Module.green”，这其实是把path对应的路由提取成模块，使用了专门的js来处理它们，看起来和他们对应的模板相对应，我们来看下red.html对应的模块js：

red.js

angular.module('Module.red', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider.when('/red', {
        templateUrl: 'red.html',
        controller: 'redController'
      });
    }
  ])


  .controller('redController', [
    '$scope',
    function ($scope) {
      $scope.color='red';
      $scope.message = 'This is red page';
    }
  ]);

路由的参数

那么路由怎么将参数传入到模板页呢？我们把上面的例子改造一下，通过例子来讲解：

main.js

angular.module('Module.main', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'main.html',
          controller: 'mainController'
        });
    }
  ])

  .controller('mainController', [
    '$scope',
    function ($scope) {
      $scope.message = 'This is main page';
      $scope.colors=['blue','yellow','pink'];
    }
  ]);

这里初始化了一个colors的数组，作为要传递的数据。

main.html

{{message}}
<br>
<ul>
  <li ng-repeat="color in colors">
    <a href="#/color/{{color}}" rel="external nofollow" >{{color}}</a>
  </li>
</ul>

通过ng-repeat循环创建a链接，数组的元素通过链接传入。

colorId.js

angular.module('Module.colorId', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/color/:colorId', {
          templateUrl: 'colorId.html',
          controller: 'colorIdController'
        });
    }
  ])

  .controller('colorIdController', [
    '$scope','$routeParams',
    function ($scope,$routeParams) {
      $scope.color = $routeParams.colorId;
      $scope.message = 'This is ' +$routeParams.colorId +' page';
    }
  ]);

这里定义了一个colorId的模块，通过:colorId来匹配传入的参数，这里匹配到的是数组中的元素。例如/color/blue，那么匹配到的就是blue。

colorId.html

<div style="background: {{color}}">
  {{message}}
</div>

最后在colorId上呈现出来。

如果是多个参数可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的参数也一一匹配，如/color/pink/2017/3/13。

支持*号：/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的话，color将会匹配到brown，largecode将匹配到code/with/slashes。

支持?号：/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/code/edit，largecode将会匹配到code。
/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/edit，largecode将会匹配到空值。

路由中的resolve

一个最常见的情景，页面跳转时要加载一些数据。有两种方式可以做到：

页面跳转后加载，通过controller去控制数据的加载，如果时间较长则显示一个loading的界面，数据请求成功后再替换成数据界面
页面跳转前加载，通过路由的resolve去配置。

个人更喜欢跳转后加载的方式，因为更为友好，所以对resolve不太感冒，但我们还是讲下resolve。

resolve是一个map对象:

map的key是可以注入到controller的可选的依赖项，如果resolve其中依赖项的返回值是promise，那么在controller初始化之前，路由会一直等待直到所有的promise都已经resolved或者其中的一个被rejected。如果所有的promise都成功resolved，这些依赖项将可以注入到controller中并同时触发$routeChangeSuccess事件，如果其中的一个promise是rejected，那么将会触发$routeChangeError事件,并中止路由切换。
map的value如果是个字符串，那么它会是一个service的别名。如果是一个函数，他的返回值可以被当做依赖注入到controller中，如果返回值是一个promise，在注入之前必须是resolved的。注意这时候ngRoute.$routeParams还不可用，如果需要使用参数则需要使用$route.current.params。

看下例子：

news.html

<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<body ng-app="ngst-news">
<div ng-controller="MainController">
  <ul>
    <li ng-repeat="news in newsAarry">
      <a href="#/newsDetail/{{news.id}}" rel="external nofollow" >{{news.title}}</a>
    </li>
  </ul>
  <div ng-view></div>
</div>
</body>

<script src="news.js" charset="UTF-8"></script>
<script src="newsDetail.js" charset="UTF-8"></script>
</html>

news.js

var news = angular.module("ngst-news", ["ngst-newsDetail"]);

news.controller("MainController", ["$scope", function ($scope) {
  $scope.newsAarry = [{"id": "1", "title": "辽宁人大副主任王阳 浙江宁波市长卢子跃被免职"},
    {"id": "2", "title": "今冬小雨缤纷，荔枝园地湿润壮旺荔枝果树，下刀环剥最狠"},
    {"id": "3", "title": "百度任原搜索渠道总经理顾国栋为市场执行总监"}];
}]);

news页面是一个新闻列表，在列表下面有个ng-view，点击新闻列表链接下面的ng-view进行路由切换。

newsDetails.html

{{message}}

newsDetails.js

var news = angular.module("ngst-newsDetail", ['ngRoute']);

news.config(["$routeProvider",
  function ($routeProvider) {
    $routeProvider.when("/newsDetail/:newsId", {
      templateUrl: 'newsDetail.html',
      controller: 'newsDetailController',
      resolve: {
        content: ['$q', '$timeout', "$route", function ($q, $timeout, $route) {
          var deferred = $q.defer();
          $timeout(function () {
            deferred.resolve('新闻详情 id=' + $route.current.params.newsId);
          }, 1000);
          return deferred.promise;
        }]
      }
    });
  }])
  .controller("newsDetailController", ['$scope', 'content',
    function ($scope, content) {
      $scope.message = content;
    }]);

这里使用$route.current.params来获得参数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

angular学习之ngRoute路由机制

- Author -

吴冬冬

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

Javascript 相关文章推荐

基于JQuery的日期联动实现代码

Feb 24 Javascript

纯Javascript实现Windows 8 Metro风格实现

Oct 15 Javascript

javascript日期对象格式化为字符串的实现方法

Jan 14 Javascript

JS中sort函数排序用法实例分析

Jun 16 Javascript

jquery 属性选择器（匹配具有指定属性的元素）

Sep 06 Javascript

BootStrap轮播HTML代码（推荐）

Dec 10 Javascript

React教程之封装一个Portal可复用组件的方法

Jan 02 Javascript

使用Vue动态生成form表单的实例代码

Apr 26 Javascript

Vue2.0仿饿了么webapp单页面应用详细步骤

Jul 08 Javascript

Element UI框架中巧用树选择器的实现

Dec 12 Javascript

Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

May 10 Javascript

微信小程序Echarts覆盖正常组件问题解决

Jul 13 Javascript

Node.js发送HTTP客户端请求并显示响应结果的方法示例

Apr 12 #Javascript

微信小程序登录态控制深入分析

Apr 12 #Javascript

JavaScript数据结构之二叉查找树的定义与表示方法

Apr 12 #Javascript

微信小程序微信支付接入开发实例详解

Apr 12 #Javascript

JavaScript数据结构之广义表的定义与表示方法详解

Apr 12 #Javascript

JavaScript数据结构之数组的表示方法示例

Apr 12 #Javascript

easyui-edatagrid.js实现回车键结束编辑功能的实例

Apr 12 #Javascript