1.1.模块
AngularJS引入了代表应用程序组件的模块的概念。模块提供命名空间，以基于模型的名称来引用指令，范围和其他组件。使得包装和再利用应用程序的部件更容易。
AngularJS中，每个视图或网页都通过ng-app指令分配给他一个单独的模块。可以把其他模块作为依赖模块添加到主模块（更结构化和组件化）
1.2.作用域和数据模型
AngularJS引入作用域（scope）概念。（实际上只是用来填充呈现在网页上的视图的数据的JS表示），数据可以来自任何源，如数据库，远程网络服务，AngularJS代码，web服务器动态生成etc.
作用域：普通的JavaScript对象。（可以根据需要在AngularJS代码中操作他们）。另外还能嵌套作用域来组织数据以匹配他们正在使用的上下文。
1.3.具有模板和指令的视图
HTML是基于DOM的。大多数动态Web应用程序直接用js或者jQuery操作DOM。
AngularJS引入结合模板和指令建立呈现给用户HTML的视图的概念。
指令：1）要被添加到一个HTML模板的额外属性，元素和CSS类。2）扩展了DOM的一般行为的js代码
使用指令的优点：HTML模板模板通过指令指出了预期的逻辑。内置的AngularJS指令处理大多数必要的DOM操作功能，（可把作用域中的数据绑定到视图）
可以自定义指令做WEB应用的任何DOM操作
1.4.表达式
AngularJS：在HTML模板中添加表达式的能力。对表达式求值，然后动态添加到网页。表达式被链接到作用域。
1.5.控制器
MVC框架：通过实现控制器完成。（通过指令把控制器添加到HTML中，后台实现为js代码）
1.6.数据绑定
AngularJS内置数据绑定：把模型中的数据与网页提示的内容链接。
当网页上的数据改变时模型被更新，且当数据在模型中被改变时网页也自动更新（模型始终向用户呈现数据的唯一来源，视图只是模型的投影）
1.7.服务
AngularJS在环境中工作的主力：服务。为Web应用程序提供功能的单例对象
（web应用程序的一个共同任务是执行对web服务器的ajax请求，angularjs提供了http服务，包含用来访问web服务器的所有功能）
服务功能在上下文中完全独立，可以很容易被组件化。（如内置的服务组件：http请求，日志记录分析，动画）
1.8.依赖注入
依赖注入：一个过程。一个代码组件定义了对其他组件的依赖关系。当代码被初始化，依赖组件可提供内部访问。
常见方法：使用服务。（如果正在定义需要通过HTTP请求访问Web服务器的模块，可以把http服务注入该模块，模块中的代码就能使用http功能）
1.9.职责分明
重要原则：职责分离。结构化框架确保代码很好的实现，容易理解维护测试。
视图作为应用程序正式表示结构。表明任何表示逻辑都作为视图中的HTML模板指令。
如果需要DOM操作。就在一个内置指令或自己的自定义指令js代码中执行
把任何可重复使用的任务都实现为服务，并通过依赖注入把他们添加到自己的模块
确保作用域反映了模型当前状态，并且是由该视图使用数据的单一来源
确保控制器代码只起到充实作用域数据的作用，而不包括任何业务逻辑
在模块的命名空间中定义控制器，不是全局定义。
2.AngularJS生命周期
AngularJS:组件，（引导，编译，运行阶段）
2.1.引导阶段
生命周期的第一阶段：初始化自身的必要组件，初始化ng-app指令指向模块。模块被加载，任何依赖关系都被注入模块，并提供给模块中的代码使用。
2.2.编译阶段
生命周期的第二阶段：HTML编译。加载时，DOM以静态形式被加载到浏览器中。编译阶段，静态DOM被替换成表示AngularJS视图的动态DOM。
包括：1）遍历静态DOM并收集所有指令，然后把指令链接到AngularJS内置库或自定义指令代码中相应的js功能上。指令与作用域结合，产生动态或实时视图
2.3.运行时数据绑定阶段
最后阶段：运行时阶段。存在直到用户重新加载或离开网页。作用域的任何更改都反映在视图中，视图中的任何更改也直接更新到作用域。（作用域成为视图唯一来源）
AngularJS vs 传统数据绑定：传统方法把模板与从引擎接受到的数据相结合，每次数据发生变化时对DOM执行操作。AngularJS只编译DOM一次，然后根据需要链接已经编译的模板。
2.4.将AngularJS与现有的JavaScript和jQuery整合
1.编写使用模式，自定义HTML指令，服务和控制器的AngularJS应用程序。
2.确保代码模型部分。把模型中增加模型数据的代码分离出来，放入控制器函数。把访问后端模型数据的代码分离放入服务
3.确定操作视图中的DOM元素代码。把DOM操作代码分离放入定义良好的自定义指令组件，提供HTML指令。
4.确定其他基于任务的函数，分离放入服务。
5.把指令和控制器隔离到模块中组织代码
6.使用依赖注入把服务和模块恰当连接。
7.更新HTML模板以使用新指令
2.5.在HTML文档中引导AngularJS
引导：1）通过ng-app指令定义应用程序模块，2）加载在<script>标签中的anjular.js
ng-app指令告诉AngularJS编译器把该元素作为编译的根。ng-app通常装入<html>标签，确保整个网页都会被包括。
2.6.使用全局API
使用AngularJS应用程序时：有些需要定期执行的JavaScript常见任务：比较对象，深拷贝，遍历对象，转换JSON数据。
var myCopy=angular.copy(myObj);
遍历数组。
var objArr=[{score:95},{score:98},{score:92}];
var scores=[];
angular.forEach(objArr,function(value,key){
this.push(key+'='+value)
},scores);
1.步骤
- 加载AngularJS库和你的主模块
- 定义AngularJS应用程序根元素
- 将控制器添加到模板
- 实现作用域模型
AngularJS是一个JavaScript库的框架，提供了创建网站和web应用程序的一个结构化的方法。
AngularJS把Web应用程序组织为MVC
作用域作为应用程序的模型，由基本的JavaScript对象构成。
利用模板与扩展HTML功能的指令，实现自定义的HTML组件
<!DOCTYPE html>
<!-- 定义ANgularJS应用程序根元素（定义ng-app让AngularJS知道从哪里开始编译程序） -->
<html lang="en" ng-app="firstApp">
<head>
<meta charset="UTF-8">
<title>AngularJS App</title>
</head>
<!-- 实现按钮操作模型以及随后的视图 -->
<body>
<!-- 用AngularJS模块来控制的HTML元素添加一个控制器，需要在模块代码中定义此控制器 -->
<!-- 把名为FIrstController的控制器分配到<div>元素中，把视图中的元素映射到一个特定的控制器，包含一个作用域 -->
<div ng-controller="FirstController">
<span>Name:</span>
<!-- 实现作用域模型 -->
<!-- 控制器被定义，就可以实现作用域。涉及到把HTML元素链接到作用域变量。在该功能内初始化变量，提供功能处理对作用域的更改。-->
<input type="text" ng-model="first">
<input type="text" ng-model="last">
<button ng-click="updateMessage()">Message</button>
<hr>
{{heading+message}}
</div>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="first.js"></script>
</body>
</html>
// 定义模块增加控制器，过滤器和服务时使用的命名空间
// firstApp模块对象
var firstApp=angular.module('firstApp', []);
// 添加到firstApp模块的FirstController
firstApp.controller('FirstController', function($scope){
// 作用域的初始值
$scope.first='Some';
$scope.last='One';
$scope.heading='Message: ';
// 将单击处理程序链接到在作用域中定义的updateMessage()
$scope.updateMessage=function(){
$scope.message='Hello'+$scope.first+' '+$scope.last+'!';
};
})
扫一扫
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
