AngularJS入门教程之Hello World!


Posted in Javascript onDecember 06, 2014

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:

1.使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。
2.将下面的源代码复制到您的HTML文件。
3.在web浏览器中打开这个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>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码,看看到底怎么回事。 当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用:

<html ng-app>

这行载入AngularJS脚本:

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

(想了解AngularJS处理整个HTML页的细节,请看Bootstrap。)

最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

Hello {{'World'}}!

注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World'。

下面,让我们看一个更有趣的例子:使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定(bi-directional data binding):

1.编辑前面创建的helloworld.html文档。
2.将下面的源代码复制到您的HTML文件。
3.刷新浏览器窗口。

源代码:

<!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>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项:

1.文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
2.双大括号标记将yourname模型变量添加到问候语文本。
3.你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。

AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

此外,AngularJS还提供了一些非常有用的服务特性:

1.底层服务包括依赖注入,XHR、缓存、URL路由和浏览器抽象服务。
2.您还可以扩展和添加自己特定的应用服务。
3.这些服务可以让您非常方便的编写WEB应用。

Javascript 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
JS判定是否原生方法
Jul 22 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 #Javascript
angularjs中的e2e测试实例
Dec 06 #Javascript
angularjs中的单元测试实例
Dec 06 #Javascript
angularjs指令中的compile与link函数详解
Dec 06 #Javascript
You might like
PHP网站备份程序代码分享
2011/06/10 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python speech模块的使用方法
2020/09/09 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
J2EE模式面试题
2016/10/11 面试题
市场营销个人求职信范文
2014/02/02 职场文书
家长对孩子的评语
2014/04/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
幼儿园辞职信
2015/05/13 职场文书
六一文艺汇演主持词
2015/06/30 职场文书