关于angularjs:Y-分钟速成-AngularJS

3次阅读
共计 13968 个字符，预计需要花费 35 分钟才能阅读完成。
源代码下载：learnangular-cn.html
AngularJS 1.0 版在 2012 年公布。
Miško Hevery, 一位 Google 员工，从 2009 年开始开发 AngularJS。
后果发现这个想法很好，从而该我的项目当初也被 Google 官网所反对了。
AngularJS 是一个 JavaScript 框架。它能够通过一个 “script” 标签增加到一个 HTML 页面中。
AngularJS 通过指令扩大了 HTML 属性，并且通过表达式将数据绑定到 HTML。
在学习 AngularJS 之前，你应该对以下常识有了根本的理解：
HTML
CSS
JavaScript
// AngularJS 是一个 JavaScript 框架。它是一个用 JavaScript 写的库。// AngularJS 以一个 JavaScript 文件的模式公布，并且能通过一个 script 标签增加到一个网页中：// <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

///////////////////////////////////
// AngularJS 扩大 HTML

//AngularJS 通过 ng-directives 扩大 HTML。//ng-app 指令定义一个 AngularJS 利用。//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到利用的数据上。//ng-bind 指令将利用的数据绑定到 HTML 视图上。<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>Name: <input type="text" ng-model="name"></p>
      <p ng-bind="name"></p>
    </div>
  </body>
</html>

/*
  * 例子解析：* AngularJS 在网页加载后主动开启。* ng-app 指令通知 AngularJS：<div> 元素是 AngularJS 利用的 "所有者"。* ng-model 指令将 input 输入框的值绑定到利用的 name 变量上。* ng-bind 指令将 <p> 元素的 innerHTML 绑定到利用的 name 变量上。*/
<tag> 这里是要解析的内容 </tag>

///////////////////////////////////
// AngularJS 表达式

// AngularJS 表达式写在双括号内：{{表达式}}。// AngularJS 表达式采纳和 ng-bind 指令一样的形式将数据绑定到 HTML。// AngularJS 将在编写表达式的原样地位上 "输入" 数据。// AngularJS 表达式十分像 JavaScript 表达式：它们能蕴含文本，运算符和变量。// 例如 {{5 + 5}} 或 {{firstName + " " + lastName}}
<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>My first expression: {{5 + 5}}</p>
    </div>
  </body>
</html>

// 如果你删除了 ng-app 指令，HTML 将原样显示表达式，不对它进行解析：<!DOCTYPE html>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div>
      <p>My first expression: {{5 + 5}}</p>
    </div>
  </body>
</html>

// AngularJS 表达式采纳和 ng-bind 指令一样的形式将 AngularJS 数据绑定到 HTML。<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>Name: <input type="text" ng-model="name"></p>
      <p>{{name}}</p>
    </div>
  </body>
</html>

// AngularJS 的数字相似 JavaScript 的数字：<div ng-app=""ng-init="quantity=1;cost=5">
  <p>Total in dollar: {{quantity * cost}}</p>
</div>

//AngularJS 的字符串相似 JavaScript 的字符串：<div ng-app=""ng-init="firstName='John';lastName='Doe'">
  <p>The name is <span ng-bind="firstName +' '+ lastName"></span></p>
</div>

//AngularJS 的对象相似 JavaScript 的对象：<div ng-app=""ng-init="person={firstName:'John',lastName:'Doe'}">
  <p>The name is {{person.lastName}}</p>
</div>

//AngularJS 的数组相似 JavaScript 的数组：<div ng-app=""ng-init="points=[1,15,19,2,40]">
  <p>The third result is {{points[2] }}</p>
</div>

// 和 JavaScript 表达式一样，AngularJS 表达式能蕴含文本，运算符和变量。// 和 JavaScript 表达式不同，AngularJS 表达式能写在 HTML 内。// AngularJS 表达式不反对条件，循环和异样，而 JavaScript 表达式却反对。// AngularJS 表达式反对过滤器，而 JavaScript 表达式不反对。///////////////////////////////////
// AngularJS 指令


//AngularJS 指令应用前缀 ng- 扩大 HTML 属性。//ng-app 指令初始化一个 AngularJS 利用。//ng-init 指令初始化利用的数据。//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到利用的数据上。<div ng-app=""ng-init="firstName='John'">
  <p>Name: <input type="text" ng-model="firstName"></p>
  <p>You wrote: {{firstName}}</p>
</div>

// 应用 ng-init 并不常见。你将在无关控制器的章节中学习如何初始化数据。//ng-repeat 指令会反复一个 HTML 元素：<div ng-app=""ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{x}}
    </li>
  </ul>
</div>

//ng-repeat 指令用在一个对象数组上：<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>
</div>

