博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

AngularJS学习笔记

Posted on 2019-05-13 22:00  Hamilton Tan  阅读(701)  评论(0编辑  收藏  举报

AngularJS 简介
学习网址:http://www.runoob.com/angularjs/angularjs-tutorial.html


AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。


AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

注意:

根据实例自己总结:2015-12-17

<div ng-app="" ng-init="num1=1; num2=5">

<h2>价格计算器</h2>

数量: <input type="number" ng-model="num1">

价格: <input type="number" ng-model="num2">

<p><b>总价:</b> {{num1* num2}}</p>

</div>

各特性使用说明:

1 ng-app="" 用来告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"

2 ng-init="num1=1; num2=5",用来定义变量,设置初始值的
  ng-init="person={firstName:'John',lastName:'Doe'}"

3 ng-model="num1",用来获取变量,并显示给控件

4 {{ }} 和 ng-bind 功能相同,都是用来绑定和显示数据的

5 ng-repeat 用来循环数组的(写法如下)

<li ng-repeat="x in names">

  {{x}}

</li>

6 ng-if=”$odd”是偶数行,ng-if=”$even”是奇数行

7 <td>{{ $index + 1 }}</td>这一句, $index 是索引,可以方便使用。

 

 8 {{ lastName | lowercase }} 格式化数据用法

currency       格式化数字为货币格式。

filter      从数组项中选择一个子集。

lowercase     格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase    格式化字符串为大写。
9 filter过滤器,其实就是选择器,也即where条件来使用。

用法1:filter:{name:’a’} 选择name中包含a字符的名字

用法2:filter:’a’ 选择name中包含a字符的名字

用法3:filter:checkName ,checkName就是定义的一个函数

        $scope.checkName=function(zifu){

       Return zifu==’KAI’; //选择name=KAI的

           }

用法4:filter:{name:’KAI’}:true   //true即大小写及内容均需完全匹配,

                                                                 false不完全匹配


10 式化字



 

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>在输入框中尝试输入:</p>
  <p>姓名:<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
演示:http://www.runoob.com/try/try.php?filename=try_ng_intro

实例讲解:

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

 

 

什么是 AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
演示:http://www.runoob.com/try/try.php?filename=try_ng_intro_directives_html

 

AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 实例

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);

//注意:$scope这个词,不可用其他代替
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
尝试一下 »

AngularJS 模块定义应用:

AngularJS 模块

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

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

 

 

 

AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。

AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 

AngularJS 数字

AngularJS 数字就像 JavaScript 数字:
AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
尝试一下 »

使用 ng-bind 的相同实例: {{quantity*cost}}=<span  ng-bind="quantity*cost"
注意:{{ }} 和 ng-bind 用法,效果类似,可达到相同效果

AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
</div>
尝试一下 »

 

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
尝试一下 »

 

AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

注意:对象的使用,2个变量之间用 ,号隔开; 并且变量赋值是用 : 而不是 =

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.firstName}}</p>

<p>姓为 {{ person.firstName+ person.lastName }}</p>

注意:想显示2个变量的话,就可以用 + 链接,自己测试可以

</div>
尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
尝试一下 »

 

AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
尝试一下 »

使用 ng-bind 的相同实例:

注意:自己实例:

<!DOCTYPE html>

<html>

<body>

<div ng-app="" ng-init="arr=[12,26,55,87,59,17,28,35,29]">

      

{{arr[1]}}*{{arr[3]}}={{arr[1]*arr[3]}}<br />

      

{{arr[2]}}*{{arr[5]}}=<span ng-bind="arr[2]*arr[5]"></span>

      

</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>

</html>

 

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
尝试一下 »


AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

 

 

AngularJS 指令


AngularJS 通过被称为 指令 的新属性来扩展 HTML。


AngularJS 指令

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

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">
  <p>在输入框中尝试输入:</p>
  <p>姓名:<input type="text" ng-model="firstName"></p>
  <p>你输入的为: {{ firstName }}</p>

或者用:<span ng-bind="name"></span>
</div>
尝试一下 »

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

 

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。


数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{ quantity * price }}</p>
</div>
尝试一下 »

 

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。


重复 HTML 元素

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

