创建你的第一个AngularJS应用的方法


Posted in Javascript onJune 16, 2015

 按以下步骤来创建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应用程序的结束。
Javascript 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JS数组的常用10种方法详解
May 08 Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python zip()函数的使用示例
2020/09/23 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
网页美工求职信范文
2014/04/17 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
预备党员转正材料
2014/12/19 职场文书
母亲节寄语大全
2015/02/27 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
OpenCV-Python实现油画效果的实例
2021/06/08 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers