创建你的第一个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 相关文章推荐
javascript 图片裁剪技巧解读
Nov 15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
Node.js+Express+Mysql 实现增删改查
Apr 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
js 事件小结 表格区别
2007/08/13 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
javascript的push使用指南
2014/12/05 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript常用的方法分享
2015/07/01 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Django视图和URL配置详解
2018/01/31 Python
Python绘制热力图示例
2019/09/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
pytorch 常用线性函数详解
2020/01/15 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
学前教育学生自荐信范文
2013/12/31 职场文书
总经理司机职责
2014/02/02 职场文书
简单租房协议书
2014/10/21 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