angular读书笔记（三）

标签：使用   io   for   cti   html   ar   htm   type   

(三)
使用路由和$location切换视图

app.js:

angular.module(‘shop‘,
[
‘ngRoute‘,
‘ngResource‘,
‘shop.controllers‘,
‘shop.services‘,
‘shop.filter‘])
.config([
‘$routeProvider‘,
‘$locationProvider‘,
‘$interpolateProvider‘,
function($routeProvider,
$locationProvider,
$interpolateProvider){
$routeProvider
.when(‘/home‘,{controller:XXX,templateUrl:XXX.tmpl})
.when(‘/home‘,{controller:XXX,templateUrl:XXX.tmpl})
.when(‘/home‘,{controller:XXX,templateUrl:XXX.tmpl})
.otherwise({redirectTo: ‘/404‘});
}
]);

利用指令修改DOM
angular.module(‘shop.directive‘,[])
.directive(‘ngbkFocus‘,functive(){
return{
link:function(scope,element,attrs,controller){
//返回了外层的scope引用，他所存在的dom元素，传递给指令的属性数组，dom元素上的控制器
element[0].focus();
//调用了dom元素的focus方法
}
}
});
twig:
<button ngbk-focus>没搞错的话我被聚焦了</button>

表单验证：
<form name="userForm">
email<input type="email" ng-module="user.email" required>
age<input type="number" ng-modlue="user.age"ng-maxlength=‘3‘ng-minlength=‘1‘>
<button>Submit</button>
</form>
这段html中使用到了html5中的属性，在使用老式浏览器时angular会进行适配，实现相同功能

为form标签添加ng-controller="userController" ng-submit="onSubmit()"
在浏览器中可以通过$valid获取表单的校验状态于是可以实现button的是否可点击
在button标签添加ng-disabled="!userForm.$valid"
前两章结束，现在是48页。

angular读书笔记（三）,布布扣,bubuko.com

angular读书笔记（三）

标签：使用   io   for   cti   html   ar   htm   type   

原文地址：http://www.cnblogs.com/youngercode/p/3878689.html