一、摘要:

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. hadoop问题锦集(一)-搭建集群环境时的常见问题

    1.没有主机的路由 1.namenode与datanode之间ping不通了 2.防火墙得关闭: ufw status ufw disabled 2. ssh localhost ssh:connec ...

  2. Android内存管理机制之一:low memory killer

    转载自http://www.miui.com/thread-29268-1-1.html 准备写这个专题之前,心里是有点忐忑的.首先Android内存管理机制相当复杂,想要讲清楚比较困难:其次对于绝大 ...

  3. ANTLR3完全参考指南读书笔记[08]

    前言 不要让用户被那些“专业术语”吓住! 用心设计的提示和反馈信息是软件设计者的“职业良心”.   内容 1 存在哪些错误? 2 美化错误提示 3 错误恢复策略   1 存在哪些错误? 在DSL语言开 ...

  4. 修饰符(static、final、abstract)第一篇

    三个修饰符: 一.static: 作用域: 1. 属性 1.1 静态属性不必要创建新对象,可直接用类调用 1.2 其值发生改变,则类中的值也会随之而变并延伸到其他对象中 例子: class Anima ...

  5. codeforces 192a

    link: http://codeforces.com/contest/330/problem/A brute force. /* ID: zypz4571 LANG: C++ TASK: 191a. ...

  6. POJ 3461 裸的KMP

    直接贴代码吧 #include<cstdio> #include<cstring> ],T[]; ]; int n,m; void getfail() { f[] = ; f[ ...

  7. System.Web.UI.ScriptManager.RegisterStartupScript(语句末尾加分号,不然可能会造成语句不执行)

    System.Web.UI.ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "testKey", &q ...

  8. 传统解析xml的方式

    1. 介绍 1)DOM(JAXP Crimson解析器)          DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允 ...

  9. MongoDB安装、配置和基本使用

    一.搭建MongoDB的yum源 如果安装epel扩展源,可以安装MongoDB2.4版本 如要安装3.0版本,需要自己配置yum源,官方提供的源只支持64位系统 # vim /etc/yum.rep ...

  10. php文件复制

    <?php $dirname="shangchuan"; copydir($dirname."/uploads", $dirname."/hel ...