Is it possible to link an external javascript file with an AngularJS controller?

Question

This may be a dumb question. I know that AngularJS controllers use javascript code to keep application logic out of view. But I was wondering if I can link the external javascript file to the controller so that it is not so long.

If possible, you also share the syntax of how I do this. Sort of:

app.controller('demoCtrl', ['$scope', function ($scope) { $scope.msgtxt='Hello World'; src=somejavascriptfile.js; }]); 

Answer 1

If your problem is that the logic of the controller is too long, you are right that this is the smell of code. You want to make the controller as thin as possible, enough logic to handle viewing events and updating the model (area). If you want to reorganize your controller code, the first step is to extract the logic into the services (in angular lingo providers / factory / services). Services can then be injected into your controller, just as you introduced the $scope service.

For more information on how to do this, read this article on the site .

The next step may be to look for logic (mainly related to the UI) that can be extracted into directives.

If you need to use the external javascript library in your angular application, the best way is to add this script to the script section of your html file and transfer the functionality to the service or directive (if it is associated with the user interface). Be sure to check if angular modules are available for the third-party library you want to pull into.

Answer 2

Not only can you split your controller code between different files, but you probably should do it. The angular controller is responsible for the business logic for the presentation, and just for that. You do it wrong if you are inside the controller (the list is not exhaustive):

• access to your server from it
• DOM manipulation
• utility code for displaying warnings in the application (for example)

Your components must be concise and have a single responsibility .

The following is an example of how you export part of the code to a service. You do not link the js file to the controller, but upload it to your page and enter the service as an argument to your controller:


1) Download your service in index.html:

 <script src="js/factories/loggerService.js"></script> 

2) Deploy your service in loggerService.js

 app.factories('loggerService', function () { // // Implement here some logging methods // // IMPORTANT: do not bloat this service with methods not related // with logging // }); 

3) Add your service to the controller:

 app.controller('demoCtrl', function ($scope, loggerService) { loggerService.info(...) }); 

By the way, this loggerService would be useful only if you need something other than the service provided by angular's built-in $log service

Answer 3

In another file, define the service containing the logic, and simply call it from the controller.

 app.controller('demoCtrl', ['$scope', function (ServiceFromDifferentFile, $scope) { $scope.msgtxt='Hello World'; ServiceFromDifferentFile.doStuff() }]);