2.1:你的首先个AngularJS App

本章,带你体验一个大概的开发流程,将一个静态的利用模拟数据的利用,变成具有AngularJS特性的动态web应用。在6-8节,作者用显得什么创造一个还扑朔迷离,更实际的AngularJS应用。

1、准备项目

在项目路线下,新建todo.html,代码如下:

<!DOCTYPE html>
<html data-ng-app>
<head>
<title>TO DO List</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div class="page-header">
<h1>Adam's To Do List</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />

<button class="btn btn-default">Add</button>

</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>

欠静态页面就正常显示。到第六段时,作者会摆用之文书结构。

2、使用AngularJS

用户会就此该网页,查看要举行的事项的列表,检查事项是否成功,创建一个新的事项。

2.1、应用AngularJS到HTML文件

<html ng-app="todoApp">
<head>
<title>TO DO List</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
</script>
</head>

        AngularJS
apps,从一个或多只模块开始。模块是经调用angular.module方法创建的,如下面那样:

var todoApp = angular.module("todoApp", []);

       
作者以以第9暨第18段描述模块的特性。angular.module方法的参数,是如创建的模块的名字,和模块需要的外东西的数组。作者创建了一个称作todoApp的模块。遵循约定,模块的名以App结尾。因为无需AngularJS提供其他模块,所以传递空数组作为第二个参数。作者以以第18节,展示不同模块可用的特征。

       
作者通过ng-app属性,告诉AngularJS如何使模块。AngularJS通过吃HTML添加新的元素、属性、类以及special
comments,来扩张HTML,才能够工作。AngularJS库动态编译HTML,为了稳定与处理这些附加信,并创办一个利用。你可经JavaScript代码,客制化应用之表现,补充内建功能,定义你协调的叠加信到HTML上。

       
注意:AngularJS的编译器,不像您遇到的C#或Java项目的编译器那样,处理源代码,为了转移可以实行的运转时输出。精确地说,当浏览器曾加载内容,AngularJS库评估HTML元素,并使用专业DOM
API和JavaScript特性,来添加或一致处元素,设置事件处理器,等等。在AngularJS开发被,没有明了的变异步骤,只需要修改你的HTML和Javascript文件,并就此浏览器加载他们。

       
AngularJS附加到HTML上,最重点的哪怕是ng-app属性,它制定该html元素列表包含一个当被AngularJS编译和拍卖的模块。当以的JavaScript框架只有AngularJS时,习惯以ng-app属性应用至html元素。如果你如果用AngularJS和其它技术混合,如jQuery,你可以通过在文档上之一个素上用ng-app属性,来收缩AngularJS
app的境界。

2.2、给HTML应用AngularJS

受HTML文档添加一个非标准的性,看起非常意外,特别是如果你曾经勾勒了有web
apps,并从严遵循HTML标准。有一个代方式,使用data属性,给AngularJS添加data-前缀。

<html data-ng-app="todoApp">

作者会延续利用AngularJS约定,并以ng-app属性,和其它HTML增强性。他建议我们也这样做。如果您的开发工具不克处理不标准的HTML元素和总体性,你也可免这样做。

3、创建一个数据模型

AngularJS支持MVC模式。作者以在第3节讲MVC。简单来讲,遵循MVC模式,需要而将以分成三独相当的区域:应用中数据(model),对数码的操作逻辑(controllers),显示数据的逻辑(Views)。

<script>
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
</script>

提示:作者说,model也可以蕴涵create,load,store,modify数据对象所须的逻辑。在一个AngularJS应用被,该逻辑一般在服务器,被web
server访问。作者用在第3章节详细介绍。

唤醒:在任何AngularJS开发品种蒙,你只能定义MVC主要有的作用域。作者保证,在第6章可视一个特大型的事例。它发出好多初始化设置与要的配置。

4、创建一个Controller

Controller定义了业务逻辑,为view提供支持。定义一个controller的尽好法子,是解说啊类型的逻辑,是它不支持之,而什么是其支持的。

逻辑,是处理存储或取得模型的片段数据。逻辑,处理格式化了之数码,将它们看成VIEW的一样局部,显示为用户。Controller以model和view之间,并连他们。Controller相应用户交互,更新model中的多寡,提供view和view必须的数量。

笔者说,不用操心,本书了时,你拿学会MVC模式,和在AngularJS中行使他们。

经调用angular.module返回的模子对象的controller方法,创建一个controller。controller方法的参数,是新controller的名字,和外的功用。

todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">

controller的命名约定,是为Ctrl结尾。

若免会见连想叫views访问整个model,所以若望使controller,来家喻户晓地挑选部分数量,这称之为scope(范围)。

自身的controller函数的参数,调用了$scope,这就是说,$符号跟随者单词scope。在AngularJS
app中,以$开始的变量名,表示是AngularJS提供的内建特性。当你看到$符号,它一般对一个内建的服务,它是一个由包含的组建,为多只控制器提供特色。但$scope很特别,它用于曝露数据以及函数给view。作者将在第13回讲解scope,在18-25章讲解外建services。

