AngularJS教程(一) 初识AngularJS

AngularJS是一款非常优秀和流行的前端JS框架,它诞生于2009年,由Misko Hevery 等人创建,后为Google所收购,现在已经被用于Google的多款产品当中。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。AngularJS的出现则让构建WEB应用变成了一件非常容易的事。

在学习这项技术之前,让我们先弄明白它适合做什么,不适合做什么。AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。

如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是AngularJS的用武之地了。

一.入门
我们可以通过创建一个简答的应用程序“Hello World!”来进行AngularJS的入门:

1创建一个HTML文件。
2输以下源代码。
3在浏览器中打开这个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>

运行以上代码可以看到效果。

AngularJS教程(一) 初识AngularJS_第1张图片

这里标记ng-app告诉AngularJS处理整个HTML页并引导应用,而
载入AngularJS脚本是用:

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

2双向数据绑定

将上面代码的body部分用下列代码替换:

<body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body>

浏览器中运行以上代码,效果如下:

AngularJS教程(一) 初识AngularJS_第2张图片

你可能感兴趣的:(AngularJS,Web应用)