AngularJS学习(一)
2015-07-29 16:45
417 查看
在刚开始接触AngularJS的时候，并不觉得有什么吸引我的地方，因为它奇怪的编码方式让我感觉陌生，然而与它接触一段时间后，我感觉我喜欢上了这种简洁，干净的编码方式，虽然目前理解的并不是很深入，。。。如有不正确的地方，欢迎大家来喷！！！
AngularJS的原理
Angularjs 是google开源的一套web前端框架，它的优势在于它的五大特性：双向数据绑定(Two Way Data-Binding)，MVC(model-view-controller)， 模型（model），指令(Directives)，依赖注入(Dependency
Inject)等等。
下面通过一个小demo（index.html）了解一下Angularjs的运行机制：
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="hello" ng-controller="HelloCtrl">
Hello, {{name}}!
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.controller('HelloCtrl', function($scope) {
$scope.name = "World";
});
</script>
</body>
</html>
在上面的例子中，当浏览起尝试去访问index.html时，依次会进行一下步骤：
> 加载html,然后解析成ＤＯＭ；
＞加载angular.js脚本；
＞Angularjs等待DOMContentLoaded事件的触发；
＞寻找ng-app指令，根据该指令确定应用程序的边界；
＞使用ng-app指定的模块配置$injector；
＞使用injector创建compile服务和$rootscope;
＞使用compile编译DOM并把它链接到rootscope上；
＞通过controllerl对scope里面的变量name进行赋值；
＞对{{name}}表达式进行替换，模板显示
Hello, World!
这个只是在本地运行的一个示例，如果在实际应用中的话可以直接调用后端提供的接口，从而访问服务器端的数据
比如通过'DOMAINNAME + “/login”'接口，用户可以将用户名和密码传递到服务器并保存起来，以便接下来的访问。
AngularJS双向数据绑定
angularjs才用并扩展了传统的HTML，通过双向数据绑定来适应动态内容，双向数据绑定允许模型和视图之间的自动同步；
如下代码，为“Hello World”增加一个输入栏(iput field);
<body ng-app ng-init = "name = 'world'">
Say hello to: <input type="text" ng-model="name">
<h1>Hello, {{name}}!</h1>
</body>
在上面的代码中 ，ng-init是用来初始化数据的，除了ng-model外，input标签看起来也没什么特别的啦，但是当我们开始向输入框输入数据的时候，奇迹就发生了，每一次输入页面都会重新绘制，以显示你所输入的name, 我们无需编写代码去更新模板，也不用调用框架的API去更新模型。Angularjs智能的检测到了模型的变化，并随之更新了页面的DOM元素。
AngularJS与传统模板不同的是：任何用户引发的视图的改变，都会映射在模板上，继而任何模型的改变也会映射到模板上。
AngularJS的优点与缺点
优点：(1). 模板功能强大，并且是声明式的，它自带了丰富的Angular指令；
(2). 它是一个比较完善的ＭＶＣ框架，包含模块，数据双向绑定，路由，模块化，服务，依赖注入等所有功能；（下一篇详细介绍这些功能）
(3). 自定义Directive, 比jquery插件更灵活;
(4). ng模块化引入了Java的一些东西（依赖注入），容易开发出可复用的代码，项目从刚开始到目前，UI变化很大，在摸索中迭代产品，但JS基本很少改动；
(5). Angularjs支持单元测试和e2e-testing。
缺点： (1) . 验证功能错误信息显示比较薄弱，需要写很多模板标签；
(2). ngView只能有一个，不能嵌套多个视图。
AngularJS的原理
Angularjs 是google开源的一套web前端框架，它的优势在于它的五大特性：双向数据绑定(Two Way Data-Binding)，MVC(model-view-controller)， 模型（model），指令(Directives)，依赖注入(Dependency
Inject)等等。
下面通过一个小demo（index.html）了解一下Angularjs的运行机制：
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="hello" ng-controller="HelloCtrl">
Hello, {{name}}!
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.controller('HelloCtrl', function($scope) {
$scope.name = "World";
});
</script>
</body>
</html>
在上面的例子中，当浏览起尝试去访问index.html时，依次会进行一下步骤：
> 加载html,然后解析成ＤＯＭ；
＞加载angular.js脚本；
＞Angularjs等待DOMContentLoaded事件的触发；
＞寻找ng-app指令，根据该指令确定应用程序的边界；
＞使用ng-app指定的模块配置$injector；
＞使用injector创建compile服务和$rootscope;
＞使用compile编译DOM并把它链接到rootscope上；
＞通过controllerl对scope里面的变量name进行赋值；
＞对{{name}}表达式进行替换，模板显示
Hello, World!
这个只是在本地运行的一个示例，如果在实际应用中的话可以直接调用后端提供的接口，从而访问服务器端的数据
比如通过'DOMAINNAME + “/login”'接口，用户可以将用户名和密码传递到服务器并保存起来，以便接下来的访问。
AngularJS双向数据绑定
angularjs才用并扩展了传统的HTML，通过双向数据绑定来适应动态内容，双向数据绑定允许模型和视图之间的自动同步；
如下代码，为“Hello World”增加一个输入栏(iput field);
<body ng-app ng-init = "name = 'world'">
Say hello to: <input type="text" ng-model="name">
<h1>Hello, {{name}}!</h1>
</body>
在上面的代码中 ，ng-init是用来初始化数据的，除了ng-model外，input标签看起来也没什么特别的啦，但是当我们开始向输入框输入数据的时候，奇迹就发生了，每一次输入页面都会重新绘制，以显示你所输入的name, 我们无需编写代码去更新模板，也不用调用框架的API去更新模型。Angularjs智能的检测到了模型的变化，并随之更新了页面的DOM元素。
AngularJS与传统模板不同的是：任何用户引发的视图的改变，都会映射在模板上，继而任何模型的改变也会映射到模板上。
AngularJS的优点与缺点
优点：(1). 模板功能强大，并且是声明式的，它自带了丰富的Angular指令；
(2). 它是一个比较完善的ＭＶＣ框架，包含模块，数据双向绑定，路由，模块化，服务，依赖注入等所有功能；（下一篇详细介绍这些功能）
(3). 自定义Directive, 比jquery插件更灵活;
(4). ng模块化引入了Java的一些东西（依赖注入），容易开发出可复用的代码，项目从刚开始到目前，UI变化很大，在摸索中迭代产品，但JS基本很少改动；
(5). Angularjs支持单元测试和e2e-testing。
缺点： (1) . 验证功能错误信息显示比较薄弱，需要写很多模板标签；
(2). ngView只能有一个，不能嵌套多个视图。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS的学习--$on、$emit和$broadcast的使用 - 疯狂的原始人
- angularJS中include的页面的ng-model不能实时存取
- AngularStrap -- Modal
- angularJS中的路由
- angular学习笔记2015728
- dp poj1948 Triangular Pastures
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)
- AngularJS开发指南
- AngularJS~大话开篇
- AngularJS 资源和开发教程
- Triangular Pastures-DP(有点像是暴力枚举)
- 每天一个小知识点16（Angularjs总结四）
- AngularJS ng-if ng-repeat下使用ng-model
- angularJS最近总结一些零碎的知识点
- (转)Angular中的拦截器Interceptor
- angularJS学习笔记之一
- AngularJS 中的 Promise 和 设计模式
- AngularJS Directive 隔离 Scope 数据交互
- AngularJS学习笔记（五）
- 简话Angular 08 Angular ajax