[java学习8]uiRouter练习

女爷i 2022-07-15 02:10 77阅读 0赞

/** * 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