对于本用而言,作者系它于view中行使成套model,所以他定义了一个属性,在$scope服务目标及,调用todo,并像下那样,指派完整的model:

 

$scope.todo = model;

作者也不得不指定controller负责的html文档的区域。因为凡一个简单的运,并且独自出一个controller,作者就是当body元素上利用ng-controller。

 

<body ng-controller="ToDoCtrl">

ng-controller属性的价,是要是设置的controller的讳。作者将于第13节深入controller的主题。

4、创建一个View

作者将在脚的代码中,演示如何使同样种注释类型,也称之为数据绑定。

 

<h1>
{{todo.user}}'s To Do List
{{todo.items.length}}
</h1>

<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</tbody>

5、插入Model View

AngularJS使用双花括号{{}},来代表一个数据绑定表达式。表达式的内容,

作为JavaScript,被求值,通过使用Controller,来限制数据和功能被分配给scope。

在本例中,作者只能访问它在定义controller时,使用在$scope对象创建的属性名,来访问指派给$scope对象的那部分数据。

这意味着,例如,如果作者想访问model.user属性,作者定义一个数据绑定表达式,

引用todo.user。这就是为什么,作者给$scope.todo属性指派model对象。

    AngularJS编译文档中的HTML,发现ng-controller属性,让ToDoCtrl函数设置用于创建view的范围。遇到的每个数据绑定表达式,AngularJS在$scope对象中查找指定的值,

并添加该值到HTML文档。例如,下面的例子:

 

{{todo.user}}'s To Do List

她会于处理,并翻译啊底的字符串:

Adam's To Do List

立刻就是是所谓的数额绑定或模型绑定,model中之价值,绑定到一个html元素的情及。这里出部分不比的章程来创造数量绑定,作者将当第10段解释。

6、求表达式的价

一个数目绑定表达式的内容,可以是其它可用之JavaScript声明,意味着你会尽操作,从model中创造新的数码。下面是显示to-do
items的个数:

<div class="page-header">
{{todo.user}}'s To Do List{{todo.items.length}}
</div>

提醒:在表达式中,应该仅仅实行简单的操作。不要使用数据绑定,来实行复杂逻辑或针对model的操作。这该是controller的办事。你见面时碰到特别麻烦讲逻辑归类于view或controller的场面。作者的建议是,不要担心她。以极抢之速开发,再后来得常重倒这些逻辑。如果实际不知道该怎么开,就把逻辑在controller中,它起60%底几乎统领是无可非议的。

7、使用指令

表达式中呢得使指令,这会报告AngularJS,你想使怎么处理内容。在本课中,作者用ng-repeat属性。

<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td><td>{{item.done}}</td>
</tr>

 

它会生出下的代码

<tr ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Buy Flowers</td>
<td class="ng-binding">false</td>
</tr>
<tr ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Get Shoes</td>
<td class="ng-binding">false</td>
</tr>
<tr ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Collect Tickets</td>
<td class="ng-binding">true</td>
</tr>
<tr ng-repeat="item in todo.items" class="ng-scope">
<td class="ng-binding">Call Joe</td>
<td class="ng-binding">false</td>
</tr>

ng-repeat指令,会是若无限常用之一声令下之一。

8、超越基本

8.1应用双向模型绑定

作者之前运用的绑定,都是只为绑定,从model中得到出值,用于在模板被散发这些因素。这是一个相当基本的材料,并且于web
app开发中,广泛利用的技能。例如,作者以动用jQeury时,经常以Handlebars模板包,它提供该档的绑定,对由数对象生成HTML内容十分有因此。

AngularJS也供双向绑定,用模子生成元素,当元素改变时,导致模型也相应的变更。

<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>

笔者添加了一个checkbox
input元素。重要的叠加信,是ng-model属性,它报告AngularJS,在input元素的值和对应数额对象的done属性之间,创建一个双向绑定。

        
当HTML第一坏编译,AngularJS会采用done属性的value,设置input元素的value。

       
AngularJS的绑定是动态的,双向的绑定。两只要素绑定到与一个,一个元素变了,另一个乎会更换。

       
双向绑定,可以利用为用户输入的素,生成使用HTML表单元素关联的来义的因素。作者会在第12段深度讲解。

8.2、创建并使用控制器行为

控制器在限定达到定义行为。行为,是操作model上的数码,以促成以中的业务逻辑的效能。行为,通过controller定义,支持一个view,以展示数据,并基于用户交互更新模型。

todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
$scope.incompleteCount = function () {
var count = 0;
angular.forEach($scope.todo.items, function (item) {
if (!item.done) { count++ }
});
return count;
}
});


<div class="page-header">
<h1>
{{todo.user}}'s To Do List

{{incompleteCount()}}

</h1>
</div>

由此吃传递让controller 函数的$scope对象上加效果,来定义行为。

提示:作者以angular.forEach方法,来枚举数组的情节。AngularJS包含众多立竿见影的工具方法,补充JavaScript语言。作者将以第4章描述这些工具方法。

