javascript - 如何以 Angular 方式构建数据小部件

Question

我有一个小部件，其中包含侧边栏和内容区域。侧边栏有一个树组件，其中包含多个树项目。当单击树项时，它会获取自己的数据并将数据注入(inject)到内容 div 中。

我正在使用ajax get从服务器获取数据并插入到内容中。

在浏览 Angular 时，我发现了这个方法http，它向指定的服务器发出 http 请求。

在我的数据小部件中，我使用 jquery 和 html5，没有使用 Angular。该小部件可以工作，但我很好奇 Angular JS 将如何构建相同的小部件。

我可以使用 Angular JS 中的哪些概念来制作相同的小部件？

Answer 1

这是我如何创建小部件的真正基本概念:

小部件将由 Controller 、服务和模板组成:

Controller

• 处理点击事件
• 触发用户界面更新

服务

• 进行实际的 REST 调用来检索数据

应用程序侧边栏上的树/选项卡将链接到 Controller 中的点击事件:

标记

<a ng-click="getContent(tabNumber)">tab label</a>

这是显示选项卡内容的位置:

<div class="content-area">{{ contentArea }}</div>

Controller

从 View 中单击时执行此函数:

...
$scope.getContent = function(tab) {
  TabService.getContent(tab)
  .then(function(response) {
    // update the view
    $scope.contentArea = response.data.content;
  });
}

服务

然后从 Controller 的函数调用该服务:

app.service('TabService', function($http) {
  return {
    getContent: function(tab) {
      return $http.get(....);
    }
  }
});

这是这些作品的一个真正的基本工作示例:

http://plnkr.co/edit/Tr5OIdwh1QLqOJFfr3xZ?p=preview