创建你的第一个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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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
smarty简单入门实例
2014/11/28 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP chr()函数讲解
2019/02/11 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python continue语句用法实例
2014/03/11 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python实现文件的备份流程详解
2019/06/18 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
拓展培训心得体会
2014/01/04 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python