DDR爱好者之家

AngularJS入门示例之Hello World详解
站长资源 2024/11/28 佚名
28 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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="/UploadFiles/2021-04-02/angular1.2.25.js">


用浏览器打开这个网页，在文本框进行输入，发现界面会自动实时显示。如果用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="/UploadFiles/2021-04-02/angular1.2.25.js">


这次我们把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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》


希望本文所述对大家AngularJS程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米