AngularJS2.1:你的率先个AngularJS App

该静态页面已经司空见惯展现。到第伍章时,小编会讲应用的文书结构。

       
笔者将在第7和第三八章描述模块的品质。angular.module方法的参数,是要成立的模块的名字,和模块必要的任吕鑫西的数组。小编创造了1个称作todoApp的模块。遵从约定,模块的名字以App结尾。因为不须要AngularJS提供别的模块,所以传递空数组作为第二个参数。小编将在第2八章,呈现分歧模块可用的性状。

提示:在任何AngularJS开发品种中,你只可以定义MVC主要部分的成效域。小编有限支持,在第四章能够见见2个巨型的例证。它有好多初阶化设置和必须的计划。

AngularJS,它会发出上面包车型大巴代码

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

作者说,不用担心,本书结束时,你将学会MVC格局,和在AngularJS中动用他们。

唤醒:在表明式中,应该只进行简单的操作。不要使用数据绑定,来进行复杂逻辑或对model的操作。这应当是controller的干活。你会时不时遭受很难讲逻辑归类于view或controller的事态。小编的提议是,不要操心它。以最快的进程开发,再然后需求时再移动这个逻辑。若是实际不知底该如何做,就把逻辑放在controller中,它有伍分三的可能率是科学的。

8.三、使用其余行为

<!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>

ng-repeat指令,会是您最常用的命令之1。

晋升:ng-hide是基于AngularJS
model状态自动操作DOM的汪洋指令中的一个。我会在第三1章详细讲解,并在15-1柒章教我们怎么创建自个儿的下令。

 

2个数额绑定表明式的剧情,可以是任何可用的JavaScript表明,意味着你能实施操作,从model中创设新的数量。上边是呈现to-do
items的个数:

本身制定$http,作为传递给run方法的函数的参数,它告诉AngularJS,我想要使用为Ajax调用提供支撑的服务指标。使用参数告诉AngularJS,你必要哪些性情,那称为重视注入。作者将在第楚辞介绍。

提示:小编在orderBy里,使用字符串,作为属性值。使用’‘单引号。暗中认可地,AngularJS假如scope定义的任李菲西都以1个脾性,并且毫不引号,会寻找1个叫做action的scope属性。那在您以编程的不二秘诀定义值时,会很有用。不过不意味你只可以记住使用字符值,当您想要制定二个常熟。

<body ng-controller="ToDoCtrl">

 

调用AngularJS模块对象定义的run方法,该措施执行一个函数,它只有AngularJS已经执行伊始化设置后执行2次,用于one-off任务。

 

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

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

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

你不会接连想让views访问整个model,所以您愿意选拔controller,来显明地挑选部分数量,那称为scope(范围)。

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

八、超过基本

笔者定义了二个叫做warningLevel的行为,它依照完毕的to-do
items的个数,再次来到Bootstrap CSS class的名字。

        AngularJS
apps,从一个或五个模块伊始。模块是由此调用angular.module方法创造的,如上边那样:

       
注意:AngularJS的编写翻译器,不像您遇见的C#或Java项目标编写翻译器那样,处理源代码,为了转变能够推行的运作时输出。精确地说,当浏览器已经加载内容,AngularJS库评估HTML成分,并选择正规DOM
API和JavaScript本性,来添加或一处成分,设置事件处理器,等等。在AngularJS开发中,未有强烈的形成步骤,只须要修改你的HTML和Javascript文件,并用浏览器加载他们。

4、创制1个View

小编也只可以内定controller负责的html文书档案的区域。因为是2个总结的接纳,并且唯有2个controller,作者就在body元素上利用ng-controller。

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,那就是说,$符号跟随者单词scope。在AngularJS
app中,以$起初的变量名,表示是AngularJS提供的内建特点。当你看来$符号,它1般针对一个内建的劳务,它是2个自包罗的组装,为八个控制器提供特色。但$scope很尤其,它用来曝露数据和函数给view。小编将在第2三章讲解scope,在1八-2伍章讲解内建services。

 

       
AngularJS附加到HTML上,最关键的就是ng-app属性,它制定该html元素列表包蕴1个应有被AngularJS编写翻译和处理的模块。当使用的JavaScript框架只有AngularJS时,习惯将ng-app属性应用到html成分。假如您要将AngularJS和此外技术混合,如jQuery,你能够透过在文书档案上的一个因素上应用ng-app属性,来收缩AngularJS
app的界限。

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

该过滤方法创设了多个过滤fatory,它回到2个效应,用于过滤壹组数据对象。items参数,由AngularJS提供,是一组要被过滤的对象。当笔者应用过滤器时,他会为showComplete参数提供贰个值,它用于表明,是还是不是出示已经成功的人物。

<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>

对此本金和利息用而言,小编系统它在view中运用一切model,所以她定义了2个天性,在$scope服务指标上,调用todo,并像上面那样,指派完整的model:

它会被处理,并翻译为下边的字符串:

$http服务提供访问低级Ajax请求。低级在本例中,并不低。除非和$resources服务作相比较。该服务用于和RESTful
web
services互动。小编将在第3章讲REST,在第2二章讲$resource。作者利用$http.get方法,做了2个HTTP
GET请求,从劳动要todo.json文件。

AngularJS补助MVC方式。笔者将在第三章讲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>

陆、求表明式的值

您曾经观察哪些将作为和下令结合在联合,创立app
天性,这种组合,将派生许多AngularJS
app的功效。3个最强大的构成,是促成响应用户的并行。

八.四一面还是用户交互

小编将在上边包车型客车代码中,演示如何使用1种注释类型,也叫做数据绑定。

