创建你的第一个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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
jquery遍历json对象集合详解
May 18 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
为什么node.js不适合大型项目
Apr 28 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输入流php://input介绍
2012/09/18 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
打造完美自荐信
2014/01/24 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
坎儿井导游词
2015/02/09 职场文书
化工厂员工工作总结
2015/10/15 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
话题作文之自信作文
2019/11/15 职场文书