AngularJS(Part 10)--页面导航

页面导航
    过去，一个URL代表一个页面。但是随着Ajax的兴起，情况发生的很大的变化。不同的内容可以使用同一个URL。这让浏览器中的回退、前进甚至收藏按钮都失去了作用。而AngularJS提供了一套解决方案能够避免这种情况。 怎么解决，有一个小技巧：浏览器不会因为URL中#符号后面的值改变而重新请求页面。(关于#符号，参见另一博文)
    现有如下RESTful的的URL：
        /admin/users/list
        /admin/users/new
        /admin/users/[id]
    我们可以把它们加载URL的#符号后面，就变成了(为了方便，把这种方式先称为hashbang)
        http://localhost/ebis#/admin/users/list
        http://localhost/ebis#/admin/users/new
        http://localhost/ebis#/admin/users/[id].
    浏览器其实是认识上面的URL的。并且认为他们是不同的（所有回退、前进按钮就可用了），但是又不会触发重新加载。
    好吧，万能的HTML5来了，他提供了一个history API可以处理如同
        http://localhost/ebis/admin/users/list
        http://localhost/ebis/admin/users/new
    的请求，并且还不会触发重新加载。（只是服务器端要经过设置）。
    现在AngularJS提供了一个服务，来兼容这两种方式，这就是$location。
    如下URL:
        http://localhost/ebis#/admin/users/list？active=true#bottom
    $location.url()   http://localhost/ebis
    $location.path()   /admin/users/list
    $location.search() {active:true}
    $location.hash()   bottom.
    上面四个方法当没有参数时是get方法；当有参数时是set方法。如$location.hash('top')。当然还有protocol(),host(),port(),absUrl()。这些只是get方法。
现在看看$location的具体应用，如下代码：
    <div ng-controller="TestController">
        <ul>
            <li><a href="#/admin/users/list">显示用户</a></li>
            <li><a href="#/admin/users/new">添加用户</a></li>
        </ul>
        <div ng-include="selectedRoute.templateUrl">
            <!--Route dependent content gose here -->
        </div>
    </div>
    当然必须还要有Controller
    function TestController($scope,$location){
        var routes={
                    "/admin/users/list":"pages/list.html",
                    "/admin/users/new":"pages/new.html"
                    };
        var defaultRoute=routes["/admin/users/list"];
        
        //仅有上面的还不够，我们还得加个监听器，随时监听URL的变化，就是先面的代码
        $scope.$watch(function(){
                                    return $location.path();
                                },function(newPath){
                                    $scope.selectedRoute=routes[newPath]||defaultRoute;
                                });
    }
    最后这个例子并不足够好，实际应用中也不会这么用。实际上我们会用另一个内置的service：$route
$route 和 $routeProvider
    （通过源码可发现，$route和$routeProvider似乎是一个东西） 在AngularJS配置阶段，可以用$routeProvider来配置Navigation，以实现和上面使用$location一样的功能，并且还会增强。
    angular.module('my-angu',[])
        .config(function($routeProvider){
            $routeProvider
                .when('/admin/users/list',{templateUrl:'pages/list.html',controller:'UsersController'})
                .when('/admin/users/new',{templateUrl:'pages/new.html',controller:'NewUserController'})
                .when('/admin/users/:id',{templateUrl:'pages/edit.html',controller:'EditorController'})
                .otherwise({redirectTo:'/admin/users/list'});
        });
    @PS:使用此方法，一旦配置，就不能再动态添加其他route了。因为AngularJS只config一次。
    页面HTML如下：
    <div ng-view>
    </div>
    对于Controller:
    .controller('UsersController',function($scope){
                    // logic here
                })
    .controller('NewUserController',function($scope){
                    // logic here
                })
    .controller('EditorController',function($scope,$routeParams){
                    var id=$routeParams.id
                    // logic here
                });
    注意到EditorController中注入了一个新的Service：$routeParams。 他就是用来获取URL中的参数设置。 我们设置的URL是'/admin/users/:id'，那么如果请求'/admin/users/12',那么$routeParams.id=12.

页面转换
    我们可以有两种方式来进行页面转换：
    1.尽快显示新页面，当所需数据从Server返回后在刷新页面
    2.等所有数据都从Server返回并拼装到页面后，再显示页面
    AngularJS默认使用第一种。但是这会产生页面闪烁的问题。（因为短时间内刷新了两次）。所有AngularJS提供了方案使用第二种方式,
    如下：
    .when('/admin/users/:id',{
                                templateUrl:'pages/edit.html',
                                controller:'EditorController',
                                resolve:{
                                        user:function($route,Users){
                                                return Users.get($route.current.params.id);
                                             }
                                        }
                              })
    在EditorController中
    .controller('EditorController',function($scope,user){
                    $scope.user=user;
                });
    resolve中的属性function可以返回Javascript对象，还有promise。如果返回的是promise，AngularJS会等待promise resolve后才改变URL。
    那么还可以有如下代码：
        resolve:{
                delay:function($q,$timeout){
                        var delay = $q.defer();
                        $timeout(delay.resolve, 1000);
                         return delay.promise;
                     }
                }
    他的效果是一秒中后在改变URL。
$route的不足
    没法改变页面中多个地方的显示。只能改变ng-view所在的标签。没什么好的方法解决，只能凑活使用ng-include解决。
    没法递归使用：ng-view中没法再包含ng-view.

最后导航怎么少得了超链接
    <a ng-href='#/admin/users/list'></a> 这是hashbang方式.
    如果在配置阶段使用
    .config(function($locationProvider){
                $locationProvider.html5Mode(true);
            })
    打开了HTML5方式的URL模式,就使用
    <a ng-href='/admin/users/list'></a>