1. AngularJS简介
AngularJS是一个JavaScript框架,它可以通过<script>
标签添加到HTML页面。AngularJS通过指令拓展了HTML,且通过表达式绑定数据到HTML。
2. AngularJS主要内容
2.1 module (模块)
在AngularJS中module定义了应用程序,同时module是应用程序中不同部分的容器,Controll、Filter等在存在于module中。
module的创建
<div ng-app="myApp"></div>
<script>
var app = angular.module("myApp", [])
</script>
其中,在[...]
内的内容为当前创建的module的依赖列表,如未依赖其他的模块,则方括号中不填写任何内容,但是不可以省略。如写为angular.module("myApp")
则为引入模块而非创建新的模块。
2.2 Controller (控制器)
Controller在<div>
中由ng-controller指令定义,一般情况下,使用控制器主要是为了
- 初始化
scope
对象 - 为
scope
对象添加行为(方法)
controller创建实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{value}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.value = "this is a value";
});
</script>
</body>
</html>
其中,ng-app
为定义AngularJS应用程序,应用程序在div中运行;
ng-controller
是AngularJS中指令,用于定义控制器;
myCtrl
是一个JavaScript函数;
$scope
在此处表示控制器的作用域。
如何在控制器中创建方法?
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{date()}}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.date = function () {
return new Date();
}
});
</script>
从处功能为将当下时间返回。其中,在使用$scope
时需要先将其注入,否则会报错ReferenceError: $scope is not defined
。
2.3 Filter (过滤器)
AngularJS过滤器可以用来格式化数据,能够使用管道符(|)添加到表达式和指令中。
常用内置Filter
- currency 格式化数字格式为货币格式
- filter 从数组中选择一个子集
- lowercase 字符串转换为小写
- uppercase 字符串转换为大写
- orderBy 根据某一个表达式排序
向指令添加Filter
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
向表达式添加Filter
<p>{{ value | lowercase }}</p>
添加自定义Filter
<div ng-repeat="u in myArr | filter:myFilter ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
</div>
// 先在Controller中定义function: myFilter
$scope.myFilter = function (item) {
return item.age > 20;
};
添加自定义Filter内容来源于无上@诀博客AngularJS的Filter用法详解一文。
2.4 directive (指令)
指令是添加在HTML元素上的自定义标记(如:属性,元素,或css类)。
常见指令
ng-app
指令初始化一个AngularJS应用程序ng-init
指令初始化应用程序数据ng-model
指令把元素值绑定到应用程序ng-repeat
指令会循环一个HTML元素ng-style
指令添加前端样式
2.5 service (服务)
在AngularJS中服务是一个函数或者对象,可以在AngularJS应用中使用,包括AngularJS的内建服务和自定义服务。
内建服务
$location
// 获取当前的URL地址 $scope.myUrl = $location.absUrl();
$http
向服务器发送请求,应用相应服务器传送过来的数据var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $http){ $http.get("xxx.html").then(function(response){ $scope.myXXX = response.data; }); });
$interval
对应JavaScript中windows.setInterval
函数// 每一秒刷新显示信息,显示时钟 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $interval){ $scope.theTime = new Date().toLocaleTimeString(); $interval(function(){ $scope.theTime = new Date().toLocaleTimeString(); }, 1000); });
$timeout
对应JavaScript中windows.setTimeout
函数// 两秒后显示信息 var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $timeout){ $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); });
自定义服务
创建方法
var app = angular.module("myApp", []);
app.service("myService", function(){
this.myFun = function(string){
return "hello" + string;
}
});
调用自定义服务
var app2 = angular.module("myApp", []);
app2.controller("myCtrl", ["$scope" , "myService", function($scope, myService){
$scope.hello = myService.myFun("wang");
}]);
注意:此处controller引入依赖的顺序必须和function参数列表中顺序对应,否则会导致报错XXX is not a function
。