[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"            },            "[e-mail]": {                templateUrl: "templates/Components/bookActions.html",                //注意：resolve只能在这个地方用，在bookActionCrl里面不好使～～～                controller: function ($scope, contactId,greeting) {                    alert(contactId);                    alert(greeting);                },                controllerAs: "bookActionCrl"            },            "[e-mail]": {                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