因此调用angular.module重临的模子对象的controller方法,创造贰个controller。controller方法的参数,是新controller的名字,和他的意义。

逻辑,是拍卖存款和储蓄或获得模型的有的数据。逻辑,处理格式化过的数额,将它看作VIEW的1局地,显示给用户。Controller在model和view之间,并接连他们。Controller相应用户交互,更新model中的数据,提供view和view必须的数量。

笔者会持续运用AngularJS约定,并运用ng-app属性,和别的HTML增强属性。他提议大家也这么做。要是你的开发工具不能够处理非标准化准的HTML成分和总体性,你也能够不这么做。

八.6、改良过滤器

提示:小编说,model也得以分包create,load,store,modify数据对象所不可不的逻辑。在三个AngularJS应用中,该逻辑一般位于服务器,被web
server访问。作者将在第三章详细介绍。

       
AngularJS的绑定是动态的,双向的绑定。七个元素绑定到同多个,二个因素变了,另一个也会变。

$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>
<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>

 

        
当HTML第一遍编写翻译,AngularJS会动用done属性的value,设置input成分的value。

8.二、创设并行使控制器行为

get方法的结果,是一个答应,他是三个对象。作者会在第四章讲解,在第一0章深刻讲解。在答应对象上,调用success方法,当Ajax请求达成时,JSON数据从服务端再次来到,转换为3个Javascript对象,传递到小编的success函数作为data参数。作者运用收取的多寡,更新模型。

ng-controller属性的值,是要设置的controller的名字。小编将在第23章深刻controller的大旨。

8.一使用双向模型绑定

$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>

model中的数据并未被排序,排序操作时在ng-repeat指令用于实施创造table的row时,执行的。

叠加在$scope对象上的属性名,作为行为的名字。笔者的表现称作incompleteCount,能够在ng-countroller属性的范围内,调用他。

过滤能够利用到数据模型的其它部分。

2、使用AngularJS

表明式中也得以动用指令,这会告知AngularJS,你想要怎么处理内容。在本课中,小编辑采访取ng-repeat属性。

作者添加了三个称作addNewItem的一言一动,它有着一个新to-do
item的文件,并累加一个指标到数据模型,使用该公文作为action属性的值,并安装done属性为false。

Controller定义了作业逻辑,为view提供帮忙。定义五个controller的最佳格局,是说明如何品种的逻辑,是它不帮忙的,而什么是它帮衬的。

在档次路线下,新建todo.html,代码如下:

那正是所谓的数量绑定或模型绑定,model中的值,绑定到1个html成分的始末上。那里有一部分不壹的不贰秘诀来成立数量绑定,作者将在第七章解释。

ng-click指令,那只三个处理器,当click事件被判罚,总结表明式的值。在本例中,表达式指向addNewItem行为,传递动态actionText属性作为参数。

叁、创制三个数据模型

2.2、给HTML应用AngularJS

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

小编将在第四章讲解JSON。创造3个todo.json文件,内容如下:

控制器在限定上定义行为。行为,是操作model上的多寡,以促成应用中的业务逻辑的机能。行为,通过controller定义,支持3个view,以呈现数据,并基于用户交互更新模型。

八.5过滤和排序模型数据

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

本章,带你体验1个简练的耗费流程,将一个静态的运用模拟数据的行使,变成具有AngularJS本性的动态web应用。在陆-捌章,笔者将显得如何创制3个更复杂,更真实的AngularJS应用。

<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文档。例如,下面的例子:

 

       
笔者通过ng-app属性,告诉AngularJS怎么样选用模块。AngularJS通过给HTML添加新的要素、属性、类和special
comments,来扩展HTML,才能做事。AngularJS库动态编写翻译HTML,为了永恒和拍卖那么些附加音信,并成立三个施用。你能够因而JavaScript代码,客制化应用的行事,补充内建坚守,定义你自个儿的附加消息到HTML上。

作者以前使用的绑定,都以单向绑定,从model中取出值,用于在模板中散发那几个成分。那是贰个格外基本的资料,并且在web
app开发中,广泛应用的技艺。例如,小编在使用jQeury时,平时使用Handlebars模板包,它提供该类型的绑定,对从数量对象生成HTML内容很有用。

<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>

提拔:小编辑采访取angular.forEach方法,来枚举数组的内容。AngularJS包蕴众多卓有作用的工具方法,补充JavaScript语言。笔者将在第6章描述那些工具方法。

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

作者添加了叁个checkbox
input成分。首要的附加音信,是ng-model属性,它告诉AngularJS,在input成分的值和相应数据对象的done属性之间,创造七个双向绑定。

四、创造一个Controller

2.1、应用AngularJS到HTML文件

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;
}
});
<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>

八.七透过Ajax获取数据

       
双向绑定,能够应用于用户输入的要素,生成使用HTML表单成分关联的有含义的成分。笔者会在第二二章深度讲解。

用户能用该网页,查看要做的事项的列表,检查事项是还是不是形成,创设2个新的事项。

在第二四章,作者介绍了AngularJS过滤天性。

<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>

经过给传递给controller 函数的$scope对象添加效果,来定义行为。

一、准备项目

本条自定义的过滤器,和内建的过滤器壹样。小编利用filter作为过滤器的点子名,使用一个:,前边紧跟着叁个本身想要传递给过滤器函数的模型属性名。

这是作者展现的率先个修改model的一举一动。注意,该行为照旧作为三个正规的Javascript函数被定义。

给HTML文书档案添加贰个非标准化准的性格,看起来很奇怪,特别是假诺您曾经写过一些web
apps,并从严服从HTML标准。有贰个代表格局,使用data属性,给AngularJS添加data-前缀。

<html data-ng-app="todoApp">
<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>

相关文章