AngularJS基础（一）
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。
浙公网安备 33010602011771号