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 fullscreen全屏实现代码
Apr 09 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
浅析node.js的模块加载机制
May 25 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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对数组内元素进行随机调换的方法
2015/05/12 PHP
php7性能提升的原因详解
2019/10/13 PHP
Javascript - HTML的request类
2006/07/15 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
python Tkinter模块使用方法详解
2022/04/07 Python