参考教程:w3schools

AngularJS References

添加自定义指令

可以使用模块添加自定义指令:

  1. <div ng-app="myApp" w3-test-directive></div>
  2. <script>
  3. var app = angular.module("myApp", []);
  4. app.directive("w3TestDirective", function() {
  5. return {
  6. template : "I was made in a directive constructor!"
  7. };
  8. });
  9. </script>

注:指令名在 AngularJS 中定义时必须使用驼峰命名法 w3TestDirective,在调用时必须使用 - 分隔名称 w3-test-directive

可以通过以下四种方式调用自定义指令:

  1. <w3-test-directive></w3-test-directive>
  2. <div w3-test-directive></div>
  3. <div class="w3-test-directive"></div>
  4. <!-- directive: w3-test-directive -->

限制自定义指令

可以通过设置 restrict 限制指定类别元素调用自定义指令。

  1. var app = angular.module("myApp", []);
  2. app.directive("w3TestDirective", function() {
  3. return {
  4. restrict : "A",
  5. template : "<h1>Made by a directive!</h1>"
  6. };
  7. });
  • E for Element name
  • A for Attribute
  • C for Class
  • M for Comment

ng-repeat 命令

ng-repeat 可以克隆 HTML 标签。

  1. <div ng-app="" ng-init="names=[
  2. {name:'Jani',country:'Norway'},
  3. {name:'Hege',country:'Sweden'},
  4. {name:'Kai',country:'Denmark'}]">
  5. <ul>
  6. <li ng-repeat="x in names">
  7. {{ x.name + ', ' + x.country }}
  8. </li>
  9. </ul>

效果:

  • Jani, Norway
  • Hege, Sweden
  • Kai, Denmark

AngularJS - 图1

Tables

ng-repeat 很适合用于生成 Table。下例还顺便演示了如何去 aspx 中获取 JSON 数据。

  1. <div ng-app="myApp" ng-controller="customersCtrl">
  2. <table>
  3. <tr ng-repeat="x in names">
  4. <td>{{ x.Name }}</td>
  5. <td>{{ x.Country }}</td>
  6. </tr>
  7. </table>
  8. </div>
  9. <script>
  10. var app = angular.module('myApp', []);
  11. app.controller('customersCtrl', function($scope, $http) {
  12. $http.get("customers_sql.aspx")
  13. .then(function (response) {$scope.names = response.data.records;});
  14. });
  15. </script>

Scope

  • Scope 是 HTML(view)和 JavaScript(controller)间的绑定部分
  • Scope 是一个包含可用属性和方法的对象
  • Scope 在视图和控制器都可用

一个使用 Scope 的例子:

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <h1>{{carname}}</h1>
  3. </div>
  4. <script>
  5. var app = angular.module('myApp', []);
  6. app.controller('myCtrl', function($scope) {
  7. $scope.carname = "Volvo";
  8. });
  9. </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.
  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. <p>The name is {{ lastName | uppercase }}</p>
  3. </div>
  4. <script>
  5. var app = angular.module('myApp', []);
  6. app.controller('personCtrl', function($scope) {
  7. $scope.lastName = "Depp";
  8. });
  9. </script>

AngularJS - 图2

The filter

filter 只能作用于数组对象,筛选包含匹配项的数组。

  1. <div ng-app="myApp" ng-controller="namesCtrl">
  2. <p>Type a letter in the input field:</p>
  3. <p><input type="text" ng-model="test"></p>
  4. <ul>
  5. <li ng-repeat="x in names | filter:test">
  6. {{ x }}
  7. </li>
  8. </ul>
  9. </div>
  10. <script>
  11. angular.module('myApp', []).controller('namesCtrl', function($scope) {
  12. $scope.names = [
  13. 'Jani',
  14. 'Carl',
  15. 'Margareth',
  16. 'Hege',
  17. 'Joe',
  18. 'Gustav',
  19. 'Birgit',
  20. 'Mary',
  21. 'Kai'
  22. ];
  23. });
  24. </script>

AngularJS - 图3

$http

AngularJS 内置了 30 多个服务对象。有和 window.locaiton 相似的 $location,和 window.setTimeout 相似的 $timeout。但最常用的还是 $http。

$http 用来发送请求和读取响应。

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <p>Today's welcome message is:</p>
  3. <h1>{{myWelcome}}</h1>
  4. </div>
  5. <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>
  6. <script>
  7. var app = angular.module('myApp', []);
  8. app.controller('myCtrl', function($scope, $http) {
  9. $http.get("welcome.htm")
  10. .then(function(response) {
  11. $scope.myWelcome = response.data;
  12. });
  13. });
  14. </script>

AngularJS - 图4

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.
  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. <p>Data : {{content}}</p>
  3. <p>Status : {{statuscode}}</p>
  4. <p>StatusText : {{statustext}}</p>
  5. </div>
  6. <p>The response object has many properties. This example demonstrate the value of the data, status, and statusText properties.</p>
  7. <script>
  8. var app = angular.module('myApp', []);
  9. app.controller('myCtrl', function($scope, $http) {
  10. $http.get("welcome.htm")
  11. .then(function(response) {
  12. $scope.content = response.data;
  13. $scope.statuscode = response.status;
  14. $scope.statustext = response.statusText;
  15. });
  16. });
  17. </script>

应用

使用 AngularJS 实现一个购物清单:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  4. <body>
  5. <script>
  6. var app = angular.module("myShoppingList", []);
  7. app.controller("myCtrl", function($scope) {
  8. $scope.products = ["Milk", "Bread", "Cheese"];
  9. $scope.addItem = function () {
  10. $scope.errortext = "";
  11. if (!$scope.addMe) {return;}
  12. if ($scope.products.indexOf($scope.addMe) == -1) {
  13. $scope.products.push($scope.addMe);
  14. } else {
  15. $scope.errortext = "The item is already in your shopping list.";
  16. }
  17. }
  18. $scope.removeItem = function (x) {
  19. $scope.errortext = "";
  20. $scope.products.splice(x, 1);
  21. }
  22. });
  23. </script>
  24. <div ng-app="myShoppingList" ng-controller="myCtrl">
  25. <ul>
  26. <li ng-repeat="x in products">
  27. {{x}}
  28. <span ng-click="removeItem($index)">&times;</span>
  29. </li>
  30. </ul>
  31. <input ng-model="addMe">
  32. <button ng-click="addItem()">Add</button>
  33. <p style="color:red;">{{errortext}}</p>
  34. </div>
  35. </body>
  36. </html>

AngularJS - 图5