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权威指南 学习笔记之null和undefined
Sep 25 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python实现全排列的打印
2018/08/18 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
Java语言程序设计测试题选择题部分
2014/04/03 面试题
运动会广播稿400字
2014/01/25 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
客户答谢会致辞
2015/01/20 职场文书
小学庆六一主持词
2015/06/30 职场文书
车辆挂靠协议书
2016/03/23 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL