你的第一个AngularJS应用

AngularJS是Google开源出来的一款 Javascript MVC 框架。利用AngularJS，你可以构建结构清晰、便于测试和维护的前端应用。

使用AngularJS，你可以通过directive去定义很多自己的HTML元素属性。AngularJS无缝衔接了HTML(view)和Javascript(model)，这样你就不需要去过多地关注Dom如何变化，你只需专注的处理你的数据。

AngularJS和服务器通信非常方便。和大多数Javascript的MVC框架一样，只要你的应用提供一个RESTful API，AngularJS就可以和你的服务器相配合。同时，AngularJS提供了基于XHR的服务，这将大大简化你的代码，也方便将可复用的服务抽象成API调用。

Raoni Boaventura提供了一个教程，一步一步地教你写一个简单的AngularJS应用，让我们一起来看一下吧。

为了简化问题，我们要做的是一个直接从网络上拉取信息的应用，比如，一个查看方程式赛车比赛信息的应用。直接用Ergast的api获取信息。

可以看一下这个demo，对我们要做一个什么样的应用有个大致的概念。

开动吧

推荐使用augular-seed，提供了一个很好的项目骨架。

我们的应用的骨架大概是这样的：

现在要开始写代码了。从最重要的页面开始吧：锦标赛的表格。

HTML大概是这个样子的（为了提高可读性，先忽略CSS）：

<body ng-app="F1FeederApp" ng-controller="driversController">
  <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
</body>

我想你会注意到模板里面有一些{{ 和 }} 之类的表达式。我们可以在里面做一些计算。举一些例子吧：

{{ 1 + 1 }}
{{ 946757880 | date }}
{{ user.name }}

是不是和javascript很像？不过，虽然它们很强大，我们不应该用它们去实现一些高层级的逻辑——这该交给directive。

理解基本的directive

上面的模板里还有一些类似ng-attributes的语句，这些正是directive。

directive让AngularJS把特定的行为附加到DOM元素中。让我们看一下上面的模板中的例子：

ng-app 初始化你的应用，定义其作用域。在 AngularJS 中，同一页面可以有多个应用，ng-app 指令表明应用的首尾位置。
ng-controller 定义视图由哪个控制器负责。在我们的例子中，driversController提供了车手的列表（driversList）。
ng-repeat 这个最常用。当使用循环的时候，ng-repeat定义模板的范围。在我们的例子中，就driversList中的每个车手，ng-repeat会生成重复的行。

添加控制器

当然，没有控制器，我们的视图什么也干不了。让我们在controllers.js中添加一个driversController：

angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope) {
    $scope.driversList = [
      {
          Driver: {
              givenName: 'Sebastian',
              familyName: 'Vettel'
          },
          points: 322,
          nationality: "German",
          Constructors: [
              {name: "Red Bull"}
          ]
      },
      {
          Driver: {
          givenName: 'Fernando',
              familyName: 'Alonso'
          },
          points: 207,
          nationality: "Spanish",
          Constructors: [
              {name: "Ferrari"}
          ]
      }
    ];
});

你可能注意到了我们将$scope传递给了控制器。$scope变量将控制器和视图相连接。事实上，它储存了模板中会用到的所有数据。任何你加入的内容（比如我们的例子中的driversList）可以直接在视图中访问。现在我们先用一个静态的数据数组，稍后我们会把它换成API服务。

在app.js中加入：

angular.module('F1FeederApp', [
  'F1FeederApp.controllers'
]);

这行代码让我们初始化了我们的应用，同时也登记了需要的依赖。稍后我们会回到这个文件。

好了，现在让我们把这一切在index.html中整合起来：

<!DOCTYPE html>
<html>
<head>
  <title>F-1 Feeder</title>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <script type="text/javascript" src="js/services.js"></script>
</head>
<body ng-app="F1FeederApp" ng-controller="driversController">
  <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

现在你可以尝试运行下这个应用了。

如果你希望调试应用，建议看下Chrome的Batarang 插件。

从服务器获取信息

既然我们已经知道如何展示这些数据了，现在该是我们从RESTful服务器获取信息的时候了。

AngularJS提供的$http和$resource帮助我们和服务器通讯。
$http是以XMLHttpRequest和[JSONP]为基础的抽象层，$resource则提供更高层的抽象。在这里我们使用$http。

