i have recently started a project and using webpack as build tool.
angular.module('app')
.controller('appController', require('./src/appController'));
and my appcontroller.js looks like
'use strict';
var appController = function($scope){
$scope.name = 'hello';
};
appController.$inject(['$scope']);
module.exports = appController;
bundel is being formed at desired location, problem is when i use the function.$inject for dependency injection, as i want my code to get uglify, i gets browser error when i runs my app
appController.$inject is not a function
This is first time i'm experiencing the error as i'm using webpack?
$inject is not a function, it's property. It should be:
appController.$inject = ['$scope'];
Related
I'm trying to inject my factory into my controller and I'm getting this error from AngularJS:
Error: $injector:unpr Unknown Provider
I have looked through almost all of the questions on here and still cannot find a solution to my problem. I believe my controller and factory and declared correctly and the injection is correct but it looks like this isn't the case.
My factory code is as follows:
var app = angular.module('test', []);
app.factory('processingFactory', function () {
var factory = {};
factory.newTest = function() {
console.log("TEST");
}
return factory;
});
This is then injected into the controller which looks like this:
angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']).controller("dashboardController", [
"$scope",
"$timeout",
"$http",
"$window",
"$interval",
"$resource",
"ModalService",
"$filter",
'$q',
'processingFactory',
function($scope, $timeout, $http, $window, $interval, $resource,
ModalService, $filter, $q, processingFactory) {
//other code removed
$scope.newWorkorder = processingFactory.newWorkorder;
}
]);
This function is called through a button click on the web page. All of the files needed are in script tags on this html page. I am fairly new to angular so this could be a simple error or something I am not aware of.
Calling angular.module with an array as the second argument declares a module, which can only happen for any given module name. You are declaring the module twice (once in your controller code, and again in your factory code).
Try changing the first part of your factory code to:
var app = angular.module('test');
If you are doing the same thing elsewhere in the app you will need to remove the second argument there too, so that there is only one module declaration in the whole app.
if there are any dependencies for your module "test" why do not you have them declared in the first line itself like:
var app = angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']);
Then declare your controller like::
app.controler(...)
Things should work fine.
I'm making this very preliminary attempt of using node/npm/browserify to build my angular app. The ./app/controllers, ./app/directives, ./app/services basically have index.js files which in turn require() the js files! Below is the root js file i.e. public/index.js.
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
var app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
module.exports = app;
Now after running below command i do get a bundle.js however,
browserify public/index.js -o release/bundle.js
However, the below line in bundle.js throws the error "Uncaught ReferenceError: app is not defined"
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js. Could someone suggest how i could make this work?
----- Adding some more info ------
app/controllers/index.js contains below code:-
require('./MainCtrl.js')
require('./MovieCtrl.js')
require('./SceneCtrl.js')
And MainCtrl.js contains below code:-
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
//...
})
I don't know where the line in your code is... it isn't clear from the question, but anyway:
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js.
That assumption is false. You will need to pass in a reference to whatever you need when you instantiate whatever you included.
For example..
var mainCtrl = new MainCtrl(app);
Ok, so i kind of understood what was going on. var app is local and cannot be accessible anywhere else. Once i set app to the global scope (which is obviously a horrible thing!) and required files after declaring app, it worked. This is mostly not the correct way of doing it, but as i mentioned this was a very preliminary attempt.
app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
Whenever I do this:
app.controller('hangmanController', ['$scope', 'wordnickAPIService', function ($scope, wordnickAPIService) {
I get this:
[$injector:unpr] Unknown provider: wordnickAPIServiceProvider <- wordnickAPIService
I read through This discussion on the topic, but didn't see an answer that applied. I am sure it is something simple or trivial that I am missing, but, jeez, if Angular isn't giving me fits trying to piece it all together.
Relevant HTML:
<body ng-app="angularHangmanApp" ng-controller="hangmanController">
My controller:
'use strict';
var app = angular.module('angularHangmanApp', []);
app.controller('hangmanController', ['$scope', 'wordnickAPIService', function ($scope, wordnickAPIService) {
[...]variable declarations[...]
var wordListURL = 'http://long_url_that_returns_some_json';
$scope.wordList = wordnickAPIService.get(wordListURL);
}]);
My factory:
'use strict';
var app = angular.module('angularHangmanApp', []);
app.factory('wordnickAPIService', ['$http', function($http) {
return {
get: function(url) {
return $http.get(url);
},
post: function(url) {
return $http.post(url);
},
};
}]);
The problem is that you are creating multiple modules with the same name.
To create a module in angular you use:
var app = angular.module('angularHangmanApp', []);
Then to get That module somewhere else you just type:
var app = angular.module('angularHangmanApp');
No extra []...
Also make sure you declare the service before trying to call it.
In your factory and your controller, you are actually redefining the app module.
Instead of saying
var app = angular.module('angularHangmanApp', []);
say
var app = angular.module('angularHangmanApp');
Use the first style of invocation only once in your application (maybe just app.js). All other references should use the second style invocation, otherwise, you're constantly redefining the angular app and losing all of the controllers, factories, directives declared previously.
'use strict';
var trkiApp = angular.module('trkiApp', [
'trkiApp.tStatus',
'trkiApp.feed'
]);
var tStatus = angular.module('trkiApp.tStatus', [])
.factory('Status', ['$q']);
var feed = angular.module('trkiApp.feed', []);
And now i dont understand how is possible that i can access the service Status which is defined on another module?
'use strict';
feed
.controller('FeedController', ['$scope','$http','Status']);
I should not right? But somehow i am...or is that a correct behaviour?
A Module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. Modules can list other modules as their dependencies. Depending on a module implies that required module needs to be loaded before the requiring module is loaded.
var myModule = angular.module('myModule', ['module1','module2']);
When you injected your module, the services got registered during the configuration phase and you could access them, so to make a long story short, it's the correct behavior and the core fundamentals of dependency injection in Angular.
For example
angular.module('module1').service('appservice', function(appservice) {
var serviceCall = $http.post('api/getUser()',"Role");
});
So how it can be accessed using angular.module('myModule');
angular.module('myModule').controller('appservice', function(appservice)
{
var Servicedata= appservice.ServiceCall('role');
}
This how it can be accessed. If anyone has another suggestion please say so.
after made some changes
html should look like:
<body ng-app="myModule" ng-controller="appservices"></body>
Above section of code used to bootstrap your angular module
angular should look like:
var myModule = angular.module('myModule', ['module1','module2']);
myModule.controller("appservices",["$scope","mod1factory","mod2factory",function($scope,mod1factory,mod2factory){
console.log(mod1factory.getData()) ;
console.log(mod2factory.getData()) ;
}]);
var mod1 = angular.module('module1',[]);
mod1.factory("mod1factory",function(){
var mod1result = {};
mod1result = {
getData: function(){
return "calling module 1 result";
}
}
return mod1result;
});
var mod2 = angular.module('module2',[]);
mod2.factory("mod2factory",function(){
var mod2result = {};
mod2result = {
getData: function(){
return "calling module 2 result";
}
}
return mod2result;
});
Explanation: created a main module myModule and inject other modules(in my case module1 and module2) as dependency so by this you can access both the module inside the main module and share the data between them
console.log(mod1factory.getData()) ;
console.log(mod2factory.getData()) ;
created two factory and inject it in my controller mod1factory and mod12factory in my case .
so mod1 & mod2 are both differnt modules but can share info. inside main controller myModule
I had a similar issue when trying to inject dependencies from another module. Alex's answer didn't work for me. I was getting a circular dependencies error.
To fix it, make sure you are including all the module-specific JavaScript before. For example moduleA was defined in another JS file.
var app = angular.module('plunker', ['moduleA']);
app.controller('MainCtrl', function($scope, MainService) {
$scope.name = 'World';
$scope.hello = MainService.hello();
});
Working example Plunker
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