AngularJS

当前位置:首页>AngularJS>通过路由管理视图间切换 - AngularJS路由解析

通过路由管理视图间切换 - AngularJS路由解析

时间:2015-06-12 18:29来源:网络整理 作者:KKWL 点击:
    AngularJS中通过ngRoute来实现相关的路由功能,基本的安装和使用请看官网.      模板的视图刷新     ng-view这个指令和路由组合之后就可以将$route对应的视图放入指定的HTML中,这一过

    AngularJS中通过ngRoute来实现相关的路由功能,基本的安装和使用请看官网.

    

模板的视图刷新

    ng-view这个指令和路由组合之后就可以将$route对应的视图放入指定的HTML中,这一过程中它会创建自己的作用域并将模板嵌套在内部.

    ng-view指令的优先级是1000(终极),所以AngularJS不会运行同一元素上的低优先级指令,也就是说如果一个div有ng-view指令,它上面再写其他指令都是没意义的.

    ng-view这个指令每次会创建一个新的作用域,同时移除上一个视图及其作用域,并将新的作用域和模板关联起来.如果路由中又相关的定义,那么继续将对应的控制器和当前创建的作用域联系起来,这些都完成后会触发$viewContentLoaded事件.

    视图的刷新是在每次的$routeChangeSuccess事件之后.

路由的定义

    路由通常在模块config部分,通过$routeProvider的when和otherwise定义.

angular.module('myApp',[]).config(['$routeProvider',function($routeProvider){   $routeProvider.when('/',{     templateUrl: 'view/index.html',     controller:: 'IndexController'   })   .ohterwise({     redirectTo: '/'   }); }]);

    上面的代码很容易理解,即使不会看意思猜都能猜出来,这里介绍一些其他的.when()的第二个参数是一个配置对象,通常我们只需要配置一下templateUrl和controller就行了,有些时候我们需要更多.

    (1) controller

    它的作用是将指定的控制器与路由所创建的新作用域关联在一起,如果参数是字符串,那么就从所有注册过的控制器中寻找对应的内容进行关联,如果参数是函数,那么就会直接关联这个函数.

    (2) template 和 templateUrl

    这两个其实都是HTML模板,区别只是一个是String形式写在route中,另一个则会通过XHR读取指定文件(或者从$templateCache).这里面的内容都会被渲染到具有ng-view指令的DOM中.

    (3) resolve

    这个感觉可能不是太常用,不过非常有用.它通常是一个对象,key-value的形式.key是注入到控制器中的依赖名称.如果你还不明白它做了什么,比较通俗易懂的说法就是讲一个服务或者一个值在控制器加载以及$routeChangeSuccess触发之前,被设置并注入到控制器.比如这样:

resolve: {   'flag': ['$someService', function($someService) {       if($someService.getFlag()){         return true;       }else{         return false;       }   }]; }

    上面代码可以看到,在flag是通过一个服务判断后设置的,它会被注入到控制器,所以你在控制器可以使用它了.补充一点就是,这里"key-value"格式中,value可以是服务的名字或者返回值,函数或者可以被resolve的promise对象,它会被注入到控制器.

    (4) redirectTo

    这个看名字就知道干嘛的了...不解释

    (5) reloadOnSearch

    这个参数基本上大家都没用过,因为通常都使用默认值(true).默认在$location.search()变化时会重新加载路由,如果这个参数为false,那么当URL查询条件变化时就不会重新加载路由.这个功能当你使用本地分页时对URL是更友好的.


路由参数

    路由里可以有参数,只要将when()的第一次参数写成类似'/users/:user_id'这样就行了,AngularJS会把它解析出来并传递给$routeParams.

    你在从他人哦哦了人中就可以通过$routeParams.user_id的方式获取这个值.


对URL的控制 - $location

    一般情况下我们对地址栏中的URL的操作要通过window.location对象,AngularJS提供了一个服务用以解析地址栏中的URL,也就是$location.通过它你可以访问应用当前路径所对应的路由,以及修改路径和处理导航.

    应用需要在内部进行跳转时是使用$location进行的,注意的是它并没有刷新整个页面的能力.如果要刷新整个页面可以使用$window.location对象.

    下面简单介绍一下常用的API,推荐还是去看官网文档.

    (1) path()

    获取以及修改当前路径,可以和HTML5的历史API直接进行交互,所以前进后退按钮可以生效.

    (2) replace()

    如果希望跳转后不能后退回去,可以这么写:$location.path('/').replace()

    (3) search()

    获取或者修改URL中的查询串(也就是查询参数),设置可以是对象或者字符串均可.

    (4) url()

    和path()类似,只不过操作的是URL而不是路径.


两种路由模式
------分隔线----------------------------