为了将API调用从控制器中抽象出来，我们创建一个自己定制的服务，该服务将抓取我们需要的信息，将$http封装起来。在services.js中加入：

angular.module('F1FeederApp.services', []).
  factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

开头两行，我们创建了一个名为F1FeederApp.services的新模块，并在ergastAPIservice模块内注册了服务。注意，我们将$http传递给了该服务。这就告诉了Angular的依赖注入引擎我们的新服务依赖于$http服务。

类似地，我们需要让Angular将我们的新模块包含到应用中。在app.js注册下即可：

angular.module('F1FeederApp', [
  'F1FeederApp.controllers',
  'F1FeederApp.services'
]);

现在我们只需调整一下controller.js，将ergastAPIservice作为依赖：

angular.module('F1FeederApp.controllers', []).
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];

    ergastAPIservice.getDrivers().success(function (response) {
        //Dig into the responde to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  });

好了，重新启动一下应用，看看结果如何。注意我们完全没有改动模板，只是增加了一个nameFilter。让我们把这个变量用起来。

过滤器

好极了！我们的控制器已经可以工作了。但是它只能显示一个车手的列表。让我们加一些功能吧。我们来实现一个简单的文本搜索框，可以过滤列表。将以下这行加入到index.html，加在<body>标签下面：

<input type="text" ng-model="nameFilter" placeholder="Search..."/>

现在我们要用上 ng-model 指令了。这个指令将文本框绑定到$scope.nameFilter变量，并且确保该变量的值会及时更新。现在让我们稍微调整下index.html，加上一行ng-repeat指令。

<tr ng-repeat="driver in driversList | filter: nameFilter">

这一行告诉ng-repeat，在输出数据之前，车手数组先要经过nameFilter的过滤。

此刻就是双向数据绑定发挥威力的时候了：每次你在搜索框里键入一些值的时候，Angular会及时更新$scope.nameFilter的内容。由于绑定是双向的，所以nameFilter更新的时候，相应的指令(ng-repeat)也会获得新的数值，然后视图会立刻更新。

重启你的应用，看看搜索框。

注意，过滤器会搜索所有属性中的关键词，包括你不想包括的内容。假设你只想通过Driver.givenName和Driver.familyName过滤：首先，在driversController文件的$scope.driversList = [];下加入这样一行：

$scope.searchFilter = function (driver) {
    var keyword = new RegExp($scope.filterName, 'i');
    return !$scope.filterName || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
};

现在回到index.html，更新包括ng-repeat的那行：

<tr ng-repeat="driver in driversList | filter: searchFilter">

重新启动应用，现在你可以通过姓名搜索了。

路由

接下来我们要创建一个车手详情页面，当我们点击车手的时候，我们就可以看到关于他的一些详细信息。

首先，我们在app.js里加入$routeProvider服务，这个服务将帮助我们处理应用路由。然后我们加入两个路由：一个转向锦标赛表格，另一个转向车手详情。

angular.module('F1FeederApp', [
  'F1FeederApp.services',
  'F1FeederApp.controllers',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}).
    when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}).
    otherwise({redirectTo: '/drivers'});
}]);

修改之后，访问http://domain/#/drivers，这将加载driversController，然后在partials/drivers.html寻找需要渲染的部分视图。等等！我们好像还没有部分视图？我们需要创建他们。

部分视图

AngularJS允许你将路由绑定到特定的控制器和视图。不过我们首先需要告诉Angular在哪里渲染这些部分视图。这需要使用ng-view指令。修改一下你的index.html：

<!DOCTYPE html>
<html>
<head>
  <title>F-1 Feeder</title>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <script type="text/javascript" src="js/services.js"></script>
</head>
<body ng-app="F1FeederApp">
  <ng-view></ng-view>
</body>
</html>

现在，只要是通过应用路由浏览，Angular 就会加载相应的视图，并且
在<ng-view>标签处渲染。你所需要做的只是创建一个名为partials/drivers.html的文件，然后将锦标赛表格放在那里。同时我们也将将车手的姓名和详情页面连接起来。

<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table>
<thead>
  <tr><th colspan="4">Drivers Championship Standings</th></tr>
