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
Related
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
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'm trying to use cookies ( set and retrieve), I have this code copies from a site and changed it, but I wouldn't work and all my angular parts stop working.
This is a sample of angular website
can you tell me where the problem is?
var app = angular.module('test', ['ui.bootstrap'], ['ngCookies']);
app.controller('ExampleController', ['$cookieStore', function ($scope, $cookieStore) {
// Put cookie
$cookieStore.put('myFavorite', 'oatmeal');
// Get cookie
$scope.itemValue = $cookieStore.get('myFavorite');
// Removing a cookie
//$cookieStore.remove('myFavorite');
}]);
and usage is :
<span ng-controller="ExampleController">{{itemValue}}</span>
it gives me this error
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.5/$injector/modulerr?......
You're declaring your module wrong, the second parameter should be an array of dependencies, but you're passing each dependency as it's own separate array. It should be:
var app = angular.module('test', ['ui.bootstrap', 'ngCookies']);
You're using a "minification safe" array for your controller, but you're only including $cookieStore, not $scope, it should be:
app.controller('ExampleController', ['$scope', '$cookieStore', function ($scope, $cookieStore) {
...
}]);
Your syntax is incorrect, go through the docs to find the correct syntax for angular.
In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.
am I missing anything...
Markup
<div ng-controller="MainCtrl">
<div ng-controller="SummaryCtrl">{{name}}</div>
<div ng-controller="SearchCtrl"></div>
</div>
MaintCtrl.js
define(['tabs/module'], function (module) {
'use strict';
module.controller('MainCtrl', ['$scope', function ($scope) {
//some code;
}]);
function BaseCtrl($scope) {
$scope.name="test";
}
});
SummaryCtrl.js
define(['tabs/summary/module'], function (module) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
It looks to me like you're using this code as your example:
Angular: Extending controller
I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it
EG
<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>
EDIT:
Your issue could be with RequirejJS
Have a look at
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.
EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'
Try adding this to summary:
define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
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.