Angularjs的理解和认识
2016-05-06 21:18
633 查看
1.AngularJS的双向数据绑定
/tpl下的html文件属于是模板
每个模板都会对应一个controller.js文件
页面通过ng-controller=”controllerName”来绑定controller
通过config.router.js中的
resolve选择依赖关系的js
在这个view被打开时就会加载这个js文件
所以用到的一些组件,controller,就在这时加载。
页面中会绑定ng-model,或者{{model.name}},ng-click等
这些都是已经绑定的controller中的scope对象的属性如果想要修改view中显示的数据,只要修改scope的属性值即可
想要获取页面中控件的值,也只需要获取到$scope的属性就可以了
2.路由拦截
config.router.js
在所有要访问的页面中拦截验证
验证不通过跳转到登陆界面
//添加路由拦截,stateChangeStart,状态开始改变的时候执行的方法
如果路由不存在执行的方法
3.页面跳转方法,
state方式:state.go()路由url方式:location.path()
其他页面:window.location.href = ‘url’
4.需要理解angularjs是单页面web应用,相当于所有的页面是一个整体页面,但是由不同的controller控制页面中的一些对象
5.路由中的#是可以去掉的
/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.路由中的#是可以去掉的
相关文章推荐
- angular---常用指令总结
- angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式
- angularJS directive详解
- play+angularjs+karma unit test(单元测试)
- angularjs 创建自定义的指令
- AngularJS自定义指令详解(有分页插件代码)
- 两个很好的angular调试工具-——batarang(stable)和ng-inspector
- AngularJS的启动引导过程
- angularjs中ui-sref传值步骤
- angular
- angular的directive的属性和用法
- angular input file 上传文件
- AngularJS学习记录-过滤器(自定义过滤器)
- AngularJS学习记录-过滤器(匹配方式过滤)
- AngularJS学习记录-过滤器(排序方式过滤)
- AngularJS学习记录-过滤器(基本使用)
- Angularjs学习笔记--ui-Router
- AngularJS所有版本下载地址
- AngularJS所有版本下载地址
- AngularJS所有版本下载地址