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(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
ES6基础之默认参数值
Feb 21 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python实现图片九宫格分割
2021/03/07 Python
Django 反向生成url实例详解
2019/07/30 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
生物化工工艺专业应届生求职信
2013/10/08 职场文书
保安自我鉴定范文
2013/12/08 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
诚信承诺书
2015/01/19 职场文书
确保工程质量承诺书
2015/04/29 职场文书
体育教师教学随笔
2015/08/15 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技