[关闭]
@wddpct 2017-04-03T13:25:30.000000Z 字数 2947 阅读 909

AngularJS 学习

AngularJS


概述

AngularJS 应用组成如下:

1. AngularJS 表达式

  1. AngularJS 表达式写在双大括号内:{{ expression }},如{{firstName+lastName}},或是ng-bind,写在html语法的属性内

  2. 数字表达式,也可以使用{{quantity * cost}}代替

  1. <div ng-app="" ng-init="quantity=1;cost=5">
  2. <p>总价: <span ng-bind="quantity * cost"></span></p>
  3. </div>
  1. 字符串表达式,也可以使用ng-bind="firstName + ' ' + lastName"
  1. <div ng-app="" ng-init="firstName='John';lastName='Doe'">
  2. <p>姓名: {{ firstName + " " + lastName }}</p>
  3. </div>
  1. JS对象
  1. <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  2. <p>姓为 {{ person.lastName }}</p>
  3. </div>
  1. JS 数组
  1. <div ng-app="" ng-init="points=[1,15,19,2,40]">
  2. <p>第三个值为 {{ points[2] }}</p>
  3. </div>

2. AngularJS 指令

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

  1. ng-app 指令初始化一个 AngularJS 应用程序。
  2. ng-init 指令初始化应用程序。
  3. ng-model 指定把输入域的值绑定到应用程序
  1. <div ng-app="" ng-init="firstName='John'">
  2. <p>在输入框中尝试输入:</p>
  3. <p>姓名:<input type="text" ng-model="firstName"></p>
  4. <p>你输入的为: {{ firstName }}</p>
  5. </div>

4. ng-repeat 指令会重复一个 HTML 元素

  1. <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  2. <p>使用 ng-repeat 来循环数组</p>
  3. <ul>
  4. <li ng-repeat="x in names">
  5. {{ x }}
  6. </li>
  7. </ul>
  8. </div>

5. 自定义指令,要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

  1. <body ng-app="myApp">
  2. <runoob-directive></runoob-directive>
  3. <script>
  4. var app = angular.module("myApp", []);
  5. app.directive("runoobDirective", function() {
  6. return {
  7. template : "<h1>自定义指令!</h1>"
  8. };
  9. });
  10. </script>
  11. </body>

3. AngularJS Scope(作用域)

  1. 基本使用
  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>

2. 根作用域rootScope可作用于所有的controller中

4. AngularJS 控制器

  1. ng-controller代表控制器,控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. 名: <input type="text" ng-model="firstName"><br>
  3. 姓: <input type="text" ng-model="lastName"><br>
  4. <br>
  5. 姓名: {{fullName()}}
  6. </div>
  7. <script>
  8. var app = angular.module('myApp', []);
  9. app.controller('personCtrl', function($scope) {
  10. $scope.firstName = "John";
  11. $scope.lastName = "Doe";
  12. $scope.fullName = function() {
  13. return $scope.firstName + " " + $scope.lastName;
  14. }
  15. });
  16. </script>

5. AngularJS 过滤器

  1. 过滤器可以使用一个管道字符(|)添加到表达式和指令中
过滤器 说明
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

也可以在服务中自定义函数当做过滤器使用

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. <p>姓名为 {{ lastName | uppercase }}</p>
  3. </div>

6. AngularJS 服务(Service)

  1. 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。有个 $location 服务,它可以返回当前页面的 URL 地址。
  1. var app = angular.module('myApp', []);
  2. app.controller('customersCtrl', function($scope, $location) {
  3. $scope.myUrl = $location.absUrl();//当做参数注入到function中
  4. });

2. 自定义服务

  1. app.service('hexafy', function() {
  2. this.myFunc = function (x) {
  3. return x.toString(16);
  4. }
  5. });
  6. //过滤器的一种使用
  7. app.filter('myFormat',['hexafy', function(hexafy) {
  8. return function(x) {
  9. return hexafy.myFunc(x);
  10. };
  11. }]);
  12. <ul>
  13. <li ng-repeat="x in counts">{{x | myFormat}}</li>
  14. </ul>

7. AngularJS 模块

8. AngularJS 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入

9. AngularJS 鹿尤

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注