一、摘要:

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. native

    源博客:http://blog.csdn.net/jiakw_1981/article/details/3073613 一. 什么是Native Method   简单地讲,一个Native Meth ...

  2. 快速构建express项目

    构建node项目 github地址 https://github.com/haoyongliang/quickly-create-node-project.git 创建最基本的node项目 1.全局安 ...

  3. Linux下使用fdisk发现磁盘空间和使用mount挂载文件系统

    若在安装Linux系统时没有想好怎么使用服务器,开始时只分了一部分给根目录.后面需要再使用时,可以通过几下一步进行分区和挂载文件系统. 看磁柱数使用情况 fdisk -l Disk /dev/sda: ...

  4. UITextView 点return 隐藏键盘

    iOS开发中,发现UITextView没有想UITextField中textFieldShouldReturn:这样的方法,那么要实现UITextView return键隐藏键盘,可以通过判断输入的字 ...

  5. CentOS云服务器数据盘分区和格式化

    1. 查看数据盘信息 登录CentOS云服务器后,可以使用“fdisk -l”命令查看数据盘相关信息. 使用“df –h”命令,无法看到未分区和格式化的数据盘,只能看到已挂载的. [root@VM_7 ...

  6. Mysql数据库搭建-Windows

    首先先下载一下文件包. 下面这个文件包里面包含了已配置的MySQL5.5和连接器. https://www.dropbox.com/s/iu4ifv0m2232ktn/Win_Mysql5_ODBC. ...

  7. RelativeLayout用到的一些重要的属性

    第一类:属性值为true或false android:layout_centerHrizontal                                           水平居中    ...

  8. tools/build.c

    /* *  linux/tools/build.c * *  Copyright (C) 1991, 1992  Linus Torvalds */ /* * This file builds a d ...

  9. 转:如何理解c和c ++的复杂类型声明

    本文作者girlrong是网易广州社区的C语言版版主,这篇文章被选在精华区.很是不错,不敢独享!据说她乐于助人,虚心诚恳,颇受网友欢迎.只可惜现在已退隐江湖了.在最近学习C语言过程中,了解些前辈大牛的 ...

  10. JavaScript学习记录总结(九)——移动添加效果

    <!DOCTYPE html><html><head><title>moveOption.html</title> <meta nam ...