将单个Angular Controller拆分为多个JS文件

Question

am trying to create an application with Angularjs for our financial client. They need the whole application in one single page. I am convincing them to use tabs at least. But the actual problem is the application has almost 2000 fields and half of them are calculated based on the input and some numbers from the database.

I have segregated the application using few controllers. But still each controller will be humongous given all the calculations.

1. Is there a way to split a single Controller into multiple JS files?
2. We have developed similar application for the same client using KnockoutJS. Which was fairly easy with observables and Computed features from KO. Or is it a better idea to stay with KO ? Imagining doing all the calculation across Controllers seems to be very difficult.

Please suggest.

Answer 1

Angular isn't bad by design, but it is prone to be misused. The fact that Angular doesn't suggest anything for models or inheritance (you're on your own with JS prototypes, and POJO, and extend or copy for mixins) doesn't help at all.

If you have the background with modern MVC frameworks in OOP languages, you're probably familiar with 'thin controllers, fat models' conception. In Angular case it is 'thin controllers, fat services' (it isn't MVC but MVW framework after all).

If you're about to detach some functions into separate object (file?), then it is ready-to-go service (most likely factory ). Think of Angular services as of usual objects (models, utility classes, asynchronous services, whatever) that fit DI pattern.

It is quite amusing to see how Angular good practices developed in the last couple of years. One of them is using the controller for the sole thing where they shine - getting the data from services and putting it into scope, and using $scope.$... functions, it helps to avoid scope soup .

Another recent conception (influenced by web components) I'm fond of is replacing controllers ( ng-controller is itself a directive, which offers you nothing but controller, hence the name) with directives. The latter may provide higher level of encapsulation (via isolate scope) and controller interoperation (with require ).

It have taken some time for me to figure it out, but if you have to struggle with Angular, you're probably doing something wrong.

Answer 2

The short answer is no . Your controller must be defined as a single function.

However you should break the logic in the controller into separate services. In fact the controller should have very little logic in it. All data you need to share with other controllers and directive should be stored within the services you create. Separate directives and controllers would use the services to update the get the values they need.

Also note that if you have anything in the controller that is manipulating the DOM all of that logic should be in a directive.