创建你的第一个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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
JQuery触发事件例如click
Sep 11 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
详解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 session 存储方式的详细介绍
2013/06/25 PHP
图片完美缩放
2006/09/07 Javascript
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
React Native验证码倒计时工具类分享
2017/10/24 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python回调函数用法实例分析
2015/05/09 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
浅谈Python __init__.py的作用
2020/10/28 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
女方离婚起诉书
2015/05/18 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
微信小程序实现录音Record功能
2021/05/09 Javascript
教你怎么用Python操作MySql数据库
2021/05/31 Python