发表于: 2017-06-20 21:53:53

1 782


今天完成的事情:用ui路由写了登陆页面和欢迎页面。重写了登陆页面的表单验证。

明天计划的事情:完成任务7

遇到的问题:由于在重置里面直接使用了div{display:flex}。导致现在bootstrap的栅格布局写不了,只能自己写自适应了。。。,不知道怎么拆分js文件,我全都写道app.js里面去的。

收获:

如果jq要和angularjs混用,要把jq放到angular的控制器里,不需要再使用document.ready了。

 ui-route 使用:

(1)父路由,子路由

ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.

如下面路由:

angular.module(‘YIJIEBUYI').config(['$stateProvider',  

function($stateProvider) {  

    $stateProvider.state('blog',{  

        url:'/blog',  

        views:{  

            'container':{templateUrl:'templates/blog/layout.html'}  

        }  

    }).state('blog.index',{  

        url:'/index',  

        views:{  

            'container':{templaterUrl:'templates/blog/index.html'}  

        }  

    })  

});  

 

blog 对应的路由是 /blog

blog.index 对应的路由就是 /blog/index  (前面的/blog就是从父view中继承过来的)

blog.index 就是 blog的子view

 

(2)指定响应的view


<div ui-view="view1"></div>   

<div ui-view="view2"></div>  

 

.state("blog.detail"),{    

    url:”/:blogID"    

    ,views:{    

        view1:{    

            templateUrl:"view1.html"   

        }    

        ,view2:{    

            templateUrl:"view1.html"    

        }    

    }    

}  

 

 

(3) state 配置参数

url:默认相对路径(以^开头的是绝对路径) 

views:每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)

abstract:抽象模板不能被激活 

template: HTML字符串或者返回HTML字符串的函数

如:

$stateProvider.state(‘blog.detail', {  

  template: '<h1>My Blog</h1>'  

})  

 

templateUrl: HTML模板的路径或者返回HTML模板路径的函数

如:

$stateProvider.state(‘blog.detail', {  

  templateUrl: ’templates/blog_detail.html'  

})  

 

templateProvider:返回HTML字符串的函数 

如:通过函数返回html

$stateProvider.state(‘blog.detail', {  

  templateProvider: function ($timeout, $stateParams) {  

    return $timeout(function () {  

      return '<h1>' + $stateParams.blogID + '</h1>'  

    }, 100);  

  }  

})  


controller、controllerProvider:指定任何已经被注册的控制器或者一个作为控制器的函数 

resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。 

data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。 

onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数 

 

(4)解决器 Resolve

可以使用 Resolve 为控制器提供可选的依赖注入项。

Relolve 是由 key/value 组成的键值对象.

key  – {string}:注入控制器的依赖项名称。

value - {string|function}:

string:一个服务的别名

function:函数的返回值将作为依赖注入项,如果函数是一个耗时的操作,那么控制器必须等待该函数执行完成(be resolved)才会被实例化。

比如,博客后台的视图都需要登录用户才能访问,那么判断是否登录就可以做成一个控制器依赖

$stateProvider.state(‘YIJIEBUYI', {  

    url: “/admin",  

    // 登录后才能访问  

    resolve: {authentication:[‘YijiebuyiAuth', '$q', function(YijiebuyiAuth, $q){  

        return $q.when().then(function(){  

            return YijiebuyiAuth.authentication();  

        });  

    }]},  

    views: {  

        container: { templateUrl: “templates/admin_manage.html" }  

    }  

})  

 

在上面的返回函数中我们注入了一个服务 YijiebuyiAuth ,这个服务里实现了登录判断的方法 authentication

(5)$state 对象提供自定义数据

$stateProvider  

  .state(‘blog.index', {  

    templateUrl: ’templates/blog_index.html',  

    data: {  

        current_page: 1,  

        page_size: 20  

    }   

})  

 

上面 data 对象就是自定义数据,

里面定义了2页面的当前页和显示内容条数

 

在视图对应的 controller 中我们就可以通过下面的方法来获取自定义数据.

console.log($state.current.data.current_page);  // 1  

console.log($state.current.data.page_size);  // 20  

 

 

(5) onEnter 和 onExit 回调函数

onEnter: 当状态活跃时触发 什么是活跃???页面正在加载中…..我也求解!

onExit : 当状态不活跃时触发 什么是不活跃?? 页面加载完成...同求解!

$stateProvider.state("blog.detail", {  

  template: '<h1>blog</h1>',  

  resolve: { title: '蚂蚁' },  

  controller: function($scope, title){  

    $scope.title = title;  

  },  

  // title 是解决依赖项注入控制器  

  onEnter: function(title){   

    if(title){ ... do something ... }  

  },  

  // title 是解决依赖项注入控制器  

  onExit: function(title){  

    if(title){ ... do something ... }  

  }  

})  

所以,刚才上面做的解决依赖判断是否登录,完全可以在 onEnter 事件中判断登录状态,如果未登录,直接跳转到其他路由即可.

(6) 页面跳转

Html代码  收藏代码

<a href="#/blog/1234”>博客详情</a>   

<a ui-sref=“blog.detail({blogID:blogID})”>博客详情</a>  

 

$state.go(‘blog.detail', {blogID:blogID});

(7) 事件

state事件 

 

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })

$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })

$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })

 

view事件 

View被加载但是DOM树构建之前时: 

$scope.$on('$viewContentLoading', function(event, viewConfig){ ... }); 

View被加载而且DOM树构建完成时: 

$scope.$on('$viewContentLoaded', function(event){ ... }); 



返回列表 返回列表
评论

    分享到