AngularJs初步学习笔记(part1)

一、摘要:

angular是采用JavaScript编写的前端mvc框架,帮助开发者编写现代化的单页面应用。它尤其适用编写有大量CRUD操作的,具有Ajax风格的客户端应用。

二、总结:

AngularJs中的mvc模式(model-view-control):

AngularJs初步学习笔记(part1)

AngularJs应用的基本元素介绍:

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

1.表达式(expressions):

AngularJs中expressions的两种写法:

a)写在双括号里面:{{expressions}}; b)和指令绑定,例如和ng-bind指令绑定:ng-bind="expressions"

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

1)用指令ng-init初始化数据,用{{ }}的方式在视图上显示数据:

AngularJs初步学习笔记(part1)

2)用ng-bind将元素与数据绑定(span里面将会显示Doe):

AngularJs初步学习笔记(part1)

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

AngularJs初步学习笔记(part1)

4)用指令ng-controller来调用model里面的数据:

AngularJs初步学习笔记(part1)

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定义模块:

AngularJs初步学习笔记(part1)

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

AngularJs初步学习笔记(part1)

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

4.控制器(controller):

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

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

5.模型(model):

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

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

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

参考资料:《精通AngularJs》华中科技大学出版社

http://w3schools.bootcss.com/angular/angular_modules.html

上一篇:android学习笔记24——事件处理


下一篇:Java 面试题 —— java 源码