发表于: 2017-06-28 21:43:37

2 895


今天完成的事情:

1、写了后台几个页面概样式,后期再改吧。

2、通过contoller和路由、视图的配合,添加了登录的点击事件,并且访问后台验证成功。:

 先码为敬

 html片段 部分:

<div class="main" ng-controller="loginCtrl">
       <h2>萝卜多后台登录</h2>
       <input id="phone" type="text" placeholder=" 用手机号"  maxlength="11" ng-model="account">
       <input id="pass" type="" placeholder=" 密" ng-model="pass" >
               <button ng-click="jump()" class="entry" >登录</button>
       <p>{{account}}</p>
</div>

路由  部分:

.state('login', {
   url: '/login',
   templateUrl: 'login.html',
   controller: 'loginCtrl',
   resolve: {
       loadMyFile: ["$ocLazyLoad", function($ocLazyLoad) {
           return $ocLazyLoad.load(["css/login.css"]);
       }]
   }
})

controller  部分:

//登界面验证+跳
myApp.controller('loginCtrl',function ($scope,$http,$location) {
   $scope.jump = function () {
       $http({
           method: 'post',
           url: "/carrots-admin-ajax/a/login",
           // 此要注意是params,ajax封装的才是 data~~~
           params: {
               name: $scope.account,
               pwd: $scope.pass
           }
       })
       .then(
           function successCallback(response,$state) {
               console.log(response); // 求成功行代
               $location.path('/backstage');
               console.log('跳成功~~~');
           },
           function errorCallback(response) {
               // 求失败执行代
               console.log("求失~~")
           });
   }
});

简单解释一下,

1、需要在html片段中添加控制器的名字~~(我感觉应该是确定了一个作用域吧???告诉控制器去哪里获取 模型数据)
2、路由是控制器和视图的中介,当然要在路由中“声明”一下控制器的名字。(这一条不知道理解的对不对)
3、控制器当然就是要完成  获取数据+验证+验证成功后的跳转。。。等等一系列事件了。。。(所以控制器就是个函数吧~~)
4、以上3条应该是完成一个简单跳转页面事件的基本逻辑,不当的地方请大家指正~~~我再说一下我的坑。

    4.1  每用一个 方法 或者 组件,要想到有没有相应的 参数 或 模块注入 ,比如:

var myApp = angular.module("myApp", ['ui.router','oc.lazyLoad']);

 要用ui-router和懒加载的话就需要注入相应的模块,他们是独立的包,需要单独下载在index中引入~~

loadMyFile: ["$ocLazyLoad", function($ocLazyLoad  ) {
   return $ocLazyLoad.load(["css/login.css"]);
}]

 如果没有带入参数$oclazyload,函数语句中是该方法就是undefined~~

明天计划的事情:

继续任务,继续angular.
遇到的问题:

1、以上~

2、为毛跳到另一个页面后通过懒加载的css是有了,但是上一个页面的css也在,就会影响新的页面的样式,刷新一下,之前的css才没有,什么鬼~~~哈哈哈哈哈哈哈2333
收获

还学了一点点 Regular Expression~~~~(angular太烦,就当是换换脑子吧):


  1. 1、正则两个作用:查找+替换。

  2. 2、英文的 “.” 匹配所有单个字符 (换行除外 \n)。

  3.    比如 a..  就能匹配下边的所有的:

  4.    a12       a11               abc       alo          ioka11oooo

  5. 3、方括号 []   ,是以或的关系取其中的值,比如 :

  6.    [123789]qq   可以匹配:

  7.    1qq            2qq              3qq         7qq     8qq       9qq

  8. /*---------------------------------------------*/

暂时就这些,预知更多,请看下回分解~~~~


返回列表 返回列表
评论

    分享到