创建你的第一个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中callee与caller的用法和应用场景
Dec 08 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
Python素数检测实例分析
2015/06/15 Python
Python实例一个类背后发生了什么
2016/02/09 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
采购主管的岗位职责
2013/12/17 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
优秀实习生感言
2014/03/01 职场文书
学生保证书范文
2014/04/28 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
离婚纠纷代理词
2015/05/23 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MySQL池化框架学习接池自定义
2022/07/23 MySQL