如何以 angular 方式构建数据小部件

Question

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

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

在研究 angular 时，我发现了这种方法 http，它向指定的服务器发出 http 请求。

在我的数据小部件中，我正在使用 jquery 和 html5 并且没有 angular.The 小部件工作，但我很好奇 angular js 将如何构建相同的小部件。

有哪些来自 angular js 的概念，我本可以用来制作相同的小部件？

Answer 1

下面是关于如何创建小部件的真正基本概念：

小部件将由 controller、service 和模板组成：

控制器

处理点击事件
触发 UI

服务

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

您应用侧边栏上的 tree/tabs 将链接到控制器中的点击事件：

标记

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

这里是显示标签内容的地方：

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

控制器

此函数在从视图中单击时执行：

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

服务

然后从控制器的函数调用服务：

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

这是这些作品的一个真实的基本工作示例：

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

如何以 angular 方式构建数据小部件

How to build a data widget the angular way

javascript

widget

angularjs