JavaScript语言教程

Angular.js的最简单案例

  在这个简单的单页应用(SAP)案例中展示AngularJS开发最基本的技巧,AngularJS是一个Model模型 -View 视图 - Controller控制器架构(MVC),其中模型提供数据,控制器从模型获取需要的数据提供给视图,能查看视图显示的数据。由于我们要显示一些数据,我们需要所有三个组件。我们的案例是联系人地址簿,需要一个控制器,将提供联系人的列表数据,需要一个视图来显示联系人的列表数据。

开始之前,首先要定义Angular模块:

var angularEg = angular.module('angularEg', []);

使用angular.module定义一个新的模块。第一个参数定义模块的名称,第二个参数指定其他所需的模块。我们将会把它作为一个空数组,因为在这个例子中我们对其他模块没有依赖。虽然第二个参数是可选的,它有一个显著的意义。如果没有指定,angular将在现有的模块中寻找第一个参数中指定的名称,否则,将创建这个新的模块。

 

Model

我们的联系人卡片将显示联系人姓名 国家和他的网站地址,这样我们需要创建一个Model对象包含这些数据:

{
name: "Scott Hanselman",
country: "USA",
web: "http://www.hanselman.com"
}

Controller

控制器是为了让数据喂给视图可用,这样我们定义一个控制器如下:

angularEg.controller('myContacts', function($scope){

});

控制器的第一个参数是控制器名称,第二个参数是控制器的实现,$scope变量是控制器和视图之间的连接管道,用于将控制器信息传到视图,控制器能够从模型中得到数据,而模型数据来自后端服务器,也可以从一个文件加载,为了简单我们先硬编码数据如下:

ngularEg.controller('myContacts', function($scope){

$scope.contacts = [{
name: "Arian Celina",
country: "Republic of Kosova",
web: "http://arian-celina.com"
}]
});

View

视图是标准的html页面,显示信息在div中,为了将数据从控制器中绑定到视图,我们有三件事要做:

1. 我们需要规定视图是一个Angular模块,这是通过将ng-app放入html页面实现的:

<html ng-app="angularEg">

2. 我们需要规定视图绑定到哪个控制器,这是通过ng-contoller标签实现的,如下:

<body ng-controller="myContacts">

3.我们需要显示联系人,这是用AngularJS特有的标签来显示如数组等形式的数据,标签语法是ng-repeat:

<div class="w-row" ng-repeat="contact in contacts">

<div class=”contact-brief”>
<h2 class=”contact-name”>{{contact.name}}</h2>
<div class=”contact-info”>Country: {{contact.country}}</div>
<div class=”contact-info”>Web: {{contact.web}}</div>
</div>

</div>

ng-repeat遍历来自控制器的联系人的集合,控制器名称是在$scope中定义的myController,本地变量contact是在ng-repeat内部定义,这样我们在遍历时能够访问其中一个具体对象数据,这是通过括号实现的,{{contact.name}}

AngularJS将遍历$scope.contacts集合,然后将数组中数据加入到DOM的div中。

效果演示: http://arian-celina.com/angularexample/index.html

源码下载: GitHub

AngularJS框架介绍