javascript - 正确处理 Angular 数据

Question

我正在尝试了解如何正确处理 Angular 1 中的数据。

我正在使用基于组件的方法。让我们考虑一个简单的例子。我有侧面导航和仪表板。我需要在这些组件中显示部门数据。

import sidenavHtml from './sidenavigation.html';
import sideNavController from './sidenavigation.controller';

export default SideNavigation;

SideNavigation.$inject = [
];

function Sidenav() {
    return {
        restrict: 'E',
        scope: {},
        template: sidenavHtml,
        controller: sideNavController,
        controllerAs: 'ctrl',
        link: function ($scope, elem, attrs) {

        }
    };
}

export default class SideNavigationController {
    ...

    $onInit() {
        this.getDepartments();
    }

    getDepartments() {
        this.departmentService.getDepartments().then((result) => {
            this.departments= result.data;
        });
    }
}

export default class DashboardController {
    ...

    $onInit() {
        this.getDepartments();  
    }

    getDepartments() {

        this.departmentService.getDepartments().then((result) => {
            this.departments= result.data;              
        });
    }
}

export default Departments;  

function Departments($http) {

    function getDepartments() {
        return $http({url: 'http://localhost:9000/api/departments', method: 'GET'});
    }

     function create(newDepartment) {
        return $http.post('http://localhost:9000/api/departments', newDepartment);
    }

    return {getDepartments, create};
}

在Dashboard组件中，用户可以创建新部门(创建是从Dashboard组件调用的另一个组件)。当用户创建新部门时，我需要通知 SideNavigation 和 Dashboard 。因此，在 Dashboard 和 SideNavigation 组件中，我使用以下代码: this.$rootScope.$on('updateDepartmens', ()=> { this.getDepartments(); });

嗯，这种方法的缺点是显而易见的。当我的应用程序渲染时，我收到两个 http 请求，并使用 $rootScope。我决定按以下方式重写服务:

export default Departments;  

    function Departments($http) {
        this.departments;

        function getDepartments() {
           if(!departments) {
             $http({url: 'http://localhost:9000/api/departments', method: 'GET'})
             .then((response) => {                   
                this.departments = response.data;                    
             })
             .catch((err) => {
                console.log('error');   
             });
           }

           return this.departments; 
        }

         function create(newDepartment) {
            $http.post('http://localhost:9000/api/departments', newDepartment)
            .then((response) => {
               // handle response and add to departments;
               ...
               this.departments.push(response.data);
            );
    }  

        return {getDepartments, create};
    }

您认为这是好方法还是还有其他方法？

您认为我应该如何整体使用这种方法，或者当我不需要共享数据时使用第一种方法(调用发出http请求的服务方法)，而当我需要共享数据时使用第二种方法(绑定(bind)到变量)？

还有一个问题。您使用将服务器模型映射到客户端模型还是仅使用从服务器返回的对象？

Answer 1

您认为这是好的方法还是还有其他方法？

我认为你的第二种方法是正确的，但是，如果你想拦截某个事件，例如，在获取数据时重新加载数据，你不希望每次都自动执行绑定(bind)到该事件的特定函数。

我最近遇到了类似的问题，只有当工厂获取数据时我才需要执行一个函数。我讨厌使用 $rootScope 来做这样的事情。我不喜欢使用它，因为它使应用程序变得困惑，而且我还注意到对应用程序基准的副作用。但如您所知，使用 $rootScope 事件(例如 $broadcast 和 $on)确实是一件好事。

我找到了一个更好的方法来实现这样的事情。使用Postal.js您可以在应用程序上创建在所需组件之间共享的虚拟总线。例如，您可以使用 DataFactory 和 DataController 订阅 channel reloadItems，并且您将仅在该 channel 上发出您获取的内容项目并在 Controller 上拦截该消息并执行绑定(bind)到该事件的函数。之后，如果您愿意，您可以取消订阅该 channel 并释放该总线。您可以与 n 个不同的模块共享特定的总线。

我注意到使用这个库可以提高应用程序的整体速度，因为我没有将任何内容附加到 $rootScope。

这是一个使用示例

// . . . Cool stuff
//Factory
$scope.$bus.publish({
                  channel : 'reloadItems',
                  topic   : 'reloadItems'
                  data    : items
);

// . . . Cool Stuff also
//Controller
$scope.$bus.subscribe({
  channel  : 'reloadItems',
  topic    : 'reloadItems',
  callback : function () {
    reloadItems();
  }
});

我真的建议你尝试一下。您可以找到一篇有趣的文章，介绍如何将其与 Angular 一起使用 here .

您认为我应该如何整体使用这种方法，或者当我不需要共享数据时使用我的第一种方法(调用发出http请求的服务方法)并在我需要时使用第二种方法(绑定(bind)到变量)共享数据？

我觉得你不应该将这些东西绑定(bind)到变量。只需使用事件来管理即可。而且，正如我之前所说，第二种方法更好、更模块化。

您使用将服务器模型映射到客户端模型还是仅使用从服务器返回的对象？

就我个人而言，我只使用从服务器返回的对象。我喜欢拥有一个纤薄的前端，并且我充分利用后端的数据解析，但是，如果我以某种方式需要在前端处理数据，我从来不会在 Controller 中这样做，我会在 Controller 中这样做工厂或服务。

希望对您有所帮助。