javascript - 通过调用 Angular Controller 函数从 ng-init 指令初始化服务器数据？

Question

我们开发了一个企业应用程序，完整的客户端框架构建在 AngularJS 上，服务器端框架构建在 ASP.NET Web API 上。在应用程序中，我们有 350 多个 html 页面和 250 多个 Web API。在很多地方，我们通过调用 Controller 函数从 ng-init 指令初始化服务器数据。因为在我们的应用程序中，所有数据都来自 ASP.NET Web API。但是我对 ng-init 的文档感到惊讶，它用一个漂亮的粗体轮廓说:

唯一适合使用 ngInit 为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用 Controller 而不是 ngInit 来初始化作用域上的值。

我想从行业专家/Angularjs 核心团队成员那里得到关于我的顾虑的反馈。

首先让我简要介绍一下我们在应用程序中所做的事情，为了显示行业列表，我们加载行业 HTML 页面并显示服务器数据。 HTML模板代码如下所示:

<div ng-init="initIndustries()">....</div>

将从初始化的 industryCtrl 调用“initIndustries”函数。 industryCtrl.js代码如下所示:

app.controller("industryCtrl",["$scope",function($scope){

//Sets the server data in the $scope property.
$scope.initIndustries = function(){
//perform ajax request and set the data into the $scope property.
}

$scope.initAddIndustry = function(){
// perform ajax request for getting a dropdown data on Add Industry Page.
}
}])

基于 Angularjs Doc，我几乎没有什么顾虑和 Anglarjs-styleguide guideline on Keep Controller Focused如下所述:

1. 我们是否在通过函数初始化数据时做错了什么，因为所有数据都来自服务器 API？
2. 当前的初始化方法不符合基于 AngularJS 的应用程序的行业惯例。如果是，那么我们需要在应用程序中遵循哪种方法？
3. 我们是否需要根据 angularjs-styleguide 为每个 View 创建单独的 Controller ，只是为了调整客户端测试覆盖率？

实现上述方法(通过 Controller 函数从 ng-init 指令初始化数据)的原因，由于大型应用程序，我最初的想法是遵循解耦代码和关注点分离的 MVC 哲学。

Answer 1

Angular 被称为模型- View -任何。因此，这完全取决于您是否遵循 Angular 应用程序中的结构。

不遵循某种结构有利也有弊。

优点 1. 一个 Controller 中可用的数据可以在多个 View 之间共享，因此您不必使用 $rootScope 或 HTML5 localStorage/sessionStorage 将数据从一个 Controller 传递到另一个 Controller 。

缺点 1. 由于 Controller 中的数据在多个 View 中可用，因此维护数据非常困难，因为数据显然与 View 绑定(bind)，并且对同一数据会有许多隐式 Angular 监视。这会导致性能不佳。

现在回答您使用 ng-init 在 Controller 中初始化数据的第 1 点和第 2 点。我认为这不是一个好方法，因为您已经根据 View 进行了初始化。 让我们假设一个场景，在这个场景中，你的 View 没有根据请求找到，然后初始化就不会发生。由于不会进行初始化，因此 Controller 中会出现垃圾值/错误。所以最好把controller初始化和view分开。

对第 3 点的回答是，当您为每个 View 使用单独的 Controller 时，您实际上是在避免整体代码方法，这始终是一个好点，因为这会导致模块化方法。 Angular JS 中的关注点分离不仅仅是为每个 View 使用单独的 Controller ，从长远来看，服务和指令也是为了这个目的。

希望对您有所帮助。