CODEWITHSUNDEEP
angularjs
Matthew Dolman
Matthew Dolman

Reputation: 1800

Including 3rd Party Modules in Angular App

I would like to include a couple of 3rd party Angular modules in my App. Previously I have only created simple apps that I simply use ng-app to bootstrap and put my code inside the controller.

From my understanding I should have something like this in my html:

<html ng-app"myApp">

Then my JS should look something like this:

angular.module('myApp',['thirdPartyModule1','thirdPartyModule2']);

var myCtrl = function($scope, myApp, $http){

    //my stuff
};

But when I do this I get an error:

Error: Unknown provider: myAppProvider <- myApp

Upvotes: 1

Views: 4089

Answers (1)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

You don't need to inject myApp into the controller. Your controller should be defined like this:

angular.module('myApp',['thirdPartyModule1','thirdPartyModule2']);

var myCtrl = function($scope, $http){
 //my stuff
});

to make it a little more "standard":

var myApp = angular.module('myApp',['thirdPartyModule1','thirdPartyModule2']);

myApp.controller('myCtrl', function($scope, $http){
  //my stuff
});

This way you can have a reference to your app if you like.

Now to make it compatible with minifiers/beautifiers/closure compiler:

var myApp = angular.module('myApp',['thirdPartyModule1','thirdPartyModule2']);

myApp.controller('myCtrl', ['$scope','$http', function($scope, $http){
  //my stuff
}]);

That basically makes the controller argument an array, where the first members of the array are what you're going to inject. This is because a minifier will turn the arguments into random letters like function(a,b) and angular won't know what the heck you want to inject. By passing strings in the array thy will be minified like so ['$scope','$http', function(a,b)] which is fine because the first two arguments in the array tell angular what to inject.

Upvotes: 9

Related Questions