google charts

two-way binding

在开始之前，我们先来看一下如何使用Google Charts API。就此应用而言，我们将坚持使用一些基本图表，例如折线图，饼图等。

Google图表

以下示例直接来自Google Charts文档，提供了有关如何使用Google Charts API的快速入门。第一个脚本加载AJAX API。在第二个脚本中，第一行加载Visualization API和linechart包。第二行设置了在加载Google Visualization API时运行的回调。回调函数创建一个数据表，设置一些图表选项，实例化我们的图表并创建图表。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages:['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
        var options = {
          title: 'Company Performance'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如果您不熟悉此API，或者需要复习一下，建议您阅读Google Charts文档。

AngularJS

在开始使用Angular之前，您应该：

在终端上，导航到种子项目，然后输入以下命令：

cd angular-seed  node scripts/web-server.js

您应该看到以下消息输出到控制台：

HTTP Server running at http://localhost:8000/

http://localhost:8000/app/index.html

Angular使用MVC（模型-视图-控制器）设计模式。在本教程中，我们将专注于控制器。目前，将Controller视为处理页面特定部分并使用View呈现数据的逻辑。一旦开始编写应用程序，我们将更好地了解控制器是什么。

app/js

构建应用

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
</head>
<body>
  <div ng-controller="MyCtrl1">{{name}}</div>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

控制器

如前所述，控制器包含处理页面特定部分的逻辑。在前面的代码示例中，请注意以下行：

<div ng-controller="MyCtrl1">{{name}}</div>

divng-controllerMyCtrl1MyCtrl1app/js/controllers.jsng-controllerng-controller

{{name}}MyCtrl1name$scope$scopecontrollers.js

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope',
    function($scope) {
      $scope.name = 'Jay';
    }
])
  .controller('MyCtrl2', [
    function() {

    }
]);

$scopename

node scripts/web-server.js

http://localhost:8000/app/index.html

创建图表

index.html

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

index.htmldiv

<div ng-controller="MyCtrl1" id="chartdiv"></div>

controllers.js

google.load('visualization', '1', {packages:['corechart']});

加载包后，我们需要初始化Angular应用。

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myApp']);
});

angular.bootstrap

'use strict';

/* Controllers */
google.load('visualization', '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myApp']);
});

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope',
    function($scope) {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
      ]);
      var options = {
        title: 'Company Performance'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));

      chart.draw(data, options);
    }
  ])
    .controller('MyCtrl2', [
      function() {

      }
  ]);

index.htmlhtmlng-app="myApp"ng-app

angular.bootstrap(document.body, ['myApp']);

http://localhost:8000/app/index.html

结论

在本教程的这一部分中，我们重点介绍Angular控制器。在下一篇文章中，我们将重点介绍伪指令和$ scope的使用。同时，本文的所有代码都可以在GitHub上获得。

google charts