</thead>
<tbody>
  <tr ng-repeat="driver in driversList | filter: searchFilter">
    <td>{{$index + 1}}</td>
    <td>
      <img src="img/flags/{{driver.Driver.nationality}}.png" />
      <a href="#/drivers/{{driver.Driver.driverId}}">
        {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
      </a>
      </td>
    <td>{{driver.Constructors[0].name}}</td>
    <td>{{driver.points}}</td>
  </tr>
</tbody>
</table>

最后，让我们确定下详情页面要展示什么。一个总结了车手相关信息（比如生日、国籍）的页面，同时包括一个最近成绩的表格。在services.js里加入这些：

angular.module('F1FeederApp.services', [])
  .factory('ergastAPIservice', function($http) {

    var ergastAPI = {};

    ergastAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverDetails = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
      });
    }

    ergastAPI.getDriverRaces = function(id) {
      return $http({
        method: 'JSONP', 
        url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
      });
    }

    return ergastAPI;
  });

这次我们把车手的ID提供给服务，这样我们就可以获取特定车手的信息了。修改一下controllers.js：

angular.module('F1FeederApp.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope, ergastAPIservice) {
    $scope.nameFilter = null;
    $scope.driversList = [];
    $scope.searchFilter = function (driver) {
        var re = new RegExp($scope.filterName, 'i');
        return !$scope.filterName || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
    };

    ergastAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
  }).

  /* Driver controller */
  controller('driverController', function($scope, $routeParams, ergastAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;

    ergastAPIservice.getDriverDetails($scope.id).success(function (response) {
        $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; 
    });

    ergastAPIservice.getDriverRaces($scope.id).success(function (response) {
        $scope.races = response.MRData.RaceTable.Races; 
    }); 
  });

值得注意的是我们将$routeParams服务插入了车手控制器。这个服务允许我们使用$routeParams.id访问URL参数（比如:id）。

现在我们已经有数据了，我们只需要处理一下局部视图了。创建一个partials/driver.html:

<section id="main">

  <nav id="secondary" class="main-nav">
    <div class="driver-picture">
      <div class="avatar">
        <img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
        <img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
        {{driver.Driver.givenName}}<br/>{{driver.Driver.familyName}}
      </div>
    </div>
    <div class="driver-status">
      Country: {{driver.Driver.nationality}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      Birth: {{driver.Driver.dateOfBirth}}<br/>
      <a href="{{driver.Driver.url}}" target="_blank">Biography</a>
    </div>
  </nav>

<div class="main-content">
    <table class="result-table">
      <thead>
        <tr><th colspan="5">Formula 1 2013 Results</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Round</td> <td>Grand Prix</td> <td>Team</td> <td>Grid</td> <td>Race</td>
        </tr>
        <tr ng-repeat="race in races">
          <td>{{race.round}}</td>
          <td><img  src="img/flags/{{race.Circuit.Location.country}}.png" />{{race.raceName}}</td>
          <td>{{race.Results[0].Constructor.name}}</td>
          <td>{{race.Results[0].grid}}</td>
          <td>{{race.Results[0].position}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</section>

注意这次我们用上了ng-show。只有当你提供的表达式是true的时候，它才会显示HTML元素。在我们的例子中，只有当控制器加载了车手对象后才会显示头像。

完成

加上一些CSS之后，大致是这样的效果：

请输入图片描述

现在你的应用已经可以上线了。确认下路由能工作。你可以在index.html加入一个静态的菜单以加强导航。一切皆有可能。

结论

我们已经介绍了开发一个简单应用所需的一切。最后别忘了，Angular是一个非常强大的框架。我们只是试了试水而已。以后有机会将向大家展示Angular区别于其他前端MVC框架的特性：可测试性。我们将评测使用Karma编写和运行测试的过程，介绍持续集成的工具Yeomen、Grunt和Bower，以及Angular的其他优势。敬请期待。

原文 A Step-by-Step Guide to Your First AngularJS App

编译 SegmentFault

你的第一个AngularJS应用

开动吧

理解基本的directive

添加控制器

从服务器获取信息

过滤器

路由

部分视图

完成

结论

JeOam

引用和评论

什么样的硬件设备在支撑 Stack Overflow？

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号