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 相关文章推荐
jquery自定义函数的多种方法
Jan 09 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
js数组去重的方法总结
Jan 18 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
详解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
抓取YAHOO股票报价的类
2009/05/15 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js获取div高度的代码
2008/08/09 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
初学Python函数的笔记整理
2015/04/07 Python
python定向爬取淘宝商品价格
2018/02/27 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python获取array中指定元素的示例
2019/11/26 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
简历自荐信
2013/12/02 职场文书
大学生实习思想汇报
2014/01/12 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
地雷战观后感
2015/06/09 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python