<!--ngRoute与页面迁移 1.1使用ngRoute 下面例子说明了一个简单的AngularJS应用是如何进行页面迁移的。需要做以下事情: 1.加载完angular.js之后,引入angular-route.js文件,这样能昂ngRoute模块变得可用。 2.在html中通过ng-view指令标明哪一块需要进行页面迁移。每个应用只有一个ng-view 3.当创建自定义模块时,需要声明它依赖与ngRout模块 angular.module('routingApp',['ngRoute'])。 4.通过$routeProvider,我们可以在AngularJS的config块中定义页面迁移规则。 5.应用内部的迁移可以通过简单的anchor标签来进行,也可以通过手动指定浏览器中的URL来实现。 6.它会自动管理浏览器历史,因此完全可以通过浏览器中的back和forward按钮在应用中进行页面迁移。 $routeProvider让我们可以通过when()函数将所有的迁移规则定义在同一个地方。when函数接收两个参数: 第一个参数是URL或者表示URL的正则表达式,对应迁移规则。 第二个参数是一个表示配置的对象,它包含了发生迁移时需要进行什么样的操作。 1.2迁移配置选项 $routeProvider.when(url,{//url定义了触发迁移选项的URL。 template:string,//template 如果要显示的html页面不是很大,那么可以直接将它作为字符串传入$routeProvider.when函数的第二个配置对象中。会直接将这个html模板插入ng-view指令中 templateUrl:string,//templateUrl 通常情况下,各个视图的HTML会无比巨大而复杂,我们可以把HTML封装到各个文件中,将指向HTML文件的URL作为templateUrl参数。 当进行页面迁移时,只用从服务器上加载相应的HTML文件就可以了。例如:$routePrivider.when('test',{templateUrl:'views/test.html'}) 本例从服务器上获取view/test.html页面并将其载入ng-view。 controller:string,function or array,//controller resolve:object<key,function> url定义了触发迁移选项的URL。 template 如果要显示的html页面不是很大,那么可以直接将它作为字符串传入$routeProvider.when函数的第二个配置对象中。会直接将这个html模板插入ng-view指令中 templateUrl 通常情况下,各个视图的HTML会无比巨大而复杂,我们可以把HTML封装到各个文件中,将指向HTML文件的URL作为templateUrl参数。 当进行页面迁移时,只用从服务器上加载相应的HTML文件就可以了。例如:$routePrivider.when('test',{templateUrl:'views/test.html'}) 本例从服务器上获取view/test.html页面并将其载入ng-view。 controller controllerAs 当不想在controller属性中指定控制器名称时,controllerAs属性提供了便捷的解决之道 $routeProvider.when('/',{ template:'<h5>This is the default route</h5>', controller:'Myctrl as ctrl' }) 等同于: $routeProvider.when('/',{ template:'<h5>This is the default route</h5>', controller:'Myctrl', controllerAs:'ctrl' }) redirectTo 有时,某些迁移会被重命名,不同的url实际上指向同一页面。它能用于错误处理,也能用于常规迁移。 resolve 功能强大 时一种在迁移之前执行和完成一系列异步任务的方式。当需要检验用户是否已经登陆并拥有相应操作权限,甚至需要在控制器和页面 迁移加载到视图之前就预先加载某些数据时,这一功能提供了解决之道。 1.3Resolve与迁移检验 1.4$routeParams服务 一个理想的单页面应用中,AngularJS可以直接启用某个控制器并进行相应页面迁移,而不需要先进入浏览页面再进入具体信息页面。这些URL参数并 不需要从URL中解析,也可以直接从$routeParams服务中非常方便地进行访问。 resolve: { auth: ['$q', '$location', 'UserService', function($q, $location, UserService) { return UserService.session().then( function(success) {}, function(err) { $location.path('/login'); $location.replace(); return $q.reject(err); }); }] } .when('/team/:code',{}) 这能够告诉AngularJS,URL中/team/之后地部分将通过$routeParams解析出code变量的值并传递给控制器 --> <html> <head> <title>AngularJS Routing</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script> </head> <body ng-app="routingApp"> <h2>AngularJS Routing Application</h2> <ul> <li><a href="#">Default Route</a></li> <li><a href="#/second">Default Route</a></li> <li><a href="#/asdasdasd">Default Route</a></li> </ul> <div ng-view></div> <script type="text/javascript"> angular.module('routingApp',['ngRoute']) .config(['$routeProvider',function ($routeProvider) { $routeProvider.when('/',{ template:'<h5>This is the default route</h5>' }) .when('/second',{ template:'<h5>This is the second route</h5>' }) .otherwise({redirectTo:'/'}); }]); </script> </body> </html> <!--一个完整地AngularJS迁移示例 https://github.com/shyamseshadri/angularjs-up-and-running/tree/master/chapter10 --> <!--html5模式 激活HTML5模式 angular.modile('myHtml5App',['ngRoute]) .config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){ $locationProvider.html5Mode(true); //可选代码 $locationProvider.hashPrefix('!'); //此处的页面迁移配置别无二致 }]); 想要开启HTML5模式,需要在配置中引用$locationProvider并调用html5Mode函数,指定参数为true。推荐的做法是同时调用hashPrefix('!')来支持SEO(Search Engine Optimization 搜索引擎优化) 对于不含#的URL而言,AngularJS中只需要在客户端做这些事情就足够了 index.html需要在<head>中加入一个含有href属性的<base>标签,这将会告诉浏览器静态资源的放置路径以哪个URL为根节点。 <html><head><base href="/app"></head></html> --> <!--备选方案:ui-router-->
转载于:https://my.oschina.net/u/3161974/blog/1358798