Angularjs中的视图和路由介绍

参数

when方法，上篇文章也提到了配置路由用到的when方法，对when方法的第二个参数可以接收哪些属性，这里将一一列举。
1、controller

controller:'MyController'//或者controller:function($scope){}

<script>        var app = angular.module('app', ['ngRoute']);
       app.config(['$routeProvider', function ($routeProvider) {            //这里指定路由            $routeProvider
              .when('/', {
                  templateUrl: './views/Login.html',
                  controller: 'LoginController'
              })
               .when('/Login', {
                   templateUrl: './views/Login.html',
                   controller: 'LoginController'
               })
       }]);        //控制器
       app.controller('LoginController', function ($scope) {

       });    </script>

如果When方法配置了controller属性，那么这个指定的控制器会与路由所创建的新作用域关联在一起。如果参数值是字符型，会在模块中所有注册过的控制器中查找对应的内容，然后与路由关联在一起，如果参数值是函数型，这个函数会作为模板中DOM元素的控制器并与模板进行关联。
2、template

template:'<div><h2>Route</h2></div>'

Angularjs会将配置对象中的HTML模板渲染到对应的具有ng-view指令的dom元素中。
3、templateUrl

templateUrl:'views/template_view.html'

应用会根据templateUrl属性所指定的路径通过XHR读取视图（或者从$templateCache中读取）。如果能找到并读取这个模板，AngularJs会将模板的内容渲染到具有ng-view指令的Dom元素中。
这种方式，出于代码整洁，也是最常见的使用方式。

4、resolve

resolve:{           'data':['$http',function($http){                    return $http.get('/api').then(                             function success(response){return response.data;},                             function error(reason){return false;}
           );  

   }];

}

如果设置了resolve属性，Angularjs会将列表中的元素都注入到控制器中。如果这些依赖是promise对象，他们在控制器加载以及$routeChangeSuccess被触发之前，会被resolve并设置成一个值。
列表对象可以是：

键，键值是会被注入到控制器中的依赖的名字。

工厂，即可以是一个服务的名字，也可以是一个返回值，它是会被注入到控制器中的函数或可以被resolve的promise对象。

在上面的例子中，resolve会发送一个$http请求，并将data的值替换为返回结果的值。列表中的键data会被注入到控制器中，所以在控制器中可以使用它。

5、redirectTo

redirectTo:'/home'//或者redirectTo:function(route,path,search)

如果redirectTo属性的值是一个字符串，俺么路径会被替换成这个值，并根据这个目标路径触发路由变化。
如果redirectTo属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目标路径触发路由变化。

如果redirectTo属性的值是一个函数，AngularJs会在调用它时传入下面三个参数：

• 从当前路径中提取的路由参数。

• 当前路径

• 当前URL中的查询串。

6、reloadOnSearch

如果reloadOnSearch选项被设置为true（默认），当$location.search()发生变化时会重新加载路由。如果设置为false，那么当url中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。

angular.module('MyApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'})
.otherwise({redirectTo: '/'});
}]);

上面的例子，用when方法设置了两个路由，otherwise方法会在没有任何路由匹配时被调用。我们用它设置一个默认跳转到'/'路径的路由。
当浏览器加载Angularjs应用时，会将url设置成默认路由所指向的路径。除非我们在浏览器中加载不同的url，否则默认会使用'/'路径的路由。

总结

主要学习了when方法的第二个参数的一些属性，在项目中，经常用到，这里就对其具体的描述记录一下，加深印象，在项目中，也是这样做的，这里算是先实践再理论了。