AngularJS入门示例之Hello World详解


Posted in Javascript onJanuary 04, 2017

本文实例讲述了AngularJS入门示例Hello World。分享给大家供大家参考,具体如下:

以前项目都是使用jQuery和原始的JavaScript,最近参加一个项目需要用到AngularJS、RequireJS等比较潮的框架。这里记录自己的学习过程,虽然冠以原创之名,其实都是参考网上的一些资料,加上自己的一些实践和理解。再没有熟悉AngularJS之前,估计也不出什么高质量的文章,只能算是学习笔记和备忘录。练习使用的版本是1.2.25。

示例代码如下:

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
  </body>
</html>

用浏览器打开这个网页,在文本框进行输入,发现界面会自动实时显示。如果用javascript或jquery,完成这么一个小功能,我们组要注册监听事件,获取text控件的值,然后将值塞入<h1>中显示。而使用AngularJS,我们需要做的事情是:添加ng-app,添加ng-model,使用{{yourName}}显示。很显然,使用AngularJS要简单的多,而且代码更紧凑。下面我们简单看下这3个东西的意思:

1、ng-app:它可以放在任何dom节点上,代表该结点以及它的所有子节点都在AngularJS的管理范围之内;如果去掉这个标记,发现AngularJS框架不会起效果。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <div ng-app>
      <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
    </div>
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

这次我们把ng-app放到了<div>上,可以看到div内部的<h1>能够实时显示输入的数据,而外部的<h1>没有效果。可以看到,一个html页面可以全部交予AngularJS来管理,也可以只让AngularJS管理页面的一部分,我们可以按需添加ng-app所在的dom节点。

2、ng-model:这个是AngularJS数据的双向绑定特性。简单点理解:告诉AngularJS这是个数据模型,你帮我存到内存中。界面上修改数据,内存中数据也会自动修改;修改内存中的变量值,界面显示也会自动更改。这个特性显然很方便,能够保持数据的一致性,避免我们自己加代码来完成这个功能。

3、{{yourName}}:这个是框架提供的表达式语法,能够显示内存中数据模型的值。这个跟struts2的<s:property>、<s:text>类似,就是用来显示数据的。这种只是AngularJS定义的语法格式,跟JSP页面中的EL表达式,struts2的OGNL很类似,就是一种数据的获取机制。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
vue3.0 上手体验
Sep 21 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
javascript 注释代码的几种方法总结
Jan 04 #Javascript
JS数组返回去重后数据的方法解析
Jan 03 #Javascript
js实现复选框的全选和取消全选效果
Jan 03 #Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 #Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 #Javascript
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python制作刷网页流量工具
2017/04/23 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
自我鉴定范文
2013/11/10 职场文书
大学校庆邀请函
2014/01/11 职场文书
中学生差生评语
2014/01/30 职场文书
中学生获奖感言
2014/02/04 职场文书
市政管理求职信范文
2014/05/07 职场文书
申报优秀教师材料
2014/12/16 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Hive日期格式转换方法总结
2022/06/25 数据库