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 相关文章推荐
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js获取form的方法
2015/05/06 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
深入理解python try异常处理机制
2016/06/01 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python内建模块struct实例详解
2018/02/02 Python
python单例设计模式实现解析
2020/01/07 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python matlab库简单用法讲解
2020/12/31 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
化学教师自荐信范文
2013/12/28 职场文书
班级入场式解说词
2014/02/01 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
安全标准化实施方案
2014/02/20 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年个人思想总结
2015/03/09 职场文书
追悼会家属答谢词
2015/09/29 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL