AngularJs应用的基本元素学习教程

一、摘要：

angular是采用JavaScript编写的前端mvc框架，帮助开发者编写现代化的单页面应用。它尤其适用编写有大量CRUD操作的，具有Ajax风格的客户端应用。这里总结了一些我学习AngularJs的笔记。

二、总结：

AngularJs中的mvc模式（model-view-control）:

AngularJs应用的基本元素介绍：

表达式（expressions）、指令（directive）、模块（modules）、控制器（controller）、模型（model）。

1.表达式（expressions）：

AngularJs中expressions的两种写法：

a）写在双括号里面：{{expressions}}； b）和指令绑定，例如和ng-bind指令绑定：ng-bind="expressions"

 在这里总结，在view层显示数据的4种方法：

1）用指令ng-init初始化数据，用{{ }}的方式在视图上显示数据：

2）用ng-bind将元素与数据绑定（span里面将会显示Doe）：

3）用ng-model实现数据的双向绑定（初始值计算的Total in dollar为5，改变input控件中的值，Total in dollar会随之改变）：

4）用指令ng-controller来调用model里面的数据：

2.指令（directive）：

在angularjs中，所有能够被框架理解和解释的特殊HTML标签和属性，统称为指令。

例如：

ng-app：初始化一个angularjs应用程序

ng-init：初始化应用程序数据

ng-model：将应用程序控件(input, select, textarea)的值和应用程序数据绑定在一起。

ng-controller：作用域创建指令。当在DOM树中遇到此指令，angularjs都会创建scope类的新实例$scope。

... ...

3.模块（modules）：

Angularjs为自己定义了全局命名空间angular，它提供了多种功能及不少便利函数，module就是其中之一。module为AngularJs管理的对象（控制器、服务等）扮演容器的角色。

用angular.module定义模块：

第一个参数：应用程序将要运行的html元素（也可以将ng-app指定在html元素或body元素等其他元素中，使用模块一定要给ng-app属性指明模块的名字）

第二个参数：代表此模块依赖哪些其他模块。

4.控制器（controller）：

控制器（controller）主要是初始化作用域实例，控制器实际上是JavaScript函数。在设定模型初始值时，控制器和ng-init指令做同样的工作。

控制器可以让你在JavaScript代码中表达初始化逻辑，而不是污染HTML模块。

5.模型（model）：

AngularJs中的模型实际上就是普通的JavaScript对象，和控制器一样，不需要特别地去扩展任何Angular的底层类，也不用去构造模型对象。

模型层中使用任何当前存在的纯JavaScript的类和对象，模型可拥有的属性也不仅限于原始值，任何有效的JavaScript对象或数组都是可以的。

只需要将模型简单的指派给$scope,AngularJs就可确定它的存在。

原文来自：博客园/youyi2016