AngularJS教程之简单应用程序示例


Posted in Javascript onAugust 16, 2016

按以下步骤来创建AngularJS应用

 第1步:加载框架

作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

第2步:使用ng-app指令定义AngularJS应用

<div ng-app="">
...
</div>

第3步:用 ng-model指令定义的模式名称

<p>Enter your Name: <input type="text" ng-model="name"></p>

第4步:用ng-bind指令将上述模型中的值绑定定义

<p>Hello <span ng-bind="name"></span>!</p>

按以下步骤来运行AngularJS应用

使用上面提到的三个步骤在HTML页中。

testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。请输入姓名并看到的结果。

AngularJS教程之简单应用程序示例

如何让AngularJS与HTML集成

ng-app指令指示AngularJS应用的开始。

ng-model指令创建一个名为“name”的模型变量在HTML页面中,并有ng-app指令在div内使用。

ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。

结束</ div>标记表示AngularJS应用程序的结束。

以上就是AngularJS简单应用程序,后续继续整理相关资料,谢谢大家对本站的支持。

Javascript 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
jquery实现图片轮播器
May 23 jQuery
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
超实用的javascript时间处理总结
Aug 16 #Javascript
AngularJS教程之环境设置
Aug 16 #Javascript
JavaScript中获取时间的函数集
Aug 16 #Javascript
利用Javascript实现BMI计算器
Aug 16 #Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 #Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 #Javascript
You might like
请php正则走开
2008/03/15 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python对象体系深入分析
2014/10/28 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
人力资源行政经理自我评价
2013/10/23 职场文书
银行求职推荐信范文
2013/11/30 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
办理信用卡工作证明
2014/01/11 职场文书
岗位职责说明书
2014/05/07 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
内勤岗位职责
2015/02/10 职场文书
导游词之江南周庄
2019/12/06 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python