AngularJS中文手册前半部分学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了AngularJS中文手册前半部分学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

AngularJS

简介

AngularJS的中文参考手册

AngularJS的使用

AngularJS 是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：Single Page Applications）
可以通过script标签添加到网页中(建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。)
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS指令

AngularJS 通过 ng-directives 扩展了 HTML
AngularJS 指令是以 ng- 作为前缀的 HTML 属性
- HTML5 允许扩展的（自制的）属性，以 data- 开头。
  AngularJS 属性以 ng- 开头，可以使用 data-ng- 来让网页对 HTML5 有效。
- ng-app 指令定义一个 AngularJS 应用程序的根元素。
- ng-model是把前端的数据绑定到后端的变量上，ng-bind是把后端变量的值绑定到前端，在html中显示
  - ng-model 指令把元素值（比如输入域的值）绑定到应用程序变量。
  - ng-bind 指令把应用程序数据（变量）绑定到 HTML 视图（某个标签的innerHTML）。
- ng-init 指令初始化 AngularJS 应用程序变量
- <div ng-app="" ng-init="firstName='John'">
  
  ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。
  
  一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。但是我记得之前在哪看到说只识别第一个ng-app指令
- ng-repeat 指令会重复一个 HTML 元素
```
    <div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
        <p>使用 ng-repeat 来循环数组</p>
        <ul>
            <li data-ng-repeat="x in names">
                {{ x }}
            </li>
         </ul>
    </div>
```

创建自定义的指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script
            src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <php-directive></php-directive>
        <script>
            var app = angular.module("myApp", []);
            app.directive("phpDirective", function() {
                return {
                    template : "<h1>自定义指令!</h1>"
                };
            });
        </script>
    </body>
</html>

可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， phpDirective, 但在使用它时需要以 - 分割, php-directive

可以通过以下方式来调用指令：

元素名
属性
```
`<div php-directive></div>`
```

类名

    `<div class="php-directive"></div>`

要求：

app.directive("phpDirective", function() {
return {
    restrict : "C",
    template : "<h1>自定义指令!</h1>"
};

注意： 必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

注释


restrict : “M”
限制使用
- 可以限制指令只能通过特定的方式来调用。
- 通过添加 restrict 属性, 并设置只值为 “A”, 来设置指令只能通过属性的方式来调用:
restrict 值可以是以下几种
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
数据绑定
- {{ vName }} 表达式是一个 AngularJS 数据绑定表达式。
  
  AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
  
  {{ vName }} 是通过 ng-model=“vName” 进行同步。

AngularJS表达式

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式与 JavaScript 表达式
- 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
- 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
- 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS应用（简要）

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值(将输入域的值与 AngularJS 创建的变量绑定)

<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
提示信息会在 ng-show 属性返回 true 的情况下显示。
ng-model 指令根据表单域的状态添加/移除以下类：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine

AngularJS Scope（作用域）

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

在 AngularJS 创建控制器时，你可以将 $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>

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型，是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

Scope 作用范围

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

currency: 格式化数字为货币格式。
filter: 从数组项中选择一个子集。
lowercase: 格式化字符串为小写。
orderBy: 根据某个表达式排列数组。
uppercase: 格式化字符串为大写。

表达式中添加过滤器

<p>姓名为 {{ lastName | uppercase }}</p>

lowercase 过滤器将字符串格式化为小写

<p>总价 = {{ (quantity * price) | currency }}</p>

currency 过滤器将数字格式化为货币格式

指令中添加过滤器

<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>

orderBy 过滤器根据表达式排列数组：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

filter 过滤器从数组中选择一个子集

AngularJS Service

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。该服务向服务器发送请求，应用响应服务器传送过来的数据。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

$http 服务向服务器请求信息，返回的值放入变量 “myWelcome” 中。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

创建自定义服务

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

自定义服务，用于转换16进制数

控制器中，使用自定义服务

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

过滤器中，使用自定义服务

要使用访问自定义服务，需要在定义过滤器的时候独立添加

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
</script>

<h1>{{255 | myFormat}}</h1>

<li ng-repeat="x in counts">{{x | myFormat}}</li>

AngularJS Http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

$http.get(url) 是用于读取服务器数据的函数。
注意跨域访问问题

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

AngularJS Select

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

使用ng-repeat 指令来创建下拉列表

<div ng-app="myApp" ng-controller="myCtrl">

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "php.cn", "Taobao"];
});
</script>

二者差异

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

考虑以下场景：

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "php", url : "http://www.php.cn"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat 有局限性，选择的值是一个字符串:文章来源地址https://www.toymoban.com/news/detail-858336.html

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。

$scope.sites = {
    site01 : "Google",
    site02 : "php",
    site03 : "Taobao"
};

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

选择的值为在 key-value 对中的 value。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

也可以不使用key-value 对中的 key , 直接使用对象的属性：

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>