标签：好的 没有 渲染 tin ack 双向 name 传递数据 1.2
ngAngularJS 诞生于2009年，由 Misko Hevery 等人创建，后为Google所收购。
是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS有着诸多特性，最为核心的是：
MVC、模块化(编程)、自动化双向数据绑定、语义化标签、指令、依赖注入等等。
Single Page Application单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页面应用程序：
传统多页面应用程序：
4 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲
传统ajax的劣势：
1 ajax请求不会留下历史记录
2 用户无法直接通过URL直接进入指定页面
3 ajax对SEO不友好
ng-app 指令ng-model 指令ng-click 指令ng- 的属性称之为指令，其作用是为DOM元素绑定数据、添加事件 等<input type="text" ng-model="userName">
ng-app 指令指定了应用的根元素，通常放置在页面的根元素，也可以是任意的元素
例如：body或html标签
应用程序运行时，会自动执行边界内部的其他指令。
标记的范围尽可能小，提高性能
注意：每个页面中可以出现多次 `ng-app` 指令（不推荐！）
如果是多个需要手动引导：`angular.bootstrap()`
ng-click="expression"<button ng-click="val + 1"></button>
ng-model指令将尝试把属性绑定到当前作用域中。
如果当前作用域中没有该属性，那么AngluarJS会帮我们隐式创建并且添加到当前作用域中。
ng-init="uName=‘Jack‘"从JS角度，使用运算符和数据 连接起来的有 结果 的代码就是：表达式
注意：不带分号
例如：
可以使用 console.log(); 打印出来， 或者
console.log( expression );
可以用作 赋值运算符 的右值
var test = expression;
<p>{{user.name}}</p>
<p>{{1 + 8}}</p>
<p>{{"hello" + "world"}}</p>
<div ng-click="sayHi()"></div>
<body ng-app>
<input type="text" ng-model="user.name" />
<p>Hello {{user.name}}</p>
</body>
ng-app告诉AngularJS让它来管理 body内部的代码ng-app指令创建了一个对象，对象中包含了AngularJS的相关内容，例如：数据模型ng-model指令查询数据模型中有没有 user 对象以及name属性，没有则创建user对象以及name属性，并初始化name值为：空字符串{{user.name}} 从数据模型中查找有没有该数据，如果有就取出来，并展示ng-model和{{}} 中的 user.name 指向的是数据模型中同一个数据模块是一个容器包含了应用程序的不同组成部分，并且这些内容必须要依附于一个模块
例如：controllers, services, filters, directives, configs 等
模块是应用程序的组成单元，例如：登录模块、注册模块、商品列表模块 等，这些模块
组合在一起构成了一个完整的应用程序。
var app = angular.module(moduleName, []);// 第一个参数：模块名称，字符串
// 第二个参数：数组，用来添加当前模块的依赖项
var app = angular.module("firstApp", ["otherModuleName"]);
var app = angular.module(moduleName);ng-controller指令来使用app.controller(ctrlName, callback);app.controller("DemoController", function($scope) {
// $scope 相当于当前的数据模型
});
$scope这个名称必须这么写！$scope 是在控制器创建的时候，被注入进去的1 ng 在使用的时候，页面中只要有 ng-app 就会创建一个 scope，名字是：$rootScope
2 $scope 是 HTML（视图）背后的“男人” ---->
视图：女人，负责美（展示）
$scope：男人，负责提供美的资源（数据）
3 所有的控制器都继承自 $rootScope
4 继承是按照：原型式继承 来实现
5 对于HTML来说，参照原型式继承：子节点继承自父节点
ng-model 指令实现数据模型的值发生改变，就会导致页面值的改变；页面值的改变，也会导致数据模型中值的改变，
这种相互影响的关系就是双向数据绑定。
{{}} 表达式来实现MVC（Model–view–controller）是一种软件架构模式，
把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。
MVC是一种应用程序的设计思想（不是设计模式）
ng-app 指令包裹的HTML代码例如：移动端和PC端两个View，共享同一个Model
在MVC设计模式中， Model 响应用户请求并返回响应数据，
View 负责格式化数据并把它们呈现给用户，业务逻辑和表示层分离，
同一个 Model 可以被不同的 View 重用，所以大大提高了代码的可重用性。
M: model 模型，相当于 User（构造函数）
V: view 视图， ng-app 管理的页面
VM: ViewModel 视图模型 在Angular中就是：$scope
MVW ===> "Model View Whatever"getItem(keyName)：读取，参数类型：stringsetItem(keyName, keyValue)：设置，参数类型：string$scope.$watch(attrName, callback, flag);app.controller("demoController", function($scope) {
$scope.name = "jack";
// 参数一：表示监听的$scope中的属性名称，类型为：字符串
// 参数二：表示数据变化执行的回调函数，有两个参数分别是：当前值与变化之前的值
// 参数三：比较方式，false：表示比较引用；true：表示比较值。默认值为false
$scope.$watch("name", function(curValue, oldValue) {
// 只要被监听的数据发生变化，就会指定该回调函数中的代码！
// 略过第一次执行
if(curValue === oldValue) return;
});
});
ng-app 指令启动angular.bootstrap(document, [‘MyModule‘])// 等待文档加载完成后，启动 angular
angular.element(document).ready(function() {
angular.bootstrap(document, [‘MyModule‘]);
});
ng-appng-app 并且启动，如果启动其他的，需要手动启动<div ng-app="FirstApp"></div>
<div ng-app="SecondApp"></div>
使用jQuery的思路：
1 想要获取元素，我调用 $(selector)
2 元素绑定事件，我调用 .on()
3 进行什么DOM操作，我调用什么方法完成
总结：你告诉jQuery你要做的操作，jQuery就能帮你做好。
**在使用库的过程中，开发人员是 控制者**
Angular提供了一套完整的解决方案，所有的流程都设定好了
我们只需要按照流程规则，把我们的代码进行填坑。
1.Angular框架-angular介绍与基本使用，MVC模式介绍
标签：好的 没有 渲染 tin ack 双向 name 传递数据 1.2
原文地址：http://www.cnblogs.com/lpf-leo1992/p/7137363.html
