Angularjs的理解和认识

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中的 scopeview 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.路由中的#是可以去掉的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左钦杨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值