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 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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中注册器模式类用法实例分析
2015/11/03 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue实现购物车加减
2020/05/30 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python lambda和Python def区别分析
2014/11/30 Python
Python操作MySQL简单实现方法
2015/01/26 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
师德自我剖析材料范文
2014/10/06 职场文书
计划生育诚信协议书
2014/11/02 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
终止合同协议书范本
2016/03/22 职场文书
创业计划书之寿司
2019/07/19 职场文书
R9700摩机记
2022/04/05 无线电