AngularJS中文手册前半部分学习

AngularJS

简介

AngularJS的中文参考手册

AngularJS的使用

• AngularJS 是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：Single Page Applications）
• 可以通过script标签添加到网页中(建议把脚本放在 元素的底部。
  这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。)
  
• 各个 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 应用程序变量

  • ng-app 指令告诉 AngularJS，

    元素是 AngularJS 应用程序 的"所有者"。
    
    一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。但是我记得之前在哪看到说只识别第一个ng-app指令

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

        
    
            
    使用 ng-repeat 来循环数组
            
    
                
    
                    {{ x }}
                
             
        
    

• 创建自定义的指令

• 可以使用 .directive 函数来添加自定义的指令。

• 要调用自定义指令，HTML 元素上需要添加自定义指令名。

• 使用驼峰法来命名一个指令， phpDirective, 但在使用它时需要以 - 分割, php-directive

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

  • 元素名

  • 属性

    `
    `
    

  • 类名

        `
    `  
    

    要求：

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

注意： 必须设置 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 创建的变量绑定)

  不是一个合法的邮箱地址
  提示信息会在 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: 格式化字符串为大写。

表达式中添加过滤器

姓名为 {{ lastName | uppercase }}

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

总价 = {{ (quantity * price) | currency }}

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>

{{255 | myFormat}}

{{x | myFormat}}

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 有局限性，选择的值是一个字符串:

<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>

AngularJS 表格