AngularJS学习笔记一:简单入门
阿里云网站的前端是AngularJS实现的。
先下载AngularJS的开发工具包,我下载的angular-1.4.0。
在合适位置引入js文件:
<script src="angular-1.4.0/angular.min.js"></script>
1. AngularJS 入门指令:
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。
案例如下:
<!DOCTYPE html>
<html>
<body> <div ng-app=""> <p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="name" ng-init="name='json'"></p>
<p ng-bind="name"></p> </div> <script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
2. AngularJS 表达式:
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
案例入下:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="quantity=1;cost=5">
<p>总价是:{{quantity*cost}}</p></div> <script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="quantity=1;cost=5">
总价是:<p ng-bind="quantity*cost"></p>
</div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
3. AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
4.AngularJS 对象
AngularJS 对象就像 JavaScript 对象:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
5.AngularJS 数组
AngularJS 数组就像 JavaScript 数组:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
使用 ng-bind进行相同的实现:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>
<script src="angular-1.4.0/angular.min.js"></script> </body>
</html>
AngularJS学习笔记一:简单入门的更多相关文章
- SpringMVC学习笔记之---简单入门
SpringMVC简单入门 (一)什么是MVC设计模式 (1)model:模型数据,业务逻辑 (3)view:呈现模型,与用户进行交互 (3)controller:负责接收并处理请求,响应客户端 (二 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- Hadoop学习笔记(1) ——菜鸟入门
Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
- AngularJs学习笔记--Creating Services
原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
随机推荐
- 输入的全角字符转换成半角字符--css、js、ASP.NET
我们经常需要用户在表单中输入数字,用户不小心使用了全角状态输入数字,但是在程序中全角的数字是不能直接转换为数字的.这种全角数字的错误处理起来就有些麻烦了.对一些没有经验用户来说明明已经输入数字了,怎么 ...
- HDU 4857 逃生 (优先队列+反向拓扑)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4857 解题报告:有n个点,有m个条件限制,限制是像这样的,输入a b,表示a必须排在b的前面,如果不 ...
- chm文件打开空白无内容的解决办法
今天下载了个chm文件,但是打开空白,也没显示什么内容,经过一番研究之后终于可以正常显示了,下面把解决办法分享出来供大家参考下,谢谢. 工具/原料 windows7系统 chm文件 方法/步骤 ...
- Linux prerouting和postrouting的区别
我大概清楚一点就是从内网出去的时候用POSTROUTING进来的时候用PREROUTING,可是做透明代理的时候确是用PREROUTING.这是为什么呢? 回复: sunnygg pre还是post是 ...
- GIT的标准文档 使用和服务介绍
http://www.kancloud.cn/kancloud/how-to-use-github/42192 1. 探索GitHub 熟悉Git的人几乎都知道并喜欢GitHub,反过来GitHub也 ...
- 通过关闭UseDNS和GSSAPIAuthentication选项加速SSH登录
引自:http://www.cnblogs.com/wjoyxt/p/3790537.html More:http://blogread.cn/it/article/4719 通常情况下我们在连接 O ...
- Java for LeetCode 139 Word Break
Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...
- Java for LeetCode 062 Unique Paths
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- Eclipse中android工程C++文件中出现的莫名其妙的错误
大多数是std库相关的问题,例如 vector<int> v; v.push_back(23);//这句语法是没有错误的,但是每次执行Run As的时候就会报错 尝试1:在工程名右键-Cl ...
- 失恋28天-缝补礼物(codevs 2503)
2503 失恋28天-缝补礼物 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 话说上回他给女孩送 ...