AngularJS教程 AngularJS从0到1——HelloWorld
来源:互联网 发布:前端wap 淘宝页面模板 编辑:程序博客网 时间:2024/06/06 07:11
一、下载AngularJS库
AngularJS现在已更新到2.x版本,但是现在开发者用的较多的是1.x版本,在此以1.3版本为例。
angularjs官方网站:https://angularjs.org
当然啦,国外网站嘛,打开速度可能会有点慢,你也可以选择到我的csdn资源里免费下载。
csdn资源下载地址:http://download.csdn.net/detail/jasper_success/9823119
二、HelloWorld
要求:在输入框中输入文本,< p >标签的内容随之改变。
<input type="text" ng-model="username"/><p ng-bind="username"></p><p>{{username}}</p>
这就是一个最简单的angularjs demo,由此你也可以体会到angularjs数据绑定的强大之处。
注意,这里我使用了两个p标签,两个p标签的文本信息都同时改变。这是因为在angularjs中,ng-bind指令和{{}}的作用是相同的。使用的时候注意ng-bind是用在标签内部的,而{{}}是用在标签外部的。
ng-bind和{{}}的区别在于,如果页面数据尚未加载完,那么{{}}中的代码会显示到页面上,而ng-bind不会。
三、指令整理
- ng-model 数据模型
- ng-bind 数据绑定
四、练习
要求:页面中有两个输入框和一个span标签,输入框中输入数字后,span标签中自动计算二者相加之和。
代码展示:
<input type="number" ng-model="num1" /><input type="number" ng-model="num2" /><span ng-bind="num1+num2"></span>
五、美图欣赏
0 0
- AngularJS教程 AngularJS从0到1——HelloWorld
- AngularJS教程 AngularJS从0到1——初识AngularJS
- AngularJS教程 AngularJS从0到1——AngularJS模块
- AngularJS教程 AngularJS从0到1——AngularJS控制器
- AngularJS教程 AngularJS从0到1——AngularJS数组遍历
- AngularJS教程 AngularJS从0到1——AngularJS服务
- AngularJS-1-helloworld
- 从Knockout到AngularJS
- AngularJs-HelloWorld
- Angular 从0到1 (一) 初识AngularJS
- angularjs 教程1
- AngularJS——1
- 1、Angularjs — 简介
- 理解AngularJS——从WPF说起
- JavaScript强化教程——AngularJS 指令
- JavaScript强化教程——AngularJS
- JavaScript强化教程——AngularJS 表达式
- JavaScript强化教程——AngularJS 指令
- 二维多项式求值
- DPC的使用方法
- Leetcode Week9
- C# 枚举(Enum)
- 写给自己
- AngularJS教程 AngularJS从0到1——HelloWorld
- C# 类(Class)
- 深度优先搜索算法—DFS
- Android商品展示小案例
- JAVA代码优化常用方法
- java性能优化注意的几个细节规则
- Lattice Point or Not
- JAVA设计模式之单例模式
- Redis源码剖析和注释(十)--- 列表键命令实现(t_list)