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的基本流程如下:

  1. 在需要路由的地方使用ngView来定义视图模板。
  2. 在module中注入ngRoute模块
  3. 在config中用$routeProvider来对路由进行配置templateUrl,controller,resolve。
  4. 在每个controller中写业务逻辑
  5. 在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>

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

  1. 使用$routeProvider.when来配置路由的关系,方法接受两个参数,第一个参数是url的路径,第二个参数是配置url对应的templateUrl和controller。
  2. $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

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

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

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

resolve是一个map对象:

  1. map的key是可以注入到controller的可选的依赖项,如果resolve其中依赖项的返回值是promise,那么在controller初始化之前,路由会一直等待直到所有的promise都已经resolved或者其中的一个被rejected。如果所有的promise都成功resolved,这些依赖项将可以注入到controller中并同时触发$routeChangeSuccess事件,如果其中的一个promise是rejected,那么将会触发$routeChangeError事件,并中止路由切换。
  2. 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来获得参数

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

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
vue总线机制(bus)知识点详解
May 10 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
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python实现坦克大战
2020/04/24 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
社区国庆节活动方案
2014/02/05 职场文书
小学生环保演讲稿
2014/04/25 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python