通过调用角度控制器函数从ng-init指令初始化服务器数据？

Question

We have developed one Enterprise application, The complete client side framework is built on AngularJS and the server side framework is on ASP.NET Web API. In the application we have 350+ html pages and 250+ Web APIs. There are lots of areas where we initialize the server data from ng-init directive via calling controller function. Because in our application all data is coming from the ASP.NET Web APIs. But I was surpised upon the documentation for ng-init, which says, in a nice bold outline :

The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

I would like to get feedback from Industry Experts/ Angularjs Core Team Members on my concerns.

Let me brief first what we are doing in the application, for showing a industries list we load the industry HTML page and show the server data. The HTML template code is shown below:

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

The "initIndustries" function will be called from initialized industryCtrl. industryCtrl.js code is shown below :

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.
}
}])

I have few concerns based on Angularjs Doc and Anglarjs-styleguide guideline on Keep Controller Focused which is mentioned below :

1. Are we doing something wrong to initialize the data via function because all data is coming from the Server APIs?
2. Current initialization approach is against the industry practices in AngularJS based application. if yes, then which approach we need to follow in the application?
3. Do we need to create sperate controller for every view just for the shake of client side test coverage, as per the angularjs-styleguide?

The reason to implement the above approach(initialize the data from ng-init directive via controller function), Due to large application my initial thought was to follow MVC philosophy of decoupling the code and separation of concerns.

Answer 1

Angular is known to be Model-View-Whatever. So, it totally depends on you whether you follow a structure in the angular application or not.

Not following a structure has some pros and cons.

Pros 1. A data that is available in one controller can be shared across many views so you won't have to use $rootScope or HTML5 localStorage/sessionStorage to pass data from one controller to another.

Cons 1. As data in controllers is available in multiple views so it is very difficult to maintain the data because the data is obviously bound to views and there will be many implicit angular watches on the same data. That will give bad performance.

Now answering your point 1 and 2 of using ng-init to intialize data in controller. I don't think that will be a good approach because you have made the initialization dependent on the view. Lets take a scenario in which your view is not found on request and then the initialization won't occur. And as initialization won't occur, there will be garbage values / bugs in controller. So its better to separate the controller initialization from view.

Answer to point 3 is that when you are using a separate controller for every view, you are actually avoiding monolithic code approach and that is always a good point because that leads to modular approach. Separation of concerns in Angular JS is not just done using separate controller for every view but services and directives are also for this purpose in the long run.

Hope that helps you in some way.