// AngularJS 最适宜用于数据库 CRUD (Create Read Update Delete) 的利用。// 只需构想这些对象都是来自一个数据库的记录。// ng-app 指令定义一个 AngularJS 利用的根元素。// ng-app 指令将在页面加载后主动启动（主动初始化）利用。// 稍后你将学习如何为 ng-app 设置一个值（如 ng-app="myModule"），来连贯代码模块。// ng-init 指令为一个 AngularJS 利用定义初始值。// 通常，你不太应用 ng-init。你会转而应用一个控制器或模块。// 你将在稍后学到更多无关控制器和模块的内容。//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到利用的数据上。//ng-model 指令还能：// 为利用的数据提供类型验证 (number, email, required)。// 为利用的数据提供状态信息 (invalid, dirty, touched, error)。// 为 HTML 元素提供 CSS 类。// 将 HTML 元素绑定到 HTML 表单。//ng-repeat 指令为汇合（一个数组）中的每个元素克隆出 HTML 元素。///////////////////////////////////
// AngularJS 控制器

// AngularJS 控制器管制 AngularJS 利用中的数据。// AngularJS 控制器就是惯例的 JavaScript 对象。// AngularJS 利用由控制器管制。// ng-controller 指令定义利用的控制器。// 一个控制器就是一个 JavaScript 对象，通过规范的 JavaScript 对象构建器创立。<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

// 利用的解析：//AngularJS 利用通过 ng-app="myApp" 定义。该利用运行在 <div> 内。//ng-controller="myCtrl" 属性是一个 AngularJS 指令。它定义了一个控制器。//myCtrl 函数是一个 JavaScript 函数。//AngularJS 将应用一个 $scope 对象来调用控制器。//AngularJS 中，$scope 就是该利用对象（利用的变量和函数的所有者）。// 该控制器在 $scope 内创立了两个属性（即变量 firstName 和 lastName）。//ng-model 指令将输出表单项绑定到控制器的属性上（firstName 和 lastName）。// 以上的例子演示了一个蕴含有两个属性 lastName 和 firstName 的控制器。// 一个控制器也能够有办法（函数的变量）：<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;}
});
</script>

// 在较大型的利用中，通常是将控制器代码保留在内部文件中。// 只需将 <script> </script> 标签之间的代码复制到一个名为 personController.js 的内部文件中：<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

// 为不便下个例子应用，咱们将创立一个新的控制器文件：angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [{name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

// 将文件保留为 namesController.js：// 而后在一个利用中应用该控制器：<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>

<script src="namesController.js"></script>

///////////////////////////////////
// AngularJS 过滤器

// 过滤器能够通过一个管道符增加到表达式和指令上。// AngularJS 过滤器能用来转换数据：- **currency**:  将一个数字格式化成货币格局。- **filter**:  从一个数组中抉择一组子集元素。- **lowercase**: 将一个字符串格式化成小写模式。- **orderBy**: 根据一个表达式排序一个数组。- **upper**: 将一个字符串格式化成大写模式。// 一个过滤器能够通过一个管道符 (|) 及一个过滤器表达式增加到一个表达式上。//（在上面的两个例子中，咱们将应用前一章中的 person 控制器）//uppercase 过滤器将字符串格式化成大写格局：<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{lastName | uppercase}}</p>

</div>

//lowercase 过滤器将字符串格式化成小写格局：<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{lastName | lowercase}}</p>

</div>

//currency 过滤器将一个数字格式化成货币格局：<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

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

</div> 

// 一个过滤器能够通过一个管道符 (|) 及一个过滤器表达式增加到一个指令上。//orderBy 过滤器依据一个表达式排序一个数组：<div ng-app="myApp" ng-controller="namesCtrl">

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

<div>

// 一个输入框过滤器能够通过一个管道符 (|) 
// 以及后跟一个冒号和模式名的 filter 增加到一个指令上。// 该过滤器从一个数组中抉择一个子集：<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

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

</div>

///////////////////////////////////
// AngularJS AJAX - $http

//$http 是一个从近程服务器读取数据的 AngularJS 服务。// 以下数据可由一个 web 服务器提供：// http://www.w3schools.com/angular/customers.php
// ** 拜访 URL 来查看数据格式 **

// AngularJS $http 是一个从 web 服务器上读取数据的外围服务。// $http.get(url) 这个函数用来读取服务器数据。<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{x.Name + ',' + x.Country}}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {$http.get("http://www.w3schools.com/angular/customers.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

// 利用解析：// AngularJS 利用由 ng-app 定义。该利用运行在一个 <div> 中。// ng-controller 指令命名控制器对象。// customersCtrl 函数是一个规范的 JavaScript 对象结构器。// AngularJS 会应用一个 $scope 和 $http 对象来调用 customersCtrl。// $scope 就是该利用对象（利用的变量和函数的所有者）。// $http 是一个用于申请内部数据的 XMLHttpRequest 对象。// $http.get() 从 http://www.w3schools.com/angular/customers.php 读取 JSON 数据。// 如果胜利，该控制器会依据来自服务器的 JSON 数据，在 $scope 中创立一个属性 (names)。// 向不同的服务器（不同于申请页）申请数据，称作跨站 HTTP 申请。// 跨站申请在网站上很广泛。许多网页会从不同的服务器加载 CSS，图片和脚本。// 在古代浏览器中，基于平安起因，从脚本内进行跨站 HTTP 申请是被禁止的。// 上面的这行代码，已被退出到咱们的 PHP 例子中，以便容许跨站拜访。header("Access-Control-Allow-Origin: *");


