创建你的第一个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 each()小议
Mar 18 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
Node在Controller层进行数据校验的过程详解
Aug 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变量作用域以及地址引用问题
2013/12/27 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python unittest模块用法实例分析
2018/05/25 Python
python实现屏保计时器的示例代码
2018/08/08 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
汉语专业应届生求职信
2013/10/01 职场文书
质检部岗位职责
2013/11/11 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
终止劳动合同通知书
2015/04/16 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
管辖权异议上诉状
2015/05/23 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android