创建你的第一个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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
js实现简单的打印表格
2020/01/15 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python不带重复的全排列代码
2013/08/13 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
简述Python2与Python3的不同点
2018/01/21 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
工作检讨书怎么写
2014/10/10 职场文书
工作失职检讨书500字
2014/10/17 职场文书
生日寿星公答谢词
2015/09/29 职场文书
庭外和解协议书
2016/03/23 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL