创建你的第一个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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
文字幻灯片
2006/06/26 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
js实现常用排序算法
2016/08/09 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
react 创建单例组件的方法
2018/04/26 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Django视图、传参和forms验证操作
2020/07/15 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
日期和时间问题
2015/01/04 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
八一演出活动方案
2014/02/03 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python