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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php微信开发自定义菜单
2016/08/27 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python读写docx文件的方法
2018/05/08 Python
Python 处理图片像素点的实例
2019/01/08 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python数学形态学实例分析
2019/09/06 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
接口的多继承会带来哪些问题
2015/08/17 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
合同意向书范本
2014/07/30 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
爱国主义影片观后感
2015/06/18 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers
GPU服务器的多用户配置方法
2022/07/07 Servers