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頁。