AngularJs应用

引用angularjs文件

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

ng-app定义angularjs应用程序
ng-model指令把输入的元素值绑定到应用程序
ng-bind指令把应用程序变量值绑定到html元素上
ng-init指令是初始化应用程序变量的值

{{表达式}}标记是AngularJS的数据绑定，指令是内部可以是表达式，过滤器，变量等
{{expression}}表达式把数据绑定到html,这与ng-bind指令有异曲同工之妙,很像JavaScript 表达式:它们可以包含文字、运算符和变量,将在表达式书写的位置"输出"数据。

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

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-,允许你自定义指令.
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
ng-repeat 指令会重复一个 HTML 元素,绑定数据（对象数组，数组）
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
restrict 值可以是以下几种
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

数据绑定：ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
双向绑定：在修改输入域的值时， AngularJS 属性的值也将修改
用户验证：Email，提示信息会在 ng-show 属性返回 true 的情况下显示。
提供状态：ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
Css类应用：ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递，当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性，scope 是模型，scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址
$http是请求服务器数据时可以用
$timeout
$interval
$route
$routeProvider
$injector
$rootScope
$scope
$apply
$digest
$watch
$evalAsync
$dirty
$invalid
$error
$provide
$q
$location
$log
$inject
$resource
$save
$cacheFactory

API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

显著特点
? 2009年第一个开源项目版本发布，至今已过去5年，发展逐渐完善
? 更加简洁，更加接近原始的“请求-处理-响应”
? 更加提速开发、更多的新的特点、社区活跃
? 不会取代WebForm
? 底层跟WebForm都是一样的，只是管道上不同的处理而已

AngularJS
?诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。
AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
?是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
?AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Google 正式支持，有一个全职的开发团队继续开发和维护这个库。

启动(startup) - 展示“hello world!”
执行期(runtime) - AngularJS 执行期概览
作用域(scope) - 视图和控制器的集合区
控制器(controller) - 应用的行为
模型(model) - 应用的数据
视图(view) - 用户能看到的
指令(directives) - 扩展HTML语法
过滤器(filters) - 数据本地化
注入器(injector) - 聚合你的应用
模块(module) - 配置注入器
$ - AngularJS的命名空间(namespace)

浏览器载入HTML，然后把它解析成DOM。
浏览器载入angular.js脚本。
AngularJS等到DOMContentLoaded事件触发。
AngularJS寻找ng-app指令，这个指令指示了应用的边界。
使用ng-app中指定的模块来配置注入器($injector)。
注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。
编译服务($compile service)是用来编译DOM并把它链接到根作用域($rootScope)的。
ng-init指令将“World”赋给作用域里的name这个变量。
通过{{name}}的替换，整个表达式变成了“Hello World”。

下面解释了"hello world"的例子是怎么样实现“将用户输入绑定到视图上”的效果。
在编译阶段：
input上的ng-model指令给<input>输入框绑定了keydown事件；
{{name}}这个变量替换表单式建立了一个 $watch 来接受 name 变量改变的通知。
在执行期阶段：
按下任何一个键(以X键为例)，都会触发一个 input 输入框的keydown事件；
input 上的指令捕捉到 input 里值得改变，然后调用 $apply("name = 'X';")来更新处于AngularJS执行上下文中的模型；
AngularJS将 name='X'应用到模型上；
$digest 循环开始；
$watch 列表检测到了name值的变化，然后通知 {{name}}变量替换的表达式，这个表达式负责将DOM进行更新；
AngularJS退出执行上下文，然后退出Javascript上下文中的keydown事件；
浏览器以更新的文本重渲染视图。

ng-app
ng-controller
ng-init
ng-bind
ng-repeat
ng-options
ng-model
ng-disabled
ng-show
ng-hide
ng-click
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 true 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
ng-paste 规定粘贴事件的行为
ng-pluralize 根据本地化规则显示信息
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素
ng-src 指定 <img> 元素的 src 属性
ng-srcset 指定 <img> 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值

ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change