Javascript 以角度正确处理数据

我试图理解如何正确处理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};
}

在

仪表板

组件中，用户可以创建新部门（创建是从

仪表板

组件调用的另一个组件）。当用户创建新部门时，我需要通知

侧导航

和

仪表板

。因此，在

仪表板

和

侧导航

组件中，我使用以下代码：

此。$rootScope。$on（'UpdatedPartMens'，（）=>{
这个.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请求的调用服务方法），当我需要共享数据时使用第二种方法（绑定到变量）

---

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

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

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

最近我遇到了一个类似的问题，我只需要在

工厂

获取数据时执行一个函数。我讨厌用

$rootScope

来做这样的事情。我不喜欢使用它，因为它会使应用程序变得混乱，而且我还注意到应用程序基准测试的副作用。但正如您所知，使用

$rootScope

事件，如

$broadcast

和

$on

确实是一件好事

我找到了更好的方法来实现这一点。使用，您可以在应用程序上创建在所需组件之间共享的虚拟总线。例如，您可以使用

DataFactory

和

DataController

订阅一个频道

reloadeitems

，并且您将仅在该频道上发出您获取了项目并在控制器上截获该消息并执行绑定到该事件的函数。之后，如果您愿意，您可以取消该频道的订阅并释放该总线。您可以与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的有趣文章

当我不需要共享数据时，您认为我应该总体上使用这种方法，还是使用我的第一种方法（发出http请求的调用服务方法），当我需要共享数据时使用第二种方法（绑定到变量）？

我觉得你不应该把这些东西绑定到一个变量上。只需使用事件来管理它。正如我之前所说，您的第二种方法更好、更模块化

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

就我个人而言，我只使用从服务器返回的对象。我喜欢拥有一个纤薄的前端，我充分利用后端的数据解析功能，但是，如果我需要在前端处理数据，我从不在控制器中处理，我会在工厂或服务中处理

---

我希望我能帮上忙。

非常感谢你的回答。我一定会看看这个图书馆。