AngularJS-之你所不知道的路由

2016/12/14

angular-router.js 是用 AngularJS 框架的核心部分，现在已经被独立成一个模块。

angular-ui-router.js 是一个第三方模块，功能非常强大，它支持一切正常 ngroute 也可以做许多额外的功能。

angular-router

新建一个项目文件夹，例如：ng-router

项目结构参考如下图：

app.js 里面引入 ui.router

1	var myApp = angular.module("myApp", ['ui.router']);

配置 angular 的 cofing

1
2
3

myApp.config(['$routeProvider', function ($routeProvider) {

});

$stateProvider 设置路由定义

设置一个页面路由

1
2
3

$routeProvider.when('/', {
  templateUrl: 'demo/home.html'
});

设置初始化页面的路由

1
2
3

$routeProvider.otherwise({
  redirectTo: '/'
});

讲解

一般主要通过两个方法：
when()：配置路径和参数;
otherwise：配置其他的路径跳转，可以想成 default。

when 的第一个参数：配置路径名
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：这个事件在路由跳转失败后触发

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Angular ng-Router</title>
  <script src="http://orzhtml.com/angular/1.6.0/angular.min.js"></script>
  <script src="http://orzhtml.com/angular/ng-route/1.6.0/angular-route.min.js"></script>
  <script src="app.js"></script>
</head>
<body data-ng-app="myApp">
  <ul>
    <li>
      <a href="#!/">首页</a>
    </li>
    <li>
      <a href="#!/list">列表页</a>
    </li>
  </ul>
  <div data-ng-view></div>
</body>
</html>

app.js

var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'demo/home.html',
      controller: 'HomeController'
    })
    .when('/list', {
      templateUrl: 'demo/list.html',
      controller: 'ListController',
      resolve: {
        // 3秒延迟加载页面
        delay: function ($q, $timeout) {
          var delay = $q.defer();
          $timeout(delay.resolve, 3000);
          return delay.promise;
        }
      }
    })
    .otherwise({
      redirectTo: '/'
    });
}]);
myApp.controller("HomeController", function ($scope, $route) {
  $scope.home = "首页!";
});
myApp.controller("ListController", function ($scope, $route) {
  $scope.list = "列表页!";
});

home.html

1	<div ng-controller="HomeController">{{home}}</div>

list.html

1	<div ng-controller="ListController">{{list}}</div>

angular-ui-router

新建一个项目文件夹，例如：ng-router

项目结构参考如下图：

引入 ui.router

1	var myApp = angular.module("myApp", ['ui.router']);

配置 angular 的 cofing

1
2
3

myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

});

$stateProvider 状态配置
$urlRouterProvider 路由重定向
$httpProvider 设置 $http 请求时的配置的，比如全局禁用缓存，添加 header 之类

设置初始化的默认页面，可自行定义路由重定向规则

1	$urlRouterProvider.when("", "/pagetab");

设置一个页面路由

$stateProvider.state("index", {
  url: "/index",
  templateUrl: "./demo/nav.html"
})

这里的 index.home 是指的 index 的子页面 home

$stateProvider.state("index.home", {
  url: "/home",
  templateUrl: "./demo/home.html"
})

app.js

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
  if(!$httpProvider.defaults.headers.get) $httpProvider.defaults.headers.get = {};

  // IE 9 浏览器中ajax呼叫时，文件缓存的问题（modify配置文件的时间调制。）
  $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
  $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
  $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
	
  // 设置初始化的默认页面，可自行定义路由重定向规则
  $urlRouterProvider.when("", "index/home");

  // 如果路径不匹配的任何url配置 则会路由指定跳转地址
  $urlRouterProvider.otherwise("index/home");

  // 设置一个页面路由
  $stateProvider.state("index", {
    url: "/index",
    templateUrl: "./demo/nav.html"
  }).state("index.home", {
    url: "/home",
    templateUrl: "./demo/home.html"
  }).state("index.list", {
    url: "/list",
    templateUrl: "./demo/list.html"
  });
});

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Angular ui-Router</title>

  <script src="http://orzhtml.com/angular/1.6.0/angular.min.js"></script>
  <script src="http://orzhtml.com/angular/ui-route/0.3.2/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>

<body data-ng-app="myApp">
<div class="viewport" data-ui-view=""></div>
</body>
</html>

nav.html

<div>
  <ul>
    <li>
      <a href ui-sref=".home" ui-sref-active="active">首页</a>
    </li>
    <li>
      <a href ui-sref=".list" ui-sref-active="active">列表页</a>
    </li>
  </ul>
  <div>
    <div ui-view="" />
  </div>
</div>

home.html

1	<div>这是首页</div>

list.html

1	<div>这是列表页</div>

两种简单设置路由的方式已经介绍完，更详细的用法，大家可以去官网看 api。

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。