发表于: 2017-06-28 21:43:37
2 893
今天完成的事情:
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、正则两个作用:查找+替换。
2、英文的 “.” 匹配所有单个字符 (换行除外 \n)。
比如 a.. 就能匹配下边的所有的:
a12 a11 abc alo ioka11oooo
3、方括号 [] ,是以或的关系取其中的值,比如 :
[123789]qq 可以匹配:
1qq 2qq 3qq 7qq 8qq 9qq
/*---------------------------------------------*/
暂时就这些,预知更多,请看下回分解~~~~
评论