AngularJs的认识
2015-09-22 12:31
513 查看
1、什么是AngularJs
AngularJS是一个通过扩展HTML语法来创建动态的WEB应用设计框架。angularjs是纯javascript编写的客户端技术，它利用数据绑定和依赖注入减少了代码的编写量。同时它提供了前端的3层架构模式，让端对端通信得到了完美的体现。
AngularJs通过标识符(directives)来声明元素，体现结构，使浏览器能够识别新的语法。
AngularJs为开发者呈现了更高层次的抽象来简化应用的开发，这也导致了它CRUD缺少了部分灵活性，使它对于CRUD应用有很大的作用，但对于复杂的dom操作却并不适用，如：游戏，图形化编辑器等。
AngularJs的功能：
a.可以把应用程序的数据绑定到HTML元素上(ng-bind)
b.可以克隆和复制HTML元素(ng-repeat)
c.可以显示和隐藏HTML元素
d.可以在HTML元素背后添加代码
e.支持输入验证
2、指令
指令：当关联的HTML结构进入编译阶段时应执行的操作，其本质只是一个当编译器编译到关联的dom时需执行的函数。
AngularJs的指令是以驼峰式命名的，以ng开头，例如ngBind。
指令可以用：_ -这3个符号进行转换。例如：ngBind，ng：bind，ng-bind，ng_bind这几个指令是完全等价的。但ng：bind已经过时了，建议使用ng-bind形式指令。
指令也可以添加前缀，在HTML5中允许自定义属性，但必须以data-开头，所以data-ng-bind也等价于ng-bind。
ng-app:声明一个AngularJs应用程序，表明应用的作用域。并自动初始化这个应用程序。在1.3即之后的版本中ng-app必须设置值，否则模块不能根据应用创建控制器。
ng-model：声明一个实体对象，并创建一个以ng-model的值为名称的变量，把变量的值绑定到应用程序上。
ng-bind：用于绑定数据，显示数据结果。
ng-init：初始化应用程序的数据。(不建议使用)
ng-controller:声明一个控制器函数。
ng-click:声明一个点击事件函数。
ng-repeat:克隆一次HTML元素，并遍历数组显示数据。这是AngularJs中的迭代器。
{{表达式}}：相当于ng-bind，绑定数据，并显示在视图层。
3.三层架构(MVC)
控制器(C)：控制器是javascript函数，其作用是初始化作用域对象，并增强作用域对象的行为，使作用域能和控制器联接起来。控制器应该只关心业务逻辑，且只包含单个视图的业务逻辑，由ng-controller声明。需注意的是：AngularJs的控制器是基于作用域实现继承关系的，即是说：子作用域的控制器能继承父作用域的控制器的属性和方法。
控制器执行方法：angular.module('应用名'),[模块分类]).controller('控制器名称',function($scope){})。
在1.3及之后的版本不能再使用function 控制器名称(){}的方式声明控制器了。
模型实体(M)：实体对象由ng-model声明，每一个声明的实体就是作用域中的一个属性。注意：ng-init只适合初始化实体。
视图(V)：
视图由模型数据和模版共同组成，是用户看得见的内容。视图背后的控制代码就是控制器。它的主要工作内容是构造模型，并把模型和回调方法一起发送到视图。
4.作用域
作用域是一个指向模型的对象，它是表达式的执行环境。它是连接视图和控制器的桥梁。作用域用$scope表示。其中包含模型对象作为属性，业务逻辑方法。
作用域的特点：
a.作用域提供了模型变化观察者($watch)，可以实时的更新作用域属性值和视图层模型数据。
b.子作用域可以继承父作用域的属性和方法。
c.作用域提供了表达式执行的上下文。
d.子作用域的事件可以传递到父作用域。
e.大多数情况下，指令不会参生作用域，但是ng-controller，ng-app，ng-repeat这几个指令是例外，他们都会创建属于自己的作用域。
f.你可以使用angular.element(dom).scope()来获取指定的dom元素的作用域。
5.模块
大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使用模块来声明应用应该如何启动。一般情况下一个模块就是一个应用，由ng-app指定。这种方式有以下几个优点：
a.启动过程是声明式的，所以更容易懂。
b.单元测试是不需要加载全部模块的，因此这种方式有助于写单元测试。
c.可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端的测试。
d.第三方代码可以打包成可重用的模块。
e.模块可以以任何先后或者并行的顺序加载（因为模块的执行本身是延迟的）。
官方建议将一个应用分为以下几个模块：
一个服务模块，用来做服务的声明。（应用名.service）
一个指令模块，用来做指令的声明。（应用名.directive）
一个过滤器模块，用来做过滤器声明。（应用名.filter）
一个依赖以上模块的应用级模块，它包含初始化代码。[应用名.service,应用名.directive,应用名.filter]
模块声明：angular.module('模块名',[])
应用启动：angular.module('模块名',[]).run(function(){})
模块配置：angular.module('模块名',[]).config(function(){})
HTML:
controller.js:
效果图：
AngularJS是一个通过扩展HTML语法来创建动态的WEB应用设计框架。angularjs是纯javascript编写的客户端技术，它利用数据绑定和依赖注入减少了代码的编写量。同时它提供了前端的3层架构模式，让端对端通信得到了完美的体现。
AngularJs通过标识符(directives)来声明元素，体现结构，使浏览器能够识别新的语法。
AngularJs为开发者呈现了更高层次的抽象来简化应用的开发，这也导致了它CRUD缺少了部分灵活性，使它对于CRUD应用有很大的作用，但对于复杂的dom操作却并不适用，如：游戏，图形化编辑器等。
AngularJs的功能：
a.可以把应用程序的数据绑定到HTML元素上(ng-bind)
b.可以克隆和复制HTML元素(ng-repeat)
c.可以显示和隐藏HTML元素
d.可以在HTML元素背后添加代码
e.支持输入验证
2、指令
指令：当关联的HTML结构进入编译阶段时应执行的操作，其本质只是一个当编译器编译到关联的dom时需执行的函数。
AngularJs的指令是以驼峰式命名的，以ng开头，例如ngBind。
指令可以用：_ -这3个符号进行转换。例如：ngBind，ng：bind，ng-bind，ng_bind这几个指令是完全等价的。但ng：bind已经过时了，建议使用ng-bind形式指令。
指令也可以添加前缀，在HTML5中允许自定义属性，但必须以data-开头，所以data-ng-bind也等价于ng-bind。
ng-app:声明一个AngularJs应用程序，表明应用的作用域。并自动初始化这个应用程序。在1.3即之后的版本中ng-app必须设置值，否则模块不能根据应用创建控制器。
ng-model：声明一个实体对象，并创建一个以ng-model的值为名称的变量，把变量的值绑定到应用程序上。
ng-bind：用于绑定数据，显示数据结果。
ng-init：初始化应用程序的数据。(不建议使用)
ng-controller:声明一个控制器函数。
ng-click:声明一个点击事件函数。
ng-repeat:克隆一次HTML元素，并遍历数组显示数据。这是AngularJs中的迭代器。
{{表达式}}：相当于ng-bind，绑定数据，并显示在视图层。
3.三层架构(MVC)
控制器(C)：控制器是javascript函数，其作用是初始化作用域对象，并增强作用域对象的行为，使作用域能和控制器联接起来。控制器应该只关心业务逻辑，且只包含单个视图的业务逻辑，由ng-controller声明。需注意的是：AngularJs的控制器是基于作用域实现继承关系的，即是说：子作用域的控制器能继承父作用域的控制器的属性和方法。
控制器执行方法：angular.module('应用名'),[模块分类]).controller('控制器名称',function($scope){})。
在1.3及之后的版本不能再使用function 控制器名称(){}的方式声明控制器了。
模型实体(M)：实体对象由ng-model声明，每一个声明的实体就是作用域中的一个属性。注意：ng-init只适合初始化实体。
视图(V)：
视图由模型数据和模版共同组成，是用户看得见的内容。视图背后的控制代码就是控制器。它的主要工作内容是构造模型，并把模型和回调方法一起发送到视图。
4.作用域
作用域是一个指向模型的对象，它是表达式的执行环境。它是连接视图和控制器的桥梁。作用域用$scope表示。其中包含模型对象作为属性，业务逻辑方法。
作用域的特点：
a.作用域提供了模型变化观察者($watch)，可以实时的更新作用域属性值和视图层模型数据。
b.子作用域可以继承父作用域的属性和方法。
c.作用域提供了表达式执行的上下文。
d.子作用域的事件可以传递到父作用域。
e.大多数情况下，指令不会参生作用域，但是ng-controller，ng-app，ng-repeat这几个指令是例外，他们都会创建属于自己的作用域。
f.你可以使用angular.element(dom).scope()来获取指定的dom元素的作用域。
5.模块
大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使用模块来声明应用应该如何启动。一般情况下一个模块就是一个应用，由ng-app指定。这种方式有以下几个优点：
a.启动过程是声明式的，所以更容易懂。
b.单元测试是不需要加载全部模块的，因此这种方式有助于写单元测试。
c.可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端的测试。
d.第三方代码可以打包成可重用的模块。
e.模块可以以任何先后或者并行的顺序加载（因为模块的执行本身是延迟的）。
官方建议将一个应用分为以下几个模块：
一个服务模块，用来做服务的声明。（应用名.service）
一个指令模块，用来做指令的声明。（应用名.directive）
一个过滤器模块，用来做过滤器声明。（应用名.filter）
一个依赖以上模块的应用级模块，它包含初始化代码。[应用名.service,应用名.directive,应用名.filter]
模块声明：angular.module('模块名',[])
应用启动：angular.module('模块名',[]).run(function(){})
模块配置：angular.module('模块名',[]).config(function(){})
HTML:
<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="testapp">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="../../js/angular-1.4.0-rc.2/angular.js"></script>
<script src="../../js/test/controller.js"></script>
</head>
<body>
<div data-ng-controller="testController">
<span>姓名：</span>
<input type="text" data-ng-model="name">
<div>颜色：</div>
<ul>
<li data-ng-repeat="color in colorList">{{color.name}}</li>
</ul>
</div>
</body>
</html>controller.js:
angular.module("testapp",[]).controller("testController",function($scope){
$scope.colorList=[
{
name:"红色",
color:"red"
},
{
name:"黑色",
color:"black"
},
{
name:"绿色",
color:"green"
},{
name:"***",
color:"yellow"
}
];
});效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angularjs开发的一些方法和建议整理
- angular $watch
- 学习笔记-AngularJs（五）
- angular 自定义指令
- angularjs实现下拉加载更多
- angularjs directive
- angular之filter的几种调用方式
- AngularJs的自定义filter用法
- 如何Angularjs1.3在页面中输出带Html标记的文本
- angularjs关于controller之间如何通讯
- ejs跟angularjs相比，实在是太难写了，附实例！
- AngularJS + RequireJS
- AngularJS - 使用RequireJS还是Browserify？
- angularJS articles and resources
- Angularjs 列表页面筛选
- AngularJS学习笔记
- 由jQuery到AngularJS的思维转变
- 由JQuery到Angularjs的思维转变
- AngularJS初探：搭建PhoneCat项目的开发与测试环境
- [转]AngularJS Directive 隔离 Scope 数据交互