<!--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="https://my.oschina.net//u/3161974/blog/1358798/second">Default Route</a></li> <li><a href="https://my.oschina.net//u/3161974/blog/1358798/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="https://my.oschina.net/app"></head></html> --> <!--备选方案：ui-router-->
