Angularjs基础(一)
(一)
模型——视图——控制器
端对端的解决方案，AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众
之处如下：数据绑定，基本模板标识符，表单验证，路由，深度连接，组件重用，依赖注入。测试包括
单元测试，段对端测试，模拟和自动化测试框架。
Hello World
<Doctype html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> </head> <body> Hello {{'World'}} </body> </html>
当加载页面的时候，标记ng-app 告诉AngularJS处理整个HTML页并引导应用。
<html ng-app>
注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World。
Hello {{'World'}}
Hello AngularJS World
<Doctype html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> </head> <body> Your name:<input type="text" ng-model="yourname" placeholder="world"> <hr> Hello {{yourname || 'World'}}! </body> </html>
文本输入指令<input ng-model="yourname"/> 绑定到一个叫 yourname 的模型变量
双大括号标记将yourname 模型变量添加到问候语文本。
AngularJS 应用的解析
模板(Templates)
模板是您用HTML 和 CSS 编写的文件，展现应用的视图。您给HTML天机新的元素，属性标记，作为AngularJS
编译器的指令，Angular JS编译器是完全可扩展的。这意味着通过AngularJS 编译器是完全可扩展的，这意味着
AngularJS您可以在HTML 中构建自己的HTML标记！
应用程序逻辑（Logic）和行为（Behavior）
应用程序逻辑和行为是您用JavaScrip 定义的控制器。AngularJS与标准的AJAX应用的程序不同，您不需要
另外编写监听器或者DOM 控制器，因为他们已经内置到AngularJS 中了，这些功能使您的应用程序逻辑
很容易编写，测试，维护和理解。
模型数据（Data）
模型是从AngularJS 作用域对象的属性引申的，模型中的数据可能是Javascript对象，数组或基本类型
这都不重要，重要的是，他们都属于AngularJS 作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反
映在视图界面中，反之亦然。
此外，AngularJS 还提供了一些非常有用的服务特性：
1，底层服务保留依赖注入，XHR，缓存，URL路由和浏览器抽象服务。
2，您还可以扩展和添加自己特性的应用服务。
3，这些服务可以让您非常方便的编写WEB应用。
ng-app指令
<html lang="en" ng-app>
ng-app 指令标记了AngularJS 脚本的作用域，在<html>都是AngularJS脚本作用域，开发者也在
局部使用ng-app 指令，如<div ng-app>,则AngurJS 脚本仅在该<div>中运行。
Angular JS 脚本标签：
<script src="lib/angular/angular.js"></script>
这行代码加载angular.js 脚本，当浏览器将整个HTML页面载入晚班后将会执行该angular.js脚本，angular.js
脚本运行后将会寻找含有ng-app 指令的HTML标签，该标签即定义了AngularJS 应用的作用域。
双大括号绑定的表达式：
<p>Nothing here {{'yet'+'!'}}</p>
这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'yet' + '!'组成。
这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤将看到，DOM
可以随意表达运算结果的改变而事实更新。
引导AngularJS 应用
通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。
AngularJS应用引导过程有3个重点：
1.注入器(injector)将用于创建此应用程序的依赖注入（dependency injection）
2.注入器将会创建根作用域中的DOM，
3.AngularJS将会连接跟作用域中的DOM，从用ngApp标记的HTML 标签开始，逐步处理DOM中的指令和捆绑。
一旦AngularJS 应用引导完毕，他讲继续侦听浏览器的HTML触发事件，如鼠标点击数事件，按键事件，HTTP
传入响应等改变DOM模型的事件，这类事件一旦发生，AngularJS 将会自动检测变化，并作出相应的处理更新。
模型和控制器
在PhoneListCtrl 控制器里面初始化了数据模型（这里只不过是一个包含了数组的函数，数组中存储的对象是手机数据列表）
function PhoneListCtrl($scope){ $scope.Phones = [ {"name":"Nexus S","snippet":"Fast just got faster with Nexus S." }, {"name":"Motorola XOOM with Wi - Fi","snippet":"The Next,Next Generation tablet." } {"name":"MOTOROLA XOOM","snippet":"The Next, Next Generation tablet" } ]; }
PhoneListCtrl——控制器方法的名字，（在JS文件controllers.js中）和<body>标签里面的ngController指令的值相匹配。
手机的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个跟作用域创建出来，
而控制器的作用域的一个典型后继。这个控制器的作用域对所有的<body ng-controller="PhoneListCtrl">标记内部的
数据绑定有效。