叠加在$scope对象上的属于性名,作为行为之名字。作者的行称为incompleteCount,可以在ng-countroller属性的克外,调用他。

ng-hide指令的表达式为true时,会隐藏元素。

提醒:ng-hide是基于AngularJS
model状态自动操作DOM的大方命中之一个。作者会以第11段详细讲解,并在15-17章节教我们哪创造好之命。

8.3、使用其它行为

$scope.warningLevel = function () {
return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
}<div class="page-header">
<h1>
{{todo.user}}'s To Do List

{{incompleteCount()}}

</h1>
</div>

笔者定义了一个叫warningLevel的行事,它根据完成的to-do
items的个数,返回Bootstrap CSS class的名字。

8.4对应用户交互

而早就观望什么用作为跟指令结合在一起,创建app
特性,这种做,将派生许多AngularJS
app的功效。一个极其强大的结合,是兑现响应用户之竞相。

$scope.addNewItem = function (actionText) {
$scope.todo.items.push({ action: actionText, done: false });
}

<div class="input-group">
<input class="form-control" ng-model="actionText" />

<button class="btn btn-default"
ng-click="addNewItem(actionText)">Add</button>

</div>

笔者添加了一个叫作addNewItem的行为,它拥有一个初to-do
item的文书,并累加一个靶到数据模型,使用该文件作为action属性的价,并设置done属性为false。

立马是笔者展示的率先独修改model的一言一行。注意,该行为还当一个正式的Javascript函数被定义。

ng-click指令,这单一个计算机,当click事件让处分,计算表达式的价。在本例中,表达式指向addNewItem行为,传递动态actionText属性作为参数。

8.5过滤和排序模型数据

于第14章,作者介绍了AngularJS过滤特性。

<tr ng-repeat="item in todo.items | filter:{done: false}

 | orderBy:'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
</tr>

过滤可以下至数据模型的旁部分。

提拔:作者在orderBy里,使用字符串,作为属性值。使用’‘单引号。默认地,AngularJS假设scope定义的另外东西都是一个性质,并且毫不引号,会寻找一个叫做action的scope属性。这当您坐编程的法定义值时,会充分有因此。但是不表示你只能记住使用字符值,当您想只要制定一个常熟。

model中之多少并从未给排序,排序操作时当ng-repeat指令用于执行创建table的row时,执行的。

8.6、改善过滤器

todoApp.filter("checkedItems", function () {
return function (items, showComplete) {
var resultArr = [];
angular.forEach(items, function (item) {
if (item.done == false || showComplete == true) {
resultArr.push(item);
}
});
return resultArr;
}
});

该过滤方法创建了一个过滤fatory,它回到一个效能,用于过滤一组数对象。items参数,由AngularJS提供,是同组而受过滤的靶子。当作者应用过滤器时,他见面呢showComplete参数提供一个价,它用于表明,是否出示已就的人选。

<tbody>
<tr ng-repeat=
"item in todo.items | checkedItems:showComplete | orderBy:'action'">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
</tr>
</tbody>
</table>
<div class="checkbox-inline">
<label><input type="checkbox" ng_model="showComplete">

 Show Complete</label>
</div>

夫自定义的过滤器,和内建的过滤器一样。我使用filter作为过滤器的法子名,使用一个:,后面紧跟着一个己眷恋如果传送给过滤器函数的模子属性名。

8.7由此Ajax获取数据

笔者将以第五章说解JSON。创建一个todo.json文件,内容如下:

[{ "action": "Buy Flowers", "done": false },
{ "action": "Get Shoes", "done": false },
{ "action": "Collect Tickets", "done": true },
{ "action": "Call Joe", "done": false }]

 

<PRE><SPAN style="COLOR: #000000">var model = {
user: "Adam"
};
var todoApp = angular.module("todoApp", []);
todoApp.run(function ($http) {
$http.get("todo.json").success(function (data) {
model.items = data;
});
});</SPAN></PRE>

调用AngularJS模块对象定义之run方法,该方式执行一个函数,它只有AngularJS已经施行初始化设置后执行同一糟,用于one-off任务。

自我制定$http,作为传递给run方法的函数的参数,它告诉AngularJS,我思只要采取与否Ajax调用提供支持的劳动对象。使用参数告诉AngularJS,你待哪个特性,这名依赖注入。作者将当第9章介绍。

$http服务提供访问低级Ajax请求。低级在本例中,并无低。除非和$resources服务作于。该服务用于与RESTful
web
services互动。作者以当第3段讲REST,在第12段说$resource。作者采取$http.get方法,做了一个HTTP
GET请求,从劳动如todo.json文件。

getAngularJS方法的结果,是一个应,他是一个靶。作者会当第5章讲解,在第20节深入教。在许对象及,调用success方法,当Ajax请求完成时,JSON数据由服务端返回,转换为一个Javascript对象,传递至作者的success函数作为data参数。作者运用收取的数量,更新模型。

相关文章