angular 路由详解_angular项目的路由controller

ui.router详解，对比ngRoute，可以使用父子路由，两者同时变化，也可以使用命名路由

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
            })
        .when('/login', {
            templateUrl: 'views/login.html',
            controller: 'LoginController'
            })
        .when('/dashboard', {
            templateUrl: 'views/dashboard.html',
            controller: 'DashboardController',
            resolve: {
                user: function(SessionService) {
                            return SessionService.getCurrentUser();
                      }
                }
               })
        .otherwise({
            redirectTo: '/'
             });
    }]);

1.controller

controller: 'MyController'  controller: function($scope) {}

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

进行关联。

2.template/templateUrl

AngularJS会将配置对象中的HTML模板渲染到对应的具有 ng-view 指令的DOM元素中

应用会根据 templateUrl 属性所指定的路径通过XHR读取视图（或者从 $templateCache 中读
取）。如果能够找到并读取这个模板，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对象。

在上面的例子中， resolve 会发送一个 $http 请求，并将 data 的值替换为返回结果的值。列

表中的键 data 会被注入到控制器中，所以在控制器中可以使用它。

4.redirectTo

redirectTo: '/home'
// 或者

redirectTo: function(route,path,search)

如果 redirectTo 属性的值是一个字符串，那么路径会被替换成这个值，并根据这个目标路径触发路由变化。
如果 redirectTo 属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目标路径触发路由变化。
如果 redirectTo 属性的值是一个函数，AngularJS会在调用它时传入下面三个参数中：
(1) 从当前路径中提取出的路由参数；
(2) 当前路径；

(3) 当前URL中的查询串。

5.reloadOnsearch

如果 reloadOnSearch 选项被设置为 true （默认），当 $location.search() 发生变化时会重新
加载路由。如果设置为 false ，那么当URL中的查询串部分发生变化时就不会重新加载路由。这

个小窍门对路由嵌套和原地分页等需求非常有用。

现在介绍使用when设置路由 下面的例子中设置了两个路由：一个首页路由和一个收件箱路由，同时首页路由被设置成默

认路由。

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，否则默认会使用 / 路由。

$routeParams

$routeProvider
.when('/inbox/:name', {
    controller: 'InboxController',
    templateUrl: 'views/inbox.html'
});

AngularJS会在 $routeParams 中添加一个名为 name 的键，它的值会被设置为加载进来的URL
中的值。

如果浏览器加载 /inbox/all 这个URL，那么 $routeParams 对象看起来会是下面这样：

{ name: 'all' }

app.controller('InboxController', function($scope,$routeParams) {
// 在这里访问$routeParams
});

$location服务  $location的html5模式

AngularJS提供了一个服务用以解析地址栏中的URL，并让你可以访问应用当前路径所对应

的路由。它同样提供了修改路径和处理各种形式导航的能力。

$location 服务没有刷新整个页面的能力。如果需要刷新整个页面，需要使用 $window.

location 对象（ window.location 的一个接口）。

1.  path()

path() 用来获取页面当前的路径：也就是#后面的内容
$location.path(); // 返回当前路径
修改当前路径并跳转到应用中的另一个URL：
$location.path('/'); // 把路径修改为'/'路由
path() 方法直接和HTML5的历史API进行交互，所以用户可通过点击后退按钮退回到上一个
页面。

2.  replace()

如果你希望跳转后用户不能点击后退按钮（对于登录之后的跳转这种发生在某个跳转之后的
再次跳转很有用），AngularJS提供了 replace() 方法来实现这个功能：
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();

3.  absUrl()

absUrl() 方法用来获取编码后的完整URL：
$location.absUrl()

4.  hash()

hash() 方法用来获取URL中的hash片段：

$location.hash(); // 返回当前的hash片段

5.  host()

host() 方法用来获取URL中的主机：
$location.host();// 当前URL的主机

6.  port()

port() 方法用来获取URL中的端口号：
$location.port();// 当前URL的端口

7.  protocol()

protocol() 方法用来获取URL中的协议：
$location.protocol();// 当前URL的协议

8.  search()

search() 方法用来获取URL中的查询串：
$location.search();

我们可以向这个方法中传入新的查询参数，来修改URL中的查询串部分：

// 用对象设置查询
$location.search({name: 'Ari', username: 'auser'});
// 用字符串设置查询

$location.search('name=Ari&username=auser');

search 方法可以接受两个参数。
  search （可选，字符串或对象）
这个参数代表新的查询参数。hash对象的值可以是数组。
  paramValue （可选，字符串）
如果 search 参数的类型是字符串，那么 paramValue 会做为该参数的值覆盖URL当中的对应

值。如果 paramValue 的值是 null ，对应的参数会被移除掉。

9.  url()

url() 方法用来获取当前页面的URL：
$location.url(); // 该URL的字符串
如果调用 url() 方法时传了参数，会设置并修改当前的URL，这会同时修改URL中的路径、
查询串和hash，并返回 $location 。
// 设置新的URL
$location.url('/home?name=Ari#hashthing');
url() 方法可以接受两个参数。
  url （可选，字符串）

