AngularJS快速入门指南02:介绍
AngularJS是一个JavaScript框架。它可以通过<script>标记被添加到HTML页面中。
AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中。
AngularJS是一个JavaScript框架
AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库。
AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中:
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js"></script>
AngularJS扩展了HTML
AngularJS通过一系列ng-directives指令对HTML进行扩展。
ng-app指令定义了AngularJS application。
ng-model指令将HTML控件的值与数据模型绑定到一起。
ng-bind指令将模型数据绑定到HTML视图。
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body> <div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div> </body>
示例说明:
当页面加载完成时AngularJS自动开始执行。
ng-app指令告诉AngularJS它所在的<div>元素是AngularJS Application的根元素。
ng-model指令将input标签的值绑定给变量name。
ng-bind指令将变量name的值绑定给<p>元素的innerHTML属性。
AngularJS指令
就如你所看到的,AngularJS指令就是一组以ng开头的HTML属性。
通过ng-init指令可以将AngularJS Application的变量进行初始化。
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
等效的代码:
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
你可以使用前缀data-ng-来代替ng-,这样可以确保页面上的HTML是有效的(valid)。 |
在后面的章节中你将会学习到更多的AngularJS指令。
AngularJS表达式
AngularJS表达式写在双大括号中:{{ 表达式语句 }}。
AngularJS会准确地将表达式“输出”为计算的结果,例如:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div> </body>
</html>
AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div> </body>
</html>
在后面的章节中你将会学习到更多有关AngularJS表达式的内容。
AngularJS Application
AngularJS模块定义了AngularJS Applications。
AngularJS控制器则控制着AngularJS Applications的行为。
ng-app指令用于指定application,而ng-controller指令则用来指定控制器。
<div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}} </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS模块定义applications:
var app = angular.module('myApp', []);
AngularJS控制器控制AngularJS Applications的行为:
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
在后面的章节中你将会学习到更多有关模块和控制器的内容。
AngularJS快速入门指南02:介绍的更多相关文章
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17:Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16:Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南15:API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14:数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
随机推荐
- Erlang 从入门到精通(一) 下载安装
我的电脑配置: 系统:win8.1 x64 内存:16G 在官网下载http://www.erlang.org/
- a==null和a.equals("null")的区别
equals 是值比较,==是比较内存 A==B,比较句柄,就是比较变量A,B的地址存放的东西,比如int A=0;String B="bbbb";那么变量A的地址方的就是0,B的 ...
- CSS3--选择器
子元素选择器: div>p{background:yellow:} 相邻的后兄弟选择器(必须相邻) h1+p{padding-top:20px:} 后兄弟选择器(同级的当前元素后面的元素) di ...
- Java核心知识点学习----多线程中的阻塞队列,ArrayBlockingQueue介绍
1.什么是阻塞队列? 所谓队列,遵循的是先进先出原则(FIFO),阻塞队列,即是数据共享时,A在写数据时,B想读同一数据,那么就将发生阻塞了. 看一下线程的四种状态,首先是新创建一个线程,然后,通过s ...
- Java学习笔记15--引用传递
范例一 class Demo{ public int temp = 30; } public class T { public static void main(String[] args) { // ...
- jetty 最后版本类库树, 基本上大多数应用都够了
d:\jetty-distribution-8.1.17.v20150415\lib\annotations\javax.annotation-1.1.0.v201108011116.jarjavax ...
- Daily Scrum 12.1
今日完成任务: 完成了对源代码结构的修改,删除冗余等:和其他小组讨论了关于整合的问题,向其他小组介绍自己小组使用的数据库等. 明日任务: 晏旭瑞 初步完成文档上传下载 孙思权 深入了解数据库中每个表, ...
- aix 6+ mount 光驱
AIX 挂载光驱的方法 系统环境: [root@Big A:/1]#oslevel -s6100-06-00-0000 [root@Big A:/]#crfs -v cdrfs -p ro -d '/ ...
- Browser设置搜索引擎
Browser设置搜索引擎,在com.android.browser.preferences.GeneralPreferencesFragment中加载R.xml.general_preference ...
- 数据库开发及ADO.NET
大部分数据库都需要数据库服务器才能运行. Catalog(分类)又叫做数据库DataBase Table(表)不同类型的东西放到不同的区域中,将这种区域叫做表. 列(Column)字段Field 主键 ...