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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
PL-880隐藏功能
2021/03/01 无线电
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php实现mysql封装类示例
2014/05/07 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python中super的用法实例
2015/05/28 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python多线程正确用法实例解析
2020/05/30 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
2014年自我评价
2014/01/04 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
大学班级计划书
2014/04/29 职场文书
询价采购方案
2014/06/09 职场文书
个人求职自荐信范文
2014/06/20 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
监护人证明
2015/06/19 职场文书