///////////////////////////////////
// AngularJS 表格

// 应用 angular 显示表格非常简单：<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("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

// 要排序表格，增加一个 orderBy 过滤器：<table>
  <tr ng-repeat="x in names | orderBy :'Country'">
    <td>{{x.Name}}</td>
    <td>{{x.Country}}</td>
  </tr>
</table>

// 要显示表格索引值，增加一个带有 $index 的 <td>：<table>
  <tr ng-repeat="x in names">
    <td>{{$index + 1}}</td>
    <td>{{x.Name}}</td>
    <td>{{x.Country}}</td>
  </tr>
</table>

// 应用 $even 和 $odd
<table>
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Name}}</td>
    <td ng-if="$even">{{x.Name}}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>
    <td ng-if="$even">{{x.Country}}</td>
  </tr>
</table>

///////////////////////////////////
// AngularJS HTML DOM

//AngularJS 有用于将利用的数据绑定到 HTML DOM 元素属性的指令。// ng-disabled 指令将 AngularJS 利用的数据绑定到 HTML 元素的 disabled 属性上。<div ng-app=""ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

</div>

// 利用解析：// ng-disabled 指令将利用的 mySwitch 数据绑定到 HTML 按钮的 disabled 属性上。// ng-model 指令将 HTML checkbox 元素的值绑定到 mySwitch 的值上。// 如果 mySwitch 的值求值为 true，则该按钮将被禁用：<p>
<button disabled>Click Me!</button>
</p>

// 如果 mySwitch 的值求值为 false，则该按钮将不会被禁用：<p>
  <button>Click Me!</button>
</p>

// ng-show 指令显示或暗藏一个 HTML 元素。<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

// ng-show 指令基于 ng-show 的值显示（或暗藏）一个 HTML 元素。// 你能够应用任何能求值成 true 或 false 的表达式：<div ng-app="">
<p ng-show="hour > 12">I am visible.</p>
</div>

///////////////////////////////////
// AngularJS 事件

// AngularJS 有它本人的 HTML 事件指令。// ng-click 指令定义一个 AngularJS 点击事件。<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{count}}</p>

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

// ng-hide 指令可用于设置一个利用的局部区域的可见性。// 值 ng-hide="true" 使得一个 HTML 元素不可见。// 值 ng-hide="false" 使得一个 HTML 元素可见。<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {$scope.myVar = !$scope.myVar;};
});
</script>

// 利用解析：// personController 的第一局部和讲述控制器章节中的一样。// 该利用有一个默认属性（一个变量）：$scope.myVar = false：// ng-hide 指令根据 myVar 的值（true 或 false），// 设置 <p> 元素的可见性，该元素含有两个输入框。// 函数 toggle() 将 myVar 在 true 和 false 间进行切换。// 值 ng-hide="true" 使得该元素不可见。// ng-show 指令也能用来设置一个利用的某局部的可见性。// 值 ng-show="false" 使得一个 HTML 元素不可见。// 值 ng-show="true" 使得一个 HTML 元素可见。// 这个例子与下面的一样，但用 ng-show 代替了 ng-hide：<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {$scope.myVar = !$scope.myVar;}
});
</script>

///////////////////////////////////
// AngularJS 模块

// 一个 AngularJS 模块定义一个利用。// 模块是一个利用的不同局部所在的一个容器。// 模块是利用控制器的一个容器。// 控制器总是隶属于一个模块。// 这个利用 ("myApp") 有一个控制器 ("myCtrl")：<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{firstName + " " + lastName}}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

// 在 AngularJS 利用中通常将模块和控制器搁置在 JavaScript 文件中。// 在本例中，"myApp.js" 蕴含了一个利用模块的定义，而 "myCtrl.js" 蕴含了控制器：<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{firstName + " " + lastName}}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

//myApp.js
var app = angular.module("myApp", []); 

// 模块定义中的 [] 参数可用来定义依赖的模块。// myCtrl.js
app.controller("myCtrl", function($scope) {
    $scope.firstName  = "John";
    $scope.lastName= "Doe";
});

// JavaScript 中应该防止应用全局函数。它们会非常容易地被笼罩
// 或被其它脚本毁坏。// AngularJS 脚本通过将所有函数保留在模块内，缓解了这种问题。// 尽管 HTML 利用中通常是将脚本搁置在
// <body> 元素的开端，但还是举荐你要么在
// <head> 中要么在 <body> 的结尾处加载 AngularJS 库。// 这是因为对 angular.module 的调用只有在库被加载后能力被编译。<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
{{firstName + " " + lastName}}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>


///////////////////////////////////
// AngularJS 利用

// AngularJS 模块定义 AngularJS 利用。// AngularJS 控制器管制 AngularJS 利用。// ng-app 指令定义该利用，ng-controller 定义该控制器。<div ng-app="myApp" ng-controller="myCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";
  });
</script>

// AngularJS 模块定义利用：var app = angular.module('myApp', []);

// AngularJS 控制器管制利用：app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
例子