AngularJS - 路由入门

咱们有不少方法让一个视图随着用户的操做进行变化。
可是，只是单单一个视图就要知足全部的需求会让代码变得很是复杂。
也许咱们可使用ng-include来引用各类模板，但这只限于部分场景。

因而咱们能够将视图拆分为两种:

• 布局视图
• 模板视图

如此一来，咱们即可以使用route实现模板和布局视图的组装，以构建多视图的应用。

Route

ngRoutes并不属于核心模块，咱们须要额外引用angular-route.js，并在声明应用时:

var myApp = angular.module('myApp',['ngRoute']);

 

$routeProvider

route须要经过$routeProvider定义，好比这样:

var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
        template: '<h2>contacts</h2>',
        controller: 'myController'
    })
    .when('/contacts', {
        templateUrl: 'contacts.html',
        controller: 'contactsController'
    })
    .when('/contacts/:userId', {
        templateUrl: 'contact.html',
        controller: 'contactController'
    })
    .otherwise({redirectTo: '/'});
}]);

OMG，这种定义方式太晦涩了，咱们不能像定义指令时用directive()那样用route()什么的吗?
其实directive()什么的都是config()的语法糖。

好比咱们这样声明一个指令:

var myApp = angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        template: '<p>Kavlez</p>'
    };
});

实际上是:

var myApp = angular.module('myApp', [])
.config(function($compileProvider){
    $compileProvider.directive('myDirective', function() {
        return {
            template: '<p>Kavlez</p>'
        };
    });
});

provider用来实例化依赖并对外提供API，好比这里的$route服务就是经过相应的$routeProvider对外提供API，好比when()，咱们经过这些API设置路由规则。

另外，provider是怎么来的?
Injector对module进行配置时，会在这些module中注册全部定义的provider，必要时会注入服务，而服务的实例化则须要provider来进行。

路由模式

不一样的路由模式下URL会以不一样的格式呈现，咱们有两种模式能够选择。

• 标签模式
  AngularJS默认使用这个模式，这个模式下URL会以'#'开头。

• html5模式
  这个模式下的URL和通常的没什么区别，若是选择了该模式，AngularJS会根据浏览器重写全部的<a href=""></a>。

路由模式也经过$routeProvider进行设置，好比:

var myApp = angular.module('myApp', ['ngRoute'])
 .config(['$locationProvider', function($locationProvider) {
     $locationProvider.html5Mode(false);
     $locationProvider.hashPrefix('!');
 }])

 

when

这里使用的when(path,route)一共两个参数。

• path比较好理解，也就是路由路径，和$location.path匹配，后面带上:则表示参数，能够传递给$routeParams。
• route指的是path匹配后的动做，是一个对象，属性有:
  • controller (string/function):在这里声明的控制器会获得路由建立的做用域。
  • template (string):HTML模板渲染到声明了ng-view的元素里。
  • templateURL (string):功能和template同样，只是经过XHR得到模板。
  • resolve : 将列表对象注入到controller中。
  • redirectTo (string/function): 用于替换path。比起用做字符串，函数更有意义。
  • reloadOnSearch (boolean):默认是true，也就是$location.search()发生变化时从新加载路由。

 

ng-view

咱们用ng-view接收对应的视图模板，给$route对应的视图占位。
mg-view的优先级为1000，也就是说AngularJS不会运行同一个元素上的低优先级指令。

ngView指令遵循如下规则。

• 每次触发$routeChangeSuccess事件，视图都会更新。
• 若是某个模板同当前的路由相关联：
  • 建立一个新的做用域；
  • 移除上一个视图，同时上一个做用域也会被清除；
  • 将新的做用域同当前模板关联在一块儿；
  • 若是路由中有相关的定义，那么就把对应的控制器同当前做用域关联起来；
  • 触发$viewContentLoaded事件；
  • 若是提供了onload属性，调用该属性所指定的函数。

 

$location

既然涉及到了路径，就不得不说$location服务。
感受和windows.location差很少，但$location只能用来在内部访问路由，没法刷新整个页面。

下面列出$location的经常使用的一些方法。

• path()
  当前路径:

  $location.path();

  跳转至:

  $location.path('/');

• replace()
  这个方法可让用户没法后退，好比这样:

  $location.path('/').replace();

• absUrl() : 获取绝对路径
• hash() : 获取URL中的hash片断
• host() : 获取host
• port() : 获取端口号
• protocol() : 获取协议

• search() :
  用于设置URL中的查询参数，好比:

  $location.search({id:'000000',name:'Kavlez'});
  $location.search('id=000000&name=Kavlez');

• url() : 获取当前URL，或者修改当前URL

event

有几个路由相关的事件以下:

• $routeChangeStart : 路由变化以前会触发该事件，有三个参数，分别是AngularJS事件对象、将要路由的url、当前url。

  $rootScope.$on('$routeChangeStart', function(evt, next, current) {
      //something
  });

• $routeChangeSuccess : 路由成功后触发，三个参数分别为AngularJS事件对象、当前url、上一个url
• $routeChangeError : 被拒时触发，三个参数为当前路由信息、上一个路由的信息、错误信息。
• $routeUpdate : 若是reloadOnSearch为false，从新使用控制器的实力时触发。