In my app, instead of keeping separate modules, I am using a generic module name as myApp.controllers in this module i am injecting to application. later I am adding a new controller to the existing myApp.controllers but it's not working.
what is wrong here?
here is my code :
angular.module('myApp.controllers', []);
var appModules = ['myApp.controllers']
var app = angular.module('myApp', [appModules]);
angular.module('myApp.controllers').controller('mainController', ['$scope', function($scope){
$scope.name = "World";
}])
Live Demo
You should either have:
var app = angular.module('myApp', appModules);
or
var app = angular.module('myApp', ['myApp.controllers']);
The second parameter is supposed to be an array of strings (or array of variables containing strings), you are passing it a double array when you do [appModules] as appModules is an array in itself.
EDIT: updated plunkr: http://plnkr.co/edit/hQOzV9oPCsEwqU2dUW4c?p=preview
UPDATE:
for the second issue:
you are defining the module twice.
angular.module('myApp.controllers', [])
.controller('subController', ['$scope', function($scope){
$scope.son = "Adil";
}]);
should be
angular.module('myApp.controllers')
.controller('subController', ['$scope', function($scope){
$scope.son = "Adil";
}]);
see updated plunkr http://plnkr.co/edit/xcWdAJuoN3zYKm29nIgY?p=preview
This would work. You will need to inject module name in myapp instead of var appModules.
var appModules = angular.module('myApp.controllers', []);
var app = angular.module('myApp', [ 'myApp.controllers' ]);
angular.module('myApp.controllers').controller('mainController', ['$scope', function($scope){
$scope.name = "World";
}])
Your fixed Plunker
First mistake (then you changed the Plunker):
Changed
var app = angular.module('myApp', [appModules]);
to
var app = angular.module('myApp', appModules);
Second mistake:
This is an setter: angular.module('myApp.controllers', [])
This is an getter: angular.module('myApp.controllers')
You used the setter twice.
One small comment not regarding the issue. Either I don't get what you mean with 'myApp.controllers' or you didn't get the concept of angular right.
What you are holding in your modules variable are in fact modules, not controllers.
So if you like to hold your controllers in an array (for whatever reason - I wouldn't recommend this) you can do this like that:
Plunker
Related
I have three different application files (in addition to vendor files) for my angular app loaded in this order
app.js
store.js
controller.js
The code from the different files is only visible to the others if I'm using a global variable, however, I thought if I used modules by starting each file like this
angular.module('myApp',
then I could avoid a global and have code defined in each file available to the others.
Example
if I do it this way with the global variable myApp then the storage provider is available in the controller.
var myApp = angular.module('myApp', ['LocalStorageModule'])
.config(['localStorageServiceProvider',
function(localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('my-app');
}]);
myApp.factory('myStorage',
//code ommitted
myApp.controller('MyCtrl', [$scope, 'myStorage',
function MyController($scope, myStorage){
}
]);
However, if in the three files, I instead do it this way (without the global) then I get an unknownProvider error in myCtrl
angular.module('myApp', ['LocalStorageModule'])
.config(['localStorageServiceProvider',
function(localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('my-app');
}]);
angular.module('myApp', [])
.factory('myStorage',
//code omitted
angular.module('myApp', [])
.controller('MyCtrl', [$scope, 'myStorage',
function MyController($scope, myStorage){
}
]);
Question: IN the example above, how can I make the storage from the factory available in the controller without using the global variable pattern?
You should only define module once, and use it in rest of the places. Otherwise it gets overwritten. Please remove the dependency array from module definition for factory & controller. Hope that helps.
angular.module('myApp')
.factory('myStorage',
//code omitted
angular.module('myApp')
.controller('MyCtrl', ['$scope', 'myStorage',
function ($scope, myStorage){
}
]);
Also your controller declaration is needs to be corrected as above.
The Best way to inject any service, factory etc... this way reduce Complicity...
`angular.module('myApp')
.factory('myStorage',
//code omitted
angular.module('myApp')
.controller('MyCtrl', myCtrlFun);
myCtrlFun.$inject = ['$scope', 'myStorage'];
function myCtrlFun($scope, myStorage){
}
`
I've got a very simple example of a short angularjs app that works correctly when I run it on my local server. Here is the fiddle:
http://jsfiddle.net/pkellner99/9sd6ggoq/3/
and the code is quite simple
(function () {
'use strict';
angular.module('app', []).
myApp.controller('MyController', ['$scope', function ($scope) {
$scope.myVal = 'ABCDE';
}]);
}());
I get an error regarding app not injected correctly and the expression {{ myVal }} does not evaluate.
Two things. First, you're declaring your controller as part of a different module. No module named 'myApp' exists and you have incorrect dot syntax. Change the code to this:
angular.module('app', []).
controller('MyController', ['$scope', function ($scope) {
$scope.myVal = 'ABCDE';
}]);
Then, set the JS load to 'no wrap in head' in the fiddle.
Demo
Could please explain the difference between two methods to load your controllers,service.... etc
var appModule = angular.module("myApp", []);
appModule.controller("MyController", ["$scope", ($scope)
=> new Application.Controllers.MyController($scope)]);
module todos {
'use strict';
var todomvc = angular.module('todomvc', [])
.controller('todoCtrl', TodoCtrl)
.directive('todoBlur', todoBlur)
.directive('todoFocus', todoFocus)
.service('todoStorage', TodoStorage);
}
The first method does dependency injection inline. The second method depends on $inject/constructor argument being setup properly in the controller.
Suggestion : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1
var demoApp = angular.module( 'demoApp', [] );
Why didn't the angular team simply choose to do:
var demoApp = angular.module ([]);
instead?
You don't have to if you don't want to. You can write any of the following and they're the same thing
var demoApp = angular.module('demoApp', []);
var diffApp = angular.module('demoApp', []);
angular.module('demoApp', []);
The variable you assign it to can be named whatever you want it to be, but the name you pass in to the module function is the name that angular will give it internally. That name must be the same name you use to retrieve it later. So for instance, you could do the following
angular.module('demoApp', []);
angular.module('demoApp').controller('ctrl', function(){ ... });
And that is exactly the same as doing
var myApp = angular.module('demoApp', []);
myApp.controller('ctrl', function() { ... });
When you provide the module function a second parameter, you are defining a new module. If you just provide it with a string, you are asking angular to retrieve you a module.
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
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.