一、摘要:

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)的更多相关文章

  1. Android NDK开发及OpenCV初步学习笔记

    https://www.jianshu.com/p/c29bb20908da Android NDK开发及OpenCV初步学习笔记 Super_圣代 关注 2017.08.19 00:55* 字数 6 ...

  2. 工厂方法FactoryMethod 初步学习笔记

    一,意图   定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 二,别名   虚构造器 Virtual Constructor 三,适用性 当一个类不知道它 ...

  3. AngularJS的学习笔记(一)

    声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括 ...

  4. Hadoop入门学习笔记---part1

    随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

  5. A.Kaw矩阵代数初步学习笔记 10. Eigenvalues and Eigenvectors

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  6. A.Kaw矩阵代数初步学习笔记 9. Adequacy of Solutions

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  7. A.Kaw矩阵代数初步学习笔记 8. Gauss-Seidel Method

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  8. A.Kaw矩阵代数初步学习笔记 7. LU Decomposition

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

  9. A.Kaw矩阵代数初步学习笔记 6. Gaussian Elimination

    “矩阵代数初步”(Introduction to MATRIX ALGEBRA)课程由Prof. A.K.Kaw(University of South Florida)设计并讲授. PDF格式学习笔 ...

随机推荐

  1. 如何用cufflinks 拼出一个理想的注释文件

    后记: cufflinks安装: 下载安装包, 不要下载source code ,直接下载binary.    Source code    Linux x86_64 binary http://cu ...

  2. Python TF-IDF计算100份文档关键词权重

    上一篇博文中,我们使用结巴分词对文档进行分词处理,但分词所得结果并不是每个词语都是有意义的(即该词对文档的内容贡献少),那么如何来判断词语对文档的重要度呢,这里介绍一种方法:TF-IDF. 一,TF- ...

  3. FHS目录配置下,常见的几个问题及解答

    请说明/bin与/usr/bin目录所放置的执行文件有何不同之处? /bin主要放置在开机时,以及进入单人维护模式后还能够被使用的指令,至于/usr/bin则是大部分软件提供的指令放置处. 请说明/b ...

  4. css ul li 水平布局问题

    可以有俩种方法,暂时只用float:left:   找到每一个li进行水平浮动 #hd_nav li{ border-right: 1px solid rgba(255,255,255,0.2); f ...

  5. java List 排序 Collections.sort() 对 List 排序

    class User { String name; String age;  public User(String name,String age){  this.name=name;  this.a ...

  6. [BeiJing2010组队][BZOJ 1977]次小生成树 Tree

    话说这个[BeiJing2010组队]是个什喵玩意? 这是一道严格次小生成树,而次小生成树的做法是层出不穷的 MATO IS NO.1 的博客里对两种算法都有很好的解释,值得拥有:  (果然除我以外, ...

  7. java多线程:java队列详解

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列. 在队列这 ...

  8. java枚举实例

    实例一: public enum OrderOption {ASC,DESC; } 实例二(带参数构造函数): public enum OrderOption { ASC("ASC" ...

  9. http cookies

    https://msdn.microsoft.com/en-us/library/ms178194.aspx?f=255&MSPPError=-2147217396 http://www.as ...

  10. PADS Logic 常见错误报告内容

    1.PCB Decal LED0805 not found in Library pcb封装不在库中. 找到原图中的pcb-save to library 未分配PCB时候,右键Edit part-找 ...