angularjs 路由

使用angularjs 提供的 when 和 otherwise 两个方法来定义路由

用 config 方法在特定的模块中定义路由

eg : 

angular.module("app", [])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl:"views/home.html",
controller:"homeController"        
})    
}])

 when 中的第一个对象,是路由路径, 与$location.path进行匹配, $location.path 是当前 url 的路径。

 when 中的第二个参数是配置对象,决定了第一个参数能匹配时,具体做些什么。配置对象中可以设置: controller 、 template 、 templateURL 、 resolve 、 redirectTo 和 reloadOnSearch

 controller : 设置控制器,将这个指定的控制器与路由所创建的新作用域关联在一起。如果 controller 中参数是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后与路由器关联在一起。

      如果 controller 中的参数是函数的类型,这个函数会作为模板中DOM元素的控制器,并与模板进行关联。

1. template

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

  angularjs 会将 template 中的 html 模板渲染到对应的 具有 ng-view 指令的 DOM 元素中。

2. templateUrl : 

  eg : templateUrl: 'views/template_name.html'

  应用会根据 templateUrl 属性所指定的路径来读取视图。如果能够找到并且读取这个模板,angularjs 会将模板的内容渲染到具有 ng-view 指令的 DOM 元素中。

3. resolve  

  resolve : {

    'data' : ['$http',function($http){

      return $http.get('/api').then(  

        function success(resp) { return response.data; }

        function error(reason) { return false; }

      )

    }]

  }

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

列表对象可以是:
 键,键值是会被注入到控制器中的依赖的名字;
 工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函数或可以被resolve的promise对象。

4. redirectTo 

redirectTo: '/home'

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


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

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

如果 redirectTo 属性的值是一个函数,AngularJS会在调用它时传入下面三个参数中:
(1) route:从当前路径中提取出的路由参数;
(2) path: 当前路径;
(3) search: 当前URL中的查询串。

5. reloadOnSearch

如果 reloadOnSearch 选项被设置为 true (默认),当 $location.search() 发生变化时会重新加载路由。

如果设置为 false ,那么当URL中的查询串部分发生变化时就不会重新加载路由。这个小窍门对路由嵌套和原地分页等需求非常有用。

posted @ 2017-03-20 11:18  linfang.zhou  阅读(162)  评论(0编辑  收藏  举报