参考教程:w3schools
添加自定义指令
可以使用模块添加自定义指令:
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
注:指令名在 AngularJS 中定义时必须使用驼峰命名法 w3TestDirective,在调用时必须使用 - 分隔名称 w3-test-directive。
可以通过以下四种方式调用自定义指令:
<w3-test-directive></w3-test-directive>
<div w3-test-directive></div>
<div class="w3-test-directive"></div>
<!-- directive: w3-test-directive -->
限制自定义指令
可以通过设置 restrict 限制指定类别元素调用自定义指令。
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
E
for Element nameA
for AttributeC
for ClassM
for Comment
ng-repeat 命令
ng-repeat 可以克隆 HTML 标签。
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
效果:
- Jani, Norway
- Hege, Sweden
- Kai, Denmark
Tables
ng-repeat 很适合用于生成 Table。下例还顺便演示了如何去 aspx 中获取 JSON 数据。
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers_sql.aspx")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
Scope
- Scope 是 HTML(view)和 JavaScript(controller)间的绑定部分
- Scope 是一个包含可用属性和方法的对象
- Scope 在视图和控制器都可用
一个使用 Scope 的例子:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
理解 Scope
如果认为 AngularJS 程序由以下几部分组成:
- View, 即 HTML
- Model, 当前 View 中可以使用的数据
- Controller, 就是可以操作数据的 JS function
那 Scope 就是 Model。
Scope 是个包含属性和方法的 JS 对象,它可以被视图和控制器使用。
Filters
AngularJS 中可以用 Filters 来格式化数据:
currency
Format a number to a currency format.date
Format a date to a specified format.filter
Select a subset of items from an array.json
Format an object to a JSON string.limitTo
Limits an array/string, into a specified number of elements/characters.lowercase
Format a string to lower case.number
Format a number to a string.orderBy
Orders an array by an expression.uppercase
Format a string to upper case.
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.lastName = "Depp";
});
</script>
The filter
filter 只能作用于数组对象,筛选包含匹配项的数组。
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
$http
AngularJS 内置了 30 多个服务对象。有和 window.locaiton 相似的 $location,和 window.setTimeout 相似的 $timeout。但最常用的还是 $http。
$http 用来发送请求和读取响应。
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
Methods
除了上面演示的 get 方法,$http 还支持以下方法:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
Properties
$http 返回的 response 包含以下属性:
.config
the object used to generate the request..data
a string, or an object, carrying the response from the server..headers
a function to use to get header information..status
a number defining the HTTP status..statusText
a string defining the HTTP status.
<div ng-app="myApp" ng-controller="myCtrl">
<p>Data : {{content}}</p>
<p>Status : {{statuscode}}</p>
<p>StatusText : {{statustext}}</p>
</div>
<p>The response object has many properties. This example demonstrate the value of the data, status, and statusText properties.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
</script>
应用
使用 AngularJS 实现一个购物清单:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}
<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p style="color:red;">{{errortext}}</p>
</div>
</body>
</html>