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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
bootstrap table实例详解
Jan 06 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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中$_SERVER使用说明
2015/07/05 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
php post换行的方法
2020/02/03 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
UDP协议功能
2013/01/06 面试题
策划主管的工作职责
2013/11/24 职场文书
个人债务授权委托书
2014/10/17 职场文书
党员违纪检讨书
2015/05/05 职场文书
用Python提取PDF表格的方法
2021/04/11 Python