AngularJS 实例

<div ng-app="" ng-init="name=['汪峰','周杰伦','周润发','范冰冰','甄子丹']">

<ul>

    <li ng-repeat="x in name">

       {{x}}

    </li>

</ul> 

</div>
尝试一下 »

ng-repeat 指令用在一个对象数组上:

AngularJS 实例

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

注意:数组显示值的调用写法: {{ x.name + ', ' + x.country }},类似JS即可
尝试一下 »

 

AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。


ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。


ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值

通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。


ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。

为应用程序数据提供状态(invalid、dirty、touched、error)。

为 HTML 元素提供 CSS 类。

绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素

 

 

 

AngularJS 控制器

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

 AngularJS 控制器是常规的 JavaScript 对象


AngularJS 控制器

AngularJS 应用程序被控制器控制。

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

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

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

尝试一下 »

应用解析:

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。


控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}} 注意控制器中定义的方法,调用写法,类似JS
</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> 标签中的代码复制到名为 personController.js 的外部文件中即可:

AngularJS 实例

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

然后,在应用中使用控制器文件:

AngularJS 实例

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


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


AngularJS 过滤器

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

过滤器

描述

currency

格式化数字为货币格式。

filter

从数组项中选择一个子集。

lowercase

格式化字符串为小写。

orderBy

根据某个表达式排列数组。

uppercase

格式化字符串为大写。


表达式中添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。.

((下面的两个实例,我们将使用前面章节中提到的 person 控制器))

uppercase 过滤器将字符串格式化为大写:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
尝试一下 »

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

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
尝试一下 »


currency 过滤器

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

AngularJS 实例

<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
尝试一下 »
注意:<div ng-app="myApp" ng-controller="costCtrl">
这里的 constCtrl 名称可以自定义。


向指令添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

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

AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<div>
尝试一下 »


过滤输入

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

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

AngularJS 实例

<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>
注意:filter过滤器,其实就是选择器,也即where条件来使用。

用法1:filter:{name:’a’} 选择name中包含a字符的名字
用法2:filter:’a’ 选择name中包含a字符的名字
用法3:filter:checkName ,checkName就是定义的一个函数

        $scope.checkName=function(zifu){

       Return zifu==’KAI’; //选择name=KAI的
        }
用法4:filter:{name:’KAI’}:true //true即大小写及内容均需完全匹配,
                                false不完全匹配

 尝试一下 »

 

AngularJS XMLHttpRequest

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

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件:

http://www.runoob.com/try/angularjs/data/Customers_JSON.php

{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

 

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

AngularJS 实例

<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.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response.records;});
});

注意:{$scope.names = response.records;}); 这一句是用于把上面声明的
json数组 recores获取到之后,赋值给当前循环使用的 names数组了
<li ng-repeat="x in names">

</script>   尝试一下 »

应用解析:

注意:以上代码的 get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上,附:PHP Ajax 跨域问题最佳解决方案

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器

控制器对象有一个属性: $scope.names

$http.get() 从web服务器上读取静态 JSON 数据

服务器数据文件为:  http://www.runoob.com/try/angularjs/data/Customers_JSON.php

当从服务端载入 JSON 数据时,$scope.names 变为一个数组。

 

 

 

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

 

在表格中显示数据

使用 angular 显示表格是非常简单的:

AngularJS 实例

<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.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
尝试一下 »


使用 CSS 样式

为了让页面更加美观,我们可以在页面中使用CSS:

CSS 样式

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
尝试一下 »


使用 orderBy 过滤器

排序显示,可以使用 orderBy 过滤器: 

AngularJS 实例

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
尝试一下 »


使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写: 

AngularJS 实例

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>
尝试一下 »

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index

AngularJS 实例

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
注意:<td>{{ $index + 1 }}</td>这一句, $index 是索引,可以方便使用。
尝试一下 »

使用 $even 和 $odd

AngularJS 实例

<!DOCTYPE html>

<html>

