CODEWITHSUNDEEP
angularjs
maxime1992
maxime1992

Reputation: 23813

AngularJS, load module

First of all, i'm discovering AngularJS. I read many courses about it but i'm far from being familiar with it.

I have a project, were i cannot modify the previous declarations. I want to add wysiwyg into the project.

I have to create an other controller using the existant module. I know that if i redefine the module, previous will be lost.

I thought this would be good : 

angular.module('demo')
  .controller('WysiwygCtrl', ['colorpicker.module', 'wysiwyg.module', function($scope) {
    $scope.data = {
      text: "hello"
    }
}]);

But it doesn't work.

In fact, the easiest way would be : 

angular.module('demo', ['colorpicker.module', 'wysiwyg.module'])
  .controller('WysiwygCtrl', function($scope) {
    $scope.data = {
      text: "hello"
    }
});

But it creates a new module and i loose previous one ...

How can i do to make it works ? If you need more code i can edit my question just ask but i think the module/controller is the most important part.

Thanks for you help, i'm facing this problem since this morning.

EDIT1 : The wysiwyg library is hosted on github here https://github.com/TerryMooreII/angular-wysiwyg

EDIT2 : Right now, nothing is displayed because i have the following error : Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=colorpicker.moduleProvider%20%3C-%20colorpicker.module

Upvotes: 0

Views: 4545

Answers (3)

Raulucco
Raulucco

Reputation: 3426

If you use the array notation when creating components as controllers or directives, then the parameters on the main function or module should match. As i see that you use 

.controller('WysiwygCtrl', ['colorpicker.module', 'wysiwyg.module',   function($scope) {
$scope.data = {
  text: "hello"
}

you maybe want to say

.controller('WysiwygCtrl', ['$scope', 'colorpicker.module', 'wysiwyg.module', function($scope) {
$scope.data = {
  text: "hello"
}

Upvotes: 0

mindparse
mindparse

Reputation: 7315

Plus I think you need to be passing in references to them modules in the function

.controller('WysiwygCtrl', ['$scope', 'colorpicker.module', 'wysiwyg.module', function($scope, colorpickermodule, wysiwygmodule) {
    $scope.data = {
      text: "hello"
    }
}

Upvotes: 1

dark_ruby
dark_ruby

Reputation: 7874

angular.module('moduleName', ['dep1', 'dep2']) - creates a module, that has dependencies listed in a second parameter, this signature also returns newly created module, you HAVE to specify list of dependencies, even if it's just an empty array []. This also overwrites any existing modules by the same name.

angular.module('moduleName') - returns a module created earlier in your code, hence the absence of dependency list in the signature - this also returns a module.

both signatures allow you to add controllers, services, etc..

Upvotes: 2

Related Questions