AngularJS教程之简单应用程序示例


Posted in Javascript onAugust 16, 2016

按以下步骤来创建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应用程序的结束。

以上就是AngularJS简单应用程序,后续继续整理相关资料,谢谢大家对本站的支持。

Javascript 相关文章推荐
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
超实用的javascript时间处理总结
Aug 16 #Javascript
AngularJS教程之环境设置
Aug 16 #Javascript
JavaScript中获取时间的函数集
Aug 16 #Javascript
利用Javascript实现BMI计算器
Aug 16 #Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 #Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 #Javascript
You might like
PHP实现过滤各种HTML标签
2015/05/17 PHP
Symfony生成二维码的方法
2016/02/04 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
经验几则 推荐
2006/09/05 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
竞选部长演讲稿
2014/04/26 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
详解SQL报错盲注
2022/07/23 SQL Server