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 相关文章推荐
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
利用vue实现模态框组件
Dec 19 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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
广播爱好者需要了解的天线知识
2021/03/01 无线电
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
学雷锋宣传标语
2014/06/25 职场文书
走进毛泽东观后感
2015/06/04 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL