过滤器
使用语法
{{expression|filterName:parameter1:parameter1:...parameterN}}
书写自定义过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mySelfFilter</title>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
var homeModule=angular.module('HomeModule',[]);
function homeController($scope){
$scope.pageHeading="to be a good man";
}
homeModule.filter('titleCase',function(){
var titleCaseFilter=function(input){
/*将一串字符串按照空格切分*/
var words=input.split(' ');
for(var i=0;i<words.length;i++){
words[i]=words[i].charAt(0).toUpperCase()+words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
</script>
</head>
<body ng-controller="homeController" ng-app="HomeModule">
<h1>{{pageHeading|titleCase}}</h1>
</body>
</html>
通过Route和$location改变视图
var someModule=angular.module('someModule',[..module dependencies..]);
someModule.config(function($routeProvider){
$routeProvider
.when('url',
{controller:aController,templateUrl:'/path/to/template'}
).when(..othermappings for your app).
..
otherwise(..what to do id noting else mathches..);
});
当浏览器url变为指定url时,Angular将加载/path/to/template下的模版,同时用aController管理这个模版的根元素。
最后一行为没匹配到就走到这一段。
与服务器交互 $http
……
用指令修改Dom
var appModule=angular.module('appModule',[...]);
appModule.directive('directiveName',directiveFunction);
自定义标签实现标签自动聚焦
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
var appModule=angular.module('app',[]);
appModule.directive('ngbkFocus',function(){
/*将光标自动定位到标签*/
return{
link:function (scope,element,attrs,controller){
/*属性的数组传递给了标识符 以及dom元素上的控制器*/
element[0].focus();
}
};
});
function someController($scope){
$scope.message={
text:"nothing click here"
};
$scope.clickUnfocused=function(){
$scope.message.text="unfocused button clicked";
};
$scope.clickFocused=function(){
$scope.message.text="focus button clicked";
};
}
</script>
</head>
<body ng-controller="someController">
<button ngbk-focus ng-click="clickUnfocused()">Not Focused</button>
<button ng-click="clickFocused()">I am focused!</button>
<div>{{message.text}}</div>
</body>
</html>
表单校验
<form name="addUserForm" ng-controller="AddUserController">
<div>First name: <input ng-model="user.first" required></div>
<div>Last name: <input ng-model="user.last" required></div>
<div>Email: <input type="email" ng-model="user.email" required></div>
<div>Age: <input type="number" ng-maxlength="3" ng-minlength="1"></div>
<div><button>Submit</button></div>
</form>
使用来自HTML5的 required属性、email属性、number属性
在控制器内部 $valid 属性来访问表单的校验状态
个体提交按钮ng-disabled 阻止非法状态的提交
<button ng-disabled="!addUserForm.$valid">submit</button>
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>form2</title>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
function AddUserController($scope){
$scope.message="";
$scope.addUser=function(){
$scope.message="Thanks "+$scope.user.firstName+", we add you";
};
}
</script>
</head>
<body>
<ng-form ng-controller="AddUserController" name="addUserForm">
<div ng-show="message">{{message}}</div>
<div>FirstName: <input name="firstName" ng-model="user.firstName" required></div>
<div>LastName: <input name="lastName" ng-model="user.lastName" required></div>
<div>Email: <input type="email" ng-model="user.email" required></div>
<div>Age: <input type="number" ng-maxlength="3" ng-minlength="1"></div>
<div><button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button></div>
</ng-form>
</body>
</html>