您的位置:首页 > Web前端 > AngularJS

Angularjs的理解和认识

2016-05-06 21:18 633 查看
1.AngularJS的双向数据绑定

/tpl下的html文件属于是模板

每个模板都会对应一个controller.js文件

页面通过ng-controller=”controllerName”来绑定controller

通过config.router.js中的

.state('app.dashboard-v1', {
url: '/dashboard-v1',
templateUrl: 'tpl/app_dashboard_v1.html',
resolve: load(['js/controllers/chart.js'])
})


resolve选择依赖关系的js

在这个view被打开时就会加载这个js文件

所以用到的一些组件,controller,就在这时加载。

页面中会绑定ng-model,或者{{model.name}},ng-click等

这些都是已经绑定的controller中的scope对象的属性如果想要修改view中显示的数据,只要修改scope的属性值即可

想要获取页面中控件的值,也只需要获取到$scope的属性就可以了

2.路由拦截

config.router.js

在所有要访问的页面中拦截验证

验证不通过跳转到登陆界面

//添加路由拦截,stateChangeStart,状态开始改变的时候执行的方法

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
// --如果是登陆
//console.log(toState.name);
if(toState.name=='access.signin')return;
// --如果用户不存在
var user = $cookies.getObject('user');
//console.log(user);
if(!user || !user.token){
console.log('go home');
event.preventDefault();//取消默认跳转行为
$state.go("access.signin",{from:fromState.name,w:'notLogin'});//跳转到登录界面
}
else if(!localStorage.getItem('hasRouter')){
$state.go("app.dashboard-v1",{from:fromState.name,w:'notLogin',user:user});//跳转到登录界面
}
});
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP)      { console.log("Success: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeError",   function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });
//console.log($rootScope);


如果路由不存在执行的方法

var hasRouter = true;
$urlRouterProvider
.otherwise(function($injector, $location){
$location.path('/access/signin');
hasRouter = false;
});
localStorage.setItem('hasRouter',hasRouter);


3.页面跳转方法,

state方式:state.go()路由url方式:location.path()

其他页面:window.location.href = ‘url’

4.需要理解angularjs是单页面web应用,相当于所有的页面是一个整体页面,但是由不同的controller控制页面中的一些对象

5.路由中的#是可以去掉的
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: