AngularJS入门(一)
2016-03-15 17:22
579 查看
简介
AngularJS是一款优秀的前端JS框架,是为了克服HTML在构建应用上的不足而设计的,AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等。
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定; 使用DOM控制结构来实现迭代或者隐藏DOM片段; 支持表单和表单的验证; 能将逻辑代码关联到相关的DOM元素上; 能将HTML分组成可重用的组件。
AngularJS主要考虑的是构建CRUD(增加Create、查询Retrieve、更新Update、删除Delete)应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
AngularJS的一些出众之处如下:
1. 构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
2. 测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。
3. 具有目录布局和测试脚本的种子应用作为起点。
AngularJS表达式
AngularJS 表达式写在双大括号内:{{ expression }}。AngularJS 表达式把数据绑定到 HTML,这与ng-bind指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式很像JavaScript 表达式:它们可以包含文字、运算符和变量。
如:{{ 5 + 5 }} 或 {{ firstName + ” “+ lastName }}
第一个AngularJS程序
创建一个helloworld.html文件:<!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>
保存在浏览器中打开,会显示Hello World!
当加载该页时,标记
ng-app告诉AngularJS处理整个HTML页并引导应用。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>这行载入AngularJS脚本。
标签中的正文是应用的模板,在UI中显示我们的问候语
Hello {{'World'}}!,注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World’。
相关文章推荐
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
- 安装Yeoman + Bower + Grunt 创建angularjs 项目结构(新手笔记一)
- AngularJS UI 扩展 AngularUI
- asp.net mvc+angularjs+web api单页应用
- AngularJS入门
- AngularJS 中的Promise --- $q服务详解
- [POJ] 1948 Triangular Pastures (DP)
- js框架 AngularJS+Bootstrap
- AngularJS vs. jQuery,看看谁更胜一筹
- AngularJS in Action读书笔记4(实战篇)——创建Statistic模块
- 在Asp.Net MVC中使用AngularJS的路由
- Angular之双向数据绑定基础
- 使用AngularJS实现一个简单页面
- angularjs 学习笔记
- AngularJS学习笔记(1)
- angularjs和jQuery之checkbox和radio
- Angularjs 实现 $(document).ready()的两种方法
- AngularJS的学习--$on、$emit和$broadcast的使用
- Cordova + Ionic + AngularJS
- AngularJS clone directive 指令复制