创建你的第一个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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
js实现随机点名器精简版
Jun 29 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
js module大战
2019/04/19 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python避免死锁方法实例分析
2015/06/04 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python实现飞机大战游戏
2020/10/26 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
公务员培训自我鉴定
2014/02/01 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
终止合同协议书范本
2016/03/22 职场文书
AJAX学习笔记
2021/05/18 Javascript
Python代码风格与编程习惯重要吗?
2021/06/03 Python