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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js实现微信分享代码
Oct 11 Javascript
KnockoutJs快速入门教程
May 16 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 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扩展ZF――Validate扩展
2008/01/10 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JS实现随机点名器
2020/04/12 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python实现弹窗祝福效果
2019/04/07 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
如何利用python 读取配置文件
2021/01/06 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
客户表扬信范文
2014/01/10 职场文书
给儿子的表扬信
2014/01/15 职场文书
团代会主持词
2014/04/02 职场文书
英语教师自荐信
2014/05/26 职场文书
某某同志考察材料
2014/05/28 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
文明社区申报材料
2014/08/21 职场文书
综合素质评价自我评价
2015/03/06 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书