新的URL的基础的前缀。

  replace （可选，字符串）

想要修改成的路径。

路由模式

标签模式

标签（hashbang）是AngularJS用来同你的应用内部进行链接的技巧。标签模式是HTML5模
式的降级方案，URL路径会以 # 符号开头。标签模式不需要重写 <a href=""></a> 标签，也不需
要任何服务器端的支持。如果没有进行额外的指定，AngularJS将默认使用标签模式。
使用标签模式的URL看起来是这样的：
http://yoursite.com/#!/inbox/all
如果要显式指定配置并使用标签模式，需要在应用模块的 config 函数中进行配置：

angular.module('myApp', ['ngRoute'])
    .config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(false);
}]);

我们还可以配置 hashPrefix ，也就是标签模式下标签默认的前缀 ! 符号。这个前缀也是
AngularJS在比较老的浏览器中降级机制的一部分。这个符号是可以配置的：

angular.module('myApp', ['ngRoute'])
    .config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(false);
        $locationProvider.hashPrefix('!');
}])

Html5模式

AngularJS支持的另外一种路由模式是 html5 模式。在这个模式中，URL看起来和普通的URL
一样（在老式浏览器中看起来还是使用标签的URL）。例如，同样的路由在HTML5模式中看起来
是这样的：
http://yoursite.com/inbox/all
在AngularJS内部， $location 服务通过HTML5历史API让应用能够使用普通的URL路径来
路由。当浏览器不支持HTML5历史API时， $location 服务会自动使用标签模式的URL作为替代
方案。
$location 服务还有一个有趣的功能，当一个支持HTML5历史API的现代浏览器加载了一个
带标签的URL时，它会为用户重写这个URL。

在HTML5模式中，AngularJS会负责重写 <a href=""></a> 中的链接。也就是说AngularJS会
根据浏览器的能力在编译时决定是否要重写 href="" 中的链接。
例如 <a href="/person/42?all=true">Person</a> 这个标签，在老式浏览器中会被重写成
标签模式的URL： /index.html#!/person/42?all=true 。但在现代浏览器中会URL会保持本来
的样子。
后端服务器也需要支持URL重写，服务器需要确保所有请求都返回index.html，以支持HTML5
模式。这样才能确保由AngularJS应用来处理路由。
当在HTML5模式的AngularJS中写链接时，永远都不要使用相对路径。如果你的应用是在根
路径中加载的，这不会有什么问题，但如果是在其他路径中，AngularJS应用就无法正确处理路
由了。
另一个选择是在HTML文档的HEAD中用 <base> 标签来指定应用的基础URL：

<base href="/base/url" />

路由事件

$route 服务在路由过程中的每个阶段都会触发不同的事件，可以为这些不同的路由事件设置
监听器并做出响应。
这个功能对于控制不同的路由事件，以及探测用户的登录和授权状态等场景是非常有用的。
我们需要给路由设置事件监听器，用 $rootScope 来监听这些事件。

1.  $routeChangeStart

AngularJS在路由变化之前会广播 $routeChangeStart 事件。在这一步中，路由服务会开始加

载路由变化所需要的所有依赖，并且模板和 resolve 键中的promise也会被resolve。

angular.module('myApp', [])
    .run(['$rootScope', '$location', function($rootScope, $location) {
        $rootScope.$on('$routeChangeStart', function(evt, next, current) {
        });
}]);

$routeChangeStart 事件带有两个参数：
  将要导航到的下一个URL；

  路由变化前的URL。

2.  $routeChangeSuccess

AngularJS会在路由的依赖被加载后广播 $routeChangeSuccess 事件。

angular.module('myApp', [])
    .run(['$rootScope', '$location', function($rootScope, $location) {
        $rootScope.$on('$routeChangeSuccess', function(evt, next, previous) {
    });
}]);

$routeChangeStart 事件带有三个参数：

  原始的AngularJS  evt 对象；
  用户当前所处的路由；

  上一个路由（如果当前是第一个路由，则为 undefined ）。

3.  $routeChangeError

AngularJS会在任何一个promise被拒绝或者失败时广播 $routeChangeError 事件。

angular.module('myApp', [])
    .run(function($rootScope, $location) {
        $rootScope.$on('$routeChangeError', function(current, previous, rejection) {
    });
});

  当前路由的信息；
  上一个路由的信息；

  被拒绝的promise的错误信息。

4.  $routeUpdate

AngularJS在 reloadOnSearch 属性被设置为 false 的情况下，重新使用某个控制器的实例时，

会广播 $routeUpdate 事件。

Web爬虫对于JavaScript的胖客户端应用无能为力。为了在应用的运行过程中给爬虫提供支
持，我们需要在头部添加 meta 标签。这个元标记会让爬虫请求一个带有空的转义片段参数的链接，

服务器根据请求返回对应的HTML代码片段。

<meta name="fragment" content="!"/>

$location 服务不会重新加载整个页面，它只会单纯地改变URL。如果我们想重新加载整个
页面，需要用 $window 服务来设置地址。

$window.location.href = "/reload/page";

另外参考： angular路由详解