<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

    <style type="text/css">

       table,tr,td{border-collapse: collapse;}

       td{border:1px solid #ff8000; padding:5px 10px;}

       .bg_one{ background:#CCC;} //可以自己定义样式

    </style>

<body>

 

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

<table>

 <tr ng-repeat="x in names">

     <td ng-if="$odd" class="bg_one">{{$index+1}}</td>

     <td ng-if="$even">{{$index+1}}</td>

     <td ng-if="$odd" class="bg_one">{{x.Name}}</td>

     <td ng-if="$even">{{x.Name}}</td>

     <td ng-if="$odd" class="bg_one">{{x.Country}}</td>

     <td ng-if="$even">{{x.Country}}</td>

    </tr>

注意:ng-if=”$odd”是偶数行,ng-if=”$even”是奇数行

</table>

</div>

    <script>

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

       app.controller('myCtrl',function($scope,$http){

       $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function(result){$scope.names=result.records});

       });

    </script>

</body>

</html>
尝试一下 »


AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。


使用 PHP 从 MySQL 中获取数据

AngularJS 实例

<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.runoob.com/try/angularjs/data/Customers_MySQL.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
注意:$http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php") 这个.php文件里面就只是定义了一个 json数组,然后获取到,赋值而已
尝试一下 »


ASP.NET 中执行 SQL 获取数据

AngularJS 实例

<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.runoob.com/try/angularjs/data/Customers_SQL.aspx")
    .success(function (response) {$scope.names = response.records;});
});
</script>
注意:$http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx") 这个.aspx文件里面就只是定义了一个 json数组,然后获取到,赋值而已
尝试一下 »


服务端代码

以下列出了列出了几种服务端代码类型:
1.使用 PHP 和 MySQL。返回 JSON。

2.使用 PHP 和 MS Access。返回 JSON。

3.使用 ASP.NET, VB, 及 MS Access。 返回 JSON。

4.使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

跨域 HTTP 请求

如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片,Js脚本等。

在现代浏览器中,为了数据的安全,所有请求被严格限制在同一域名下,如果需要调用不同站点的数据,需要通过跨域来解决。

以下的 PHP 代码运行使用的网站进行跨域访问。

header("Access-Control-Allow-Origin: *");

更多跨域访问解决方案可参阅:PHP Ajax 跨域问题最佳解决方案


1. PHP 和 MySql 代码实例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>


2. PHP 和 MS Access 代码实例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");

$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
    $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';

$conn->close();

echo ($outp);
?>


3. ASP.NET, VB 和 MS Access 代码实例

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name"    & c & ":" & c & x("CompanyName") & c & ","
outp = outp &       c & "City"    & c & ":" & c & x("City")        & c & "," 
outp = outp &       c & "Country" & c & ":" & c & x("Country")     & c & "}"
next

outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>


4. ASP.NET, VB Razor 和 SQL Lite 代码实例

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "City"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "Country" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp

 

 

 

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。


ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

AngularJS 实例

<div ng-app="">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
</div>
尝试一下 »

实例讲解:

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。

如果 mySwitch 为true, 按钮将不可用: 

<p>
<button disabled>点我!</button>
</p>

如果 mySwitch 为false, 按钮则可用: 

<p>
<button>Click Me!</button>
</p>


ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

AngularJS 实例

<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
</div>
尝试一下 »

ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。

你可以使用表达式来计算布尔值( true 或 false):

AngularJS 实例

<div ng-app="">
<p ng-show="hour > 12">我是可见的。</p>
</div>
尝试一下 »

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 实例

<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>
尝试一下 »

 

 

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。


ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

AngularJS 实例

<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>
尝试一下 »


隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <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 指令设置 <p>元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。

toggle() 函数用于切换 myVar 变量的值(true 和 false)。

ng-hide="true" 让元素 不可见


显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见

ng-show="true" 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{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 模块


模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。


带有控制器的模块

应用("myApp") 带有控制器 ("myCtrl"):

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/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>
尝试一下 »


模块和控制器包含在 JS 文件中

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

在以下实例中, "myApp.js" 包含了应用模块的定义程序, "myCtrl.js" 文件包含了控制器:

AngularJS 实例

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/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 模块让所有函数的作用域在该模块下,避免了该问题。


什么时候载入库?

 

在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。

对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在我们的实例中,AngularJS 在 <head> 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:

AngularJS 实例

<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>
尝试一下 »

 

 

 

AngularJS 表单

AngularJS 表单是输入控件的集合。


HTML 控件

以下 HTML input 元素被称为 HTML 控件:
       input元素,select元素,button元素,textarea元素

HTML 表单

HTML 表单通常与 HTML 控件同时存在。


AngularJS 表单实例

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}


