I'm new to Angularjs. The following is working:
var kk = angular.module('app').factory('VendorService', Service);
The following is not working:
var kk = angular.module('app', ['ngResource']).factory('VendorService', Service);
Can anyone help me? thanks a ton!
Injecting external dependencies is required on main Angular module declaration.
angular.module('yourApp', ['ngRoute']);
When declaring a new controler/resource/factory or other, you don't have to inject external dependencies.
angular.module('yourApp').factory('Service', Service);
Related
im completely new to angularJS, below is the minimal example of my issue:
myModule.module.js:
(function () {
'use strict';
angular
.module('myModule', [
'myServices',
'myControllers'
]);
angular
.module('myServices', []);
angular
.module('myControllers', []);
})();
myService.service.js
(function () {
'use strict';
angular
.module('myModule')
.factory('myServices', myServices);
function myServices() {
var service = {};
return service;
}
})()
myController.js:
(function () {
"use strict";
angular
.module("myModule")
.controller("myController", myController);
myController.$inject = ['myServices']
myController(myServices) {
/* use myServices */
}
})()
I think I accomplished all things needed to make service available to controller but I'm still getting unresolved provider error...
I'm coming from strong Angular2+ background and maybe some common potfall I'm unaware of? Does the tile names os services must match their angular name or something similar?
Any help is appreciated.
Oh yeah, Angular2+ experience strikes on this one. Basically I was absolutely unaware about managing scripts in main.html (or whatever entry point for app is). So basically I was dumb enough not tu supply my main.html with specified script file.
So, assuming that my usecase was to add just another service to already working myModule, then
<script src="path/to/myService.js"></script>
Hope this will help someday some other dev lost in AngularJS :)
Cheers
What am I doing wrong to get started with an angular codepen?
https://codepen.io/TylerL-uxai/pen/mwqNLW
(function () {
'use strict';
angular
.module('timeOff')
.controller('TimeOffController', TimeOffController);
TimeOffController.$inject = ['$scope'];
function TimeOffController($scope) {
You need to pass empty dependency array to your module,
angular.module('timeOff',[])
WORKING CODEPEN
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'];
I'm pretty new to Angular, could some one please help me in resolving my basic query?
I have the below code:
var a = angular.module('myApp', [
'ui.router',
'moduleName1',
'moduleName2'
]).config(...........)
Is it possible to separate the dependency array into an isolated file and refer it like below:
angular.module('myApp', [
../fileName.js
])
You can do this way:
include your js file before angular module declared
<script src="myFile.js"></script>
Your myFile.js content is
var myArray = ['ui.router', 'moduleName1', 'moduleName2'];
and you angular app declaration is:
angular.module('myApp',
myArray)
'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