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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
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
MySQL数据源表结构图示
2008/06/05 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JavaScript运算符小结
2015/06/03 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python接口自动化框架实战
2020/12/23 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
毕业自我鉴定总结
2014/03/24 职场文书
文明好少年事迹材料
2014/08/19 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
学生会部长竞选稿
2015/11/19 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS