发表于： 2017-06-20 21:53:53
1 783
今天完成的事情：用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){ ... });
返回列表
评论