[java学习8]uiRouter练习

/**
 * Created by liyanq on 16/10/21.
 * 为了测试uirouter
 * 注意点：
 * 1，记住这个写法：ui.router，开始写了个中线，调试了2个小时找到^_^...
 * 2，expect($stateParams).toBe({contactId: "42"})这个写法没看懂，以后再说～～

 笔记：
 1:Activating a state
 There are three main ways to activate a state:
 Call $state.go(). High-level convenience method. Learn More
 Click a link containing the ui-sref directive. Learn More
 Navigate to the url associated with the state. Learn More.

 2:$state.go用法
 $state.go(to [, toParams] [, options])
 to参数：状态名字。
 string Absolute State Name or Relative State Path
 The name of the state that will be transitioned to or a relative state path.
 If the path starts with ^ or . then it is relative, otherwise it is absolute.

 Some examples:
 $state.go('contact.detail') will go to the 'contact.detail' state
 $state.go('^') will go to a parent state.
 $state.go('^.sibling') will go to a sibling state.
 $state.go('.child') will go to a child state.
 $state.go('.child.grandchild') will go to a grandchild state.

 $state.go是用了$state.transitionTo(to, toParams [, options])实现的

 3:ui-sref用法
 ui-sref='stateName({param: value, param: value})

 ui-sref-active用法
 ui-sref-active='class1 class2 class3' - classes "class1", "class2",
 and "class3" are each added to the directive element when the related ui-sref's
 state is active, and removed when it is inactive.
 自己的理解就是，元素里面有激活的状态，那么class就增加个ui-sref-active，并且可以设置多个。～

 4:URL的激活方式属于被动的激活，是地址栏输入地址的方式。
 * */
var appRoot = angular.module("appRoot", ["ngTouch", "ui.router", "ui.grid", "ui.grid.moveColumns", "bookControllers"]);
//$urlRouterProvider，$stateProvider写对了的话，能穿透过去。
appRoot.config(function ($urlRouterProvider, $stateProvider, $logProvider) {
    $logProvider.debugEnabled(true);
    $stateProvider.state("index", {
        url: "/index",
        views: {
            "rootView": {
                templateUrl: "templates/Containers/mainContainer.html"
            },
            "mainNav@index": {
                templateUrl: "templates/Components/mainNav.html",
                controller: function ($scope, $state) {
                    $scope.gotoBookClick = function () {
                        //激活子状态。
                        $state.go(".bookMain");
                    };
                }
            },
            "mainContent@index": {
                templateUrl: "templates/Components/mainContent.html"
                /**注意:1,"templateProvider" must return template HTML，不能为url。
                 2,"templateProvider"用法的关键就是能使用$stateParams应用
                 templateProvider: function ($timeout, $stateParams) {
                    return $timeout(function () {
                        return '<h1>templateProvider测试</h1>';
                    }, 100);
                }*/
            }
        },
        resolve: {
            //看这里吧，写法好多，估计以后会用到。相当于父子状态开了个通道～
            //https://github.com/angular-ui/ui-router/wiki
            contactId:function ($stateParams) {
                return "hello";
            },
            greeting: function($q, $timeout){//写了什么玩意儿～～～
                var deferred = $q.defer();
                $timeout(function() {
                    deferred.resolve('Hello!');
                }, 1000);
                return deferred.promise;
            }
        }
        /**
         controller:function ($stateParams) {
            // If we got here from a url of /contacts/42
            不明白想干啥。～
            expect($stateParams).toBe({contactId: "42"})
         }
         */
    }).state("index.bookMain", {
        // url:"/bookMain",//加^为绝对路由
        url: "/bookMain/{bookType:[0-9]{0,4}}", /*第1种写法*/
        // url:"^/bookMain?bookType",/*第2种写法*/
        /**
         params: {//目的是隐藏参数，不显示在url中，但不能分享啦～～
             bookType:null//第3种写法
          },
         */
        views: {
            "mainContent": {
                templateUrl: "templates/Containers/bookContainer.html"
            },
            "navActions@index.bookMain": {
                templateUrl: "templates/Components/bookActions.html",
                //注意：resolve只能在这个地方用，在bookActionCrl里面不好使～～～
                controller: function ($scope, contactId,greeting) {
                    alert(contactId);
                    alert(greeting);
                },
                controllerAs: "bookActionCrl"
            },
            "bookContent@index.bookMain": {
                templateUrl: "templates/Components/bookContent.html",
                controller: "bookContentCrl"
            }
        }
    });
    // Here's an example of how you might allow case insensitive urls
    // Note that this is an example, and you may also use
    // $urlMatcherFactory.caseInsensitive(true); for a similar result.
    $urlRouterProvider.rule(function ($injector, $location, $state) {
        //what this function returns will be set as the $location.url
        var path = $location.path(),
            normalized = path.toLowerCase();
        if (path != normalized) {
            //instead of returning a new url string,
            // I'll just change the $location.path directly
            // so I don't have to worry about constructing a new url string
            // and so a new state change is not triggered
            $location.replace().path(normalized);
        }
        if (path == "") {
            $location.replace().path("/index");
        }
        // because we've returned nothing, no state change occurs
    });
}).directive("myDirective", function ($templateCache) {
    return {
        restrict: "E",
        //A:attributes;E:element;M:comment(注释);C:class
        // templateUrl: $templateCache.get("user.html"),
        // transclude: true,
        // 只能在link里面控制dom元素，现在是绑定了鼠标移动事件
        template: "<div>我的第一个指令</div>",
        link: function (scope, element, attr) {
            element.bind("mouseenter", function () {
                console.log("鼠标滑动");
            })
        }
    };
}).run(function ($rootScope, $state, $stateParams, $templateCache) {//run只运行一次，注射器在加载完所有模块时。
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    // $templateCache.put("user.html", "templates/user.html");
});

自己都感觉写的不好，没重点，没逻辑，只是为了纯粹的练习。

https://github.com/angular-ui/ui-router/wiki