AngularJS, load module

Question

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

So are you saying you want to access the wysiwyg.module within the WysiwygCtrl controller code? — mindparse
– mindparse, Commented Feb 10, 2015 at 12:29
@mindparse i don't know ... This code works : var app = angular.module('app', ['colorpicker.module', 'wysiwyg.module']) app.controller('MyCtrl', function($scope) { $scope.data = { text: "hello" } }) Now i'd like to know why mine isn't working — maxime1992
– maxime1992, Commented Feb 10, 2015 at 12:31
So what exactly is not working? Are you seeing the 'hello' appear in the wysiwyg editor? — mindparse
– mindparse, Commented Feb 10, 2015 at 12:35
You don't know? This is a really confusing question, can you share more of your codes — Andy
– Andy, Commented Feb 10, 2015 at 12:35
Ok i'm going to edit my post and give you more informations, thanks for the help — maxime1992
– maxime1992, Commented Feb 10, 2015 at 12:36

dark_ruby · Accepted Answer · 2015-02-10 12:40:51Z

2

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..

answered Feb 10, 2015 at 12:40

dark_ruby

7,8837 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

maxime1992 Over a year ago

ok, but knowing that i can't modify the module before, is there a way to add dependencies ? ['colorpicker.module', 'wysiwyg.module'] ?

dark_ruby Over a year ago

@Maxime - no, you have to specify all dependencies up front

maxime1992 Over a year ago

Damn ... The best way would have been to declare the module, save it in a var and use that var after .... but here ? It's a big mess and i'm lost

dark_ruby Over a year ago

yes, both signatures allow you to save module to a var, but you can't add more dependencies to an existing module.. and you don't need to!!

dark_ruby Over a year ago

@Maxime glad to be able to help.

|

mindparse · Accepted Answer · 2015-02-10 12:43:16Z

1

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"
    }
}

answered Feb 10, 2015 at 12:43

mindparse

7,59529 gold badges105 silver badges217 bronze badges

1 Comment

maxime1992 Over a year ago

Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=colorpicker.moduleProvider%20%3C-%20colorpicker.module

Raulucco · Accepted Answer · 2015-02-10 12:44:00Z

0

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"
}

answered Feb 10, 2015 at 12:44

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

2 Comments

maxime1992 Over a year ago

I tried to add the '$scope' but i still have an error :

Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=colorpicker.moduleProvider%20%3C-%20colorpicker.module

Raulucco Over a year ago

It seens like it can't find the colorpicker.module service. You have to make sure that you declare it before trying to inject it into another component as a dependency

Collectives™ on Stack Overflow

AngularJS, load module

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related