CODEWITHSUNDEEP
javascriptangularjs
Jared Whipple
Jared Whipple

Reputation: 1171

Can I link an external javascript file to an AngularJS controller?

This may be a dumb question. I know AngularJS controllers use javascript code to keep the application logic outside of the view. But I was wondering if I could link an external javascript file to a controller so it didn't have to be so long.

If it is possible would you also share the syntax of how I would do this. Something like:

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

Upvotes: 10

Views: 41060

Answers (3)

Michel
Michel

Reputation: 28359

Not only you can split your controller code among different files, but you probably should do that. An angular controller is responsible for the business logic behind a view, and only for that. You are doing it wrong if, inside the controller, you are (list not exhaustive) :

  • accessing your backend from it
  • manipulating the DOM
  • writing utility code for showing alerts in your application (for example)

Your components should be concise and of a single responsibility.

Here follows an example of how you would export some part of your code in a service. You do not link a js file from a controller, but you load it in your page, and inject the service as an argument of your controller :


1) Load your service in index.html : 

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


2) Implement 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) Inject your service in your controller :

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

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

Upvotes: 5

Scorpion-Prince
Scorpion-Prince

Reputation: 3634

If your issue is that the controller logic is too long, you are correct that it is a code smell. You want to make the controller as thin as possible, just enough logic to handle the view events and updating the model (scope). If you want to refactor your controller code, the first step is to extract out the logic into service(s) (in angular lingo providers / factories / services). The services can then be injected into your controller, similar to how you have injected the $scope service.

Read this sitepoint article for details on how to do this.

The next step might be look for logic (mainly UI related) which can extracted into directives.

In case you need to use an external javascript library within your angular application, the optimal way is to add that script to the scripts section of your html file, and wrap the functionality in a service or a directive (if it is UI related). Make sure to check if there are angular modules available out there for the 3rd party library you want to pull in.

Upvotes: 6

vvondra
vvondra

Reputation: 3162

In a different file, define a service containing the logic and just call it from the controller.

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

Upvotes: 2

Related Questions