创建你的第一个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 form 验证函数 弹出对话框形式
Jun 23 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
JS实现li标签的删除
Apr 12 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 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 中文处理技巧
2010/04/25 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
jquery中动态效果小结
2010/12/16 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
js实现转动骰子模型
2019/10/24 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Python实现比较两个列表(list)范围
2015/06/12 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python常见数据类型转换操作示例
2019/05/08 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
入党自我鉴定范文
2013/10/04 职场文书
物流专员岗位职责
2014/02/17 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
老公保证书怎么写
2015/02/26 职场文书
图书借阅制度范本
2015/08/06 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers