什么是Angularjs

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了
Google 公司的项目。 AngularJS 弥补了 HTML 在构建应用方面的不足，其通过使用标识
符（ directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声
明动态内容，从而使得 Web 开发和测试工作变得更加容易。
Misko Hevery
Angularjs版本简介
https://github.com/angular/angular.js/releases/
AngularJS功能：
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 使得开发现代的单一页面应用程序（ SPAs： Single Page Applications）变得更加容易。
1 AngularJS 把应用程序数据绑定到 HTML 元素。
2 AngularJS 可以克隆和重复 HTML 元素。
3 AngularJS 可以隐藏和显示 HTML 元素。
4 AngularJS 可以在 HTML 元素"背后"添加代码。
5 AngularJS 支持输入验证
Angularjs号称下一代 web应用主要特性如下：
1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与 UI 控件

成都创新互联-专业网站定制、快速模板网站建设、高性价比景泰网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式景泰网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖景泰地区。费用合理售后完善，10余年实体公司更值得信赖。

Angularjs资源：
http://Angularjs.org 官方网站正常打不开但是打不开大家都懂的
http://www.angularjs.cn/
http://docs.angularjs.cn/api
http://www.ngnice.com/
https://github.com/angular
Angularjs下载：
http://www.bootcdn.cn/angular.js/
通过 nodejs下载： npm install angular

为了使用 Angular，所有应用都必须首先做两件事情

1. 下载加载 angular.js 库
2.使用 ng-app 指令告诉 angular 应该管理 DOM 中的哪一些部分

无标题文档

在输入框中尝试输入：

姓名：

Angularjs中常用名词也就是所说的常用指令
HTML5 允许扩展的（自制的）属性，以 data-开头。
AngularJS 属性以 ng-开头，但是您可以使用 data-ng-来让网页对 HTML5 有效
俗话说下面的指令可以在开头加上 data- 例如 ng_app 等同于 data_ng_app

什么是 Angularjs

1. ng_app ng_bind ng_model {{}}案例演示
ng_app：
ng-app指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-model指令：
ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（ number、 email、 required）。
为应用程序数据提供状态（ invalid、 dirty、 touched、 error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng_bind指令等同于{{}}
绑定 HTML 元素到应用程序数据.

示例 1：

在输入框中尝试输入：

姓名：

示例 2： {{}}等同于 ng_bind

在输入框中尝试输入：

姓名：

实例讲解：
当网页加载完毕， AngularJS 自动开启。
ng-app指令告诉 AngularJS，

元素是 AngularJS 应用程序的"所有者"。
ng-model指令把输入域的值绑定到应用程序变量 name。
ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。
2. ng_init
ng-init指令
ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。

姓名为

3.data-指令 data-ng-init 与 ng-init 等价

姓名为

6. Angularjs表达式
AngularJS 表达式写在双大括号内： ` expression `。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS表达式很像 JavaScript表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

我的第一个表达式： {{ 5 + 5 }}

AngularJS数字

总价： {{ quantity * cost }}

AngularJS字符串

姓名： {{ firstName + " " + lastName }}

AngularJS对象

姓为 ` person`.`lastName `

AngularJS数组

第三个值为 {{ points[2] }}

7. Angularjs控制器
AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
angular 中$scope 是连接 controllers(控制器)和 templates(模板 view/视图)的主要胶合体。
我们可以把我们的 model 存放在 scope 上，来达到双向你绑定。

名:

姓:

姓名: {{person.firstName + " " + person.lastName}}

实例讲解：
AngularJS 应用程序由 ng-app定义。应用程序在

内运行。
ng-controller指令把控制器命名为 object。
函数 personController是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性： $scope.person。
person 对象有两个属性： firstName和 lastName。
ng-model指令绑定输入域到控制器的属性（ firstName 和 lastName）。

名:

姓:

姓名: {{person.fullName()}}

ng-repeat指令结合 ng-controller

{{ x.name + ', ' + x.country }}

8. Angularjs $http请求数据
1. get请求

{{ x.Name + ', ' + x.Country }}

$http get实例 1：
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function
(response) {$scope.names = response;});
$http get实例 2：
$http.get(url,{params:{id:'5'}}) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http post实例：
var postData={text:'这是 post 的内容'};
var config={params:{id:'5'}}
$http.post(url,postData,config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http Jsonp实例：
myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_
CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate = data.result;
}
).error(function(){
alert('shibai');
});
9. Angularjs过滤器
AngularJS过滤器
AngularJS 过滤器可用于转换数据：
过滤器描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
向表达式添加过滤器
过滤器可以通过一个管道字符（ |）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 person 控制器）
uppercase过滤器格式化字符串为大写：

姓名为 {{ person.lastName | uppercase }}

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

姓名为 {{ person.lastName | lowercase }}

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

数量：
价格：

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

向指令添加过滤器
过滤器可以通过一个管道字符（ |）和一个过滤器添加到指令中。
orderBy 过滤器根据某个表达式排列数组：

循环对象：

{{ x.name + ', ' + x.country }}

过滤输入
输入过滤器可以通过一个管道字符（ |）和一个过滤器添加到指令中，该过滤器后跟一个冒
号和一个模型名称。
filter 过滤器从数组中选择一个子集：

输入过滤：

{{ (x.name | uppercase) + ', ' + x.country }}

10.Angularjs模块
1.为什么要使用模块
控制器污染了全局命名空间
http://baike.baidu.com/view/4174721.htm
本教程中，截至目前为止的所有实例都使用了全局函数。
在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。
全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题， AngularJS 使用了模块。
2.普通的控制器和 AngularJS模块
AngularJS普通的控制器

使用一个由模块替代的控制器：

3.AngularJS应用程序文件
现在您已经知道模块是什么以及它们是如何工作的，现在您可以尝试创建您自己的应用程序文件。
您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件 "myApp.js"：
var app = angular.module("myApp", []);
然后，创建控制器文件。本实例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后，编辑 HTML 引入模块：

什么是 Angularjs