AngularJS~大话开篇

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。

前端一些术语

类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery,YUI,Protype等

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

AngularJS的一些技术特点

  1. 使用双大括号{{}}语法进行数据绑定;
  2. 使用DOM控制结构来实现迭代或者隐藏DOM片段;
  3. 支持表单和表单的验证;
  4. 能将逻辑代码关联到相关的DOM元素上;
  5. 能将HTML分组成可重用的组件
  6. 双向绑定(html影响代码,代码也影响html)
  7. 路由功能(单页面实现类似多URL的功能)

MVVM的实现

数据模型(data-model)关联到视图(UI)上,让前台开发人员可以很方便的去建立完整的页面,数据可以使用测试数据,最后可以将获取数据的部分抽象成一个个的API接口即可,而不需要真正等待后台人员将程序开发完,前台人员就可以对已经完成的功能进行测试了。

代表性的实例

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{‘World‘}}!
    </body>
</html>

使用{{}}乱起来的代码就是angularJS的代码,使用引号括起来表示它是个字符串,下面看一下在网站上经常看到的代码,如果你登陆了就显示hellow yourname,否则就显示

hello world,这是个很经典的例子

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || ‘World‘}}!
    </body>
</html>

几个重要的angularJS的指令

ng-app:代码的作用域

ng-controller:控制器作用域

ng-repeat:集合遍历

ng-model:双向绑定

ng-click:单击事件绑定

ng-if:条件绑定

下一讲,我们将开始测试具体的实例……

时间: 2024-10-13 14:42:24

AngularJS~大话开篇的相关文章

[转]MVVM架构~mvc,mvp,mvvm大话开篇

MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller. 在MVC里,View是可以直接访问

我心中的核心组件(可插拔的AOP)~大话开篇及目录

我心中的核心组件(可插拔的AOP)~大话开篇及目录 http://www.cnblogs.com/lori/p/3247905.html 回到占占推荐博客索引 核心组件 我心中的核心组件,核心组件就是我认为在项目中比较常用的功能,如日志,异常处理,消息,邮件,队列服务,调度,缓存,持久化,分布式文件存储,NoSQL存储,IoC容器,方法拦截等等. 对于以上内容可以说即是一个大餐,又是一个挑战,就让我带着大家去迎接这份挑战吧,呵呵! 可插拔的AOP AOP即面向切面的编程,是指将一个公用的与领域无

面对大数据,我们应该干的事~大话开篇

当网站数据达到一定量级之后,各种问题都会冒泡出现,这是不可避免的,如果面对“大数据”,我们没有提前做出准备,那只能像双11的淘宝,春运的12306一样,悲催收场,当然人家已经很垄断了,可这对于声音也不是一件好事,这种事是一定要解决的,所以,我觉得,很有必要去总结一下这个系列,即<面对大数据,我们应该干的事>,作者:仓储大叔. 面对大数据,我们应该干的事~目录 第一回 大数据... 2 第二回 数据库负载均衡,主从同步... 2 第三回 数据库读写分离,主从同步... 3 第四回 数据库拆分..

缓存篇(Cache)~大话开篇

闲话杂淡 想写这篇文章很久了,但总是感觉内功还不太够,总觉得,要写这种编程领域里的心法(内功)的文章,需要有足够的实践,需要对具体领域非常了解,才能写出来.如今,感觉自己有写这种文章的能力了,所以,快马加鞭,把这个内功写出来,分享给大家,分享我的Fans! 缓存:缓存的领域很广泛,实现方法也很多,你可以使用文件,内存来实现缓存,而缓存的方法也有很多,对于一个网页来说,你可以缓存它的页面内容(HTML),或者缓存它的数据集(DataSet),这两种方式适用于不同的场合,对于需要主动触发的缓存,它可

[转]MVP+WCF+三层结构搭建项目框架

最近,我一直在重构之前做的一个项目,在这个过程中感慨万千.原先的项目是一个运用了WCF的C/S系统,在客户端运用了MVC模式,但MVC的View.Model耦合以及WCF端分布式欠佳等问题让我有了重构的想法,经过了一段时间的改造,逐渐形成了MVP+三层结构+WCF的面向服务的程序架构.在这里我把我的想法写成了一个例子,供大家参考. 在正式开始讲解之前,我必须得感谢Artech.代震军等诸多大虾,他们的文章给了我很大的启发. 我写的这个例子是关于博客管理的,逻辑很简单,就是用户发表文章.发表评论,

大熊君大话NodeJS之开篇------Why NodeJS(将Javascript进行到底)

一,开篇分析 大家好啊,大熊君又来啦(*^__^*) 嘻嘻……,之前我写过一系列关于JS(OOP与设计模式)方面的文章,反响还好,其实这也是对我本人最大的鼓励,于是我决定我要将JavaScript进行到底 准备写一个NodeJS方面的系列文章,由浅入深,循序渐进,秉承的理念是重思想,多实践,勤能补拙,贵在坚持. 我们先来看看NodeJS官网上的介绍: 其特点为: 1,它是一个Javascript运行环境 2,依赖于Chrome V8引擎进行代码解释 3,事件驱动 4, 非阻塞I/O 5, 轻量.

大话JS面向对象之开篇万物皆对象------(ATM取款机引发的深思)

一,总体概要 OO(面向对象)概念的提出是软件开发工程发展的一次革命,多年来我们借助它使得很多大型应用程序得以顺利实现.如果您还没有掌握并使用OO进行程序设计和开发,那么您无疑还停留在软件开发的石器时代.大多数编程语言,尤其是近年问世的一些语言,都很好的支持了面向对象,您可能对此了如执掌,但是一些语言在OO方面却无法与其它高级语言相比,在这些语言上进行面向对象程序设计和开发会有些困难,例如本文要讨论的JavaScript.JavaScript是一门古老的语言,但是随着近期Web2.0 技术的热捧

用AngularJS开发下一代Web应用 系列入门基础教程

开篇介绍 AngularJS是什么东西?我觉得不用再描述了.可自行去充电一下.按照惯例,让我们先看看一个Hello World的开门简介吧. <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name

《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and AngularJS Web Development>,总的来说是一本讲述如何用Javascript进行B/S架构全栈开发的书. 该书主要讲解4种技术(框架),分为6个部分29个章节.4种技术即Node.js.MongoDB.Express.AngularJS,业内称为MEAN:6个部分我个人理解为: 基础(引言).