AngularJs初步学习笔记(part1)
一、摘要:
angular是采用JavaScript编写的前端mvc框架,帮助开发者编写现代化的单页面应用。它尤其适用编写有大量CRUD操作的,具有Ajax风格的客户端应用。
二、总结:
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就可确定它的存在。
参考资料:《精通AngularJs》华中科技大学出版社
http://w3schools.bootcss.com/angular/angular_modules.html
AngularJs初步学习笔记(part1)的更多相关文章
- Android NDK开发及OpenCV初步学习笔记
https://www.jianshu.com/p/c29bb20908da Android NDK开发及OpenCV初步学习笔记 Super_圣代 关注 2017.08.19 00:55* 字数 6 ...
- 工厂方法FactoryMethod 初步学习笔记
一,意图 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 二,别名 虚构造器 Virtual Constructor 三,适用性 当一个类不知道它 ...
- AngularJS的学习笔记(一)
声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括 ...
- Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
- A.Kaw矩阵代数初步学习笔记 10. Eigenvalues and Eigenvectors
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- A.Kaw矩阵代数初步学习笔记 9. Adequacy of Solutions
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- A.Kaw矩阵代数初步学习笔记 8. Gauss-Seidel Method
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- A.Kaw矩阵代数初步学习笔记 7. LU Decomposition
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
- A.Kaw矩阵代数初步学习笔记 6. Gaussian Elimination
“矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...
随机推荐
- NetSetMan IP地址切换工具
http://www.netsetman.com/en/freeware NetSetMan NetSetMan是一个网络设置管理器,它可以很容易在6种不同的,视觉结构化的配置之间切换,包括: IP地 ...
- #include #import @class 的一些用法区别
从网上查了一些资料,整理了一下,发现很多都说的比较详尽,下面摘录自网络 说一下#import同class之间的区别 在ios中我们经常会在.h和.m中引入一些类啊等等一般用的是#import来进行声明 ...
- 150. Evaluate Reverse Polish Notation
Valid operators are +, -, *, /. Each operand may be an integer or another expression. Some examples: ...
- Junit单元测试细节
1.中心思想: 单元测试不是证明你对,而是证明你没错 2.基本注解应用 注解 使用环境 @Test 标志这个方法需要单元测试 @BeforeClass 在所有单元测试方法前执行 ps:需要是stati ...
- 图像处理之face morphing
以前在论坛.微博经常看到一张脸,五官长得像A,脸型似乎又是B,觉得很有意思. 比如像这张图片.这张图片应该是网友用Photoshop完成的,他们取了郭大爷的五官,放在金元帅的脸上,在把边缘处理平滑. ...
- SQLServer如何用T—SQL命令查询一个数据库中有哪些表
1.查询SQL中的所有表: Select TABLE_NAME FROM 数据库名称.INFORMATION_SCHEMA.TABLES Where TABLE_TYPE='BASE TABLE' 执 ...
- uboot完全手册---14
1. u-boot介绍 本次移植采用的是U-Boot-1.2.0版本. 3. U-Boot源码分析 3.1 源码入口的解释 可能大多数的同学上网查资料后都了解到,stage1阶段的启动代码,主要就在s ...
- ExtJS Panel主要配置列表
Ext.panel.Panel 属性 值 描述 animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false applyTo Mixed 面板定 ...
- some knowledge of maven {maven实战}
maven是跨平台的,不仅是一个构建工具,也是一个可以管理依赖的工具.它最大化的消除了构件的重复,并且提供了中央仓库,能帮我们自动下载构件.------------------------------ ...
- 由浅入深漫谈margin属性1
margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情 ...