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 10进制和62进制的相互转换
Jul 31 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
js实现时分秒倒计时
Dec 03 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
关于PHP实现异步操作的研究
2013/02/03 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python3 操作符重载方法示例
2017/11/23 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python celery原理及运行流程解析
2020/06/13 Python
浅析Python 多行匹配模式
2020/07/24 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
学生喝酒检讨书
2014/02/06 职场文书
《开国大典》教学反思
2014/04/19 职场文书
学生实习证明范文
2014/09/28 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP