创建你的第一个AngularJS应用的方法


Posted in Javascript onJune 16, 2015

 按以下步骤来创建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应用程序的结束。
Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
JS实现音乐导航特效
Jan 06 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
isset和empty的区别
2007/01/15 PHP
php学习之变量的使用
2011/05/29 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
制作特殊字的脚本
2006/06/26 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python try except finally资源回收的实现
2021/01/25 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
股权收购意向书
2014/04/01 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
python基础之爬虫入门
2021/05/10 Python