应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
尝试一下 »

 

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。


实例解析

ng-app 指令定义了 AngularJS 应用。

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

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

 

 

 

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。


输入验证

在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。

AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。

 

客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。


应用代码

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>验证实例:</h2>
<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用户名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>

<p>邮箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">

提交按钮意思:用户必须填写,并且填写不合法

             邮箱必须填写,并且填写不合法
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
尝试一下 »

 

 

HTML 表单属性 novalidate 用于禁用浏览器默认的验证。


实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性: user 和 email

我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。

属性

描述

$dirty

表单有填写记录

$valid

字段内容合法的

$invalid

字段内容是非法的

$pristine

表单没有填写记录

 

 

 

AngularJS API

API 意为 Application Programming Interface(应用程序编程接口)。


AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:

  • 比较对象
  • 迭代对象
  • 转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数:

API

描述

angular.lowercase()

转换字符串为小写

angular.uppercase()

转换字符串为大写

angular.isString()

判断给定的对象是否为字符串,如果是返回 true。

angular.isNumber()

判断给定的对象是否为数字,如果是返回 true。


angular.lowercase()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
尝试一下 »

angular.uppercase()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "John";
$scope.x2 = angular.uppercase($scope.x1);
});
</script>
尝试一下 »

angular.isString()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isString($scope.x1);
});
</script>
尝试一下 »

angular.isNumber()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
尝试一下 »

 

 

AngularJS 包含

在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。


在 HTML 中包含 HTML 文件

在 HTML 中,目前还不支持包含 HTML 文件的功能。


服务端包含

大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。

使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。

PHP 实例

<?php require("navigation.php"); ?>

客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。


AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

实例

<body>
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>

步骤如下:


步骤 1: 创建 HTML 列表

myUsers_List.html

<h3>Users</h3>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>
尝试一下 »


步骤 2: 创建 HTML 表单

myUsers_Form.html

<button class="btn btn-success" ng-click="editUser('new')">
  <span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div> 
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
  <span class="glyphicon glyphicon-save"></span> Save Changes
</button>
尝试一下 »


步骤 3: 创建控制器

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName; 
  }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
})


步骤 4: 创建主页

myUsers.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>
</body>
</html>
尝试一下 »

 

 

 

 

AngularJS 应用实例

您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序:

我的笔记

 

保存 清除

剩余字数: 91

 


应用程序讲解

AngularJS 实例

<html ng-app="myNoteApp">
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
<div ng-controller="myNoteCtrl">
<h2>我的笔记</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>
尝试一下 »

应用程序文件 "myNoteApp.js":

var app = angular.module("myNoteApp", []);

控制器文件 "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});

<html> 元素是 AngularJS 应用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

<div> 是 HTML 页面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

ng-model 指令绑定了 <textarea> 到控制器变量 message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

两个 ng-click 事件调用了控制器函数 clear() 和 save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bind 指令绑定控制器函数 left() 到<span> ,用于显示剩余字符:

Number of characters left: <span ng-bind="left()"></span>

应用库文件需要在 AngularJs 加载后才能执行:

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>


AngularJS 应用架构

以上实例是一个完整的 AngularJS 单页Web应用(single page web application,SPA)。

<html> 元素包含了 AngularJS 应用 (ng-app=)。

<div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。

在一个应用可以由很多控制器。

应用文件(my...App.js) 定义了应用模型代码。

一个或多个控制器文件 (my...Ctrl.js) 定义了控制器代码。


总结 - 它是如何工作的呢?

ng-app 指令位于应用的根元素下。

对于单页Web应用(single page web application,SPA),应用的根通常为 <html> 元素。

一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域:: 定义的 HTML 元素。

AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令 , AngularJS 载入指令中的模块,并将 ng-app 作为应用的根进行编译。

应用的根可以是整个页面,或者页面的一小部分,如果是一小部分会更快编译和执行。