I am creating a custom service which logs a user in to my system. In this service, I need to use core services such as $http - How do I actually depend these to be used in my service?
My current code:
.factory('loginService', ['$http', '$rootScope', function() {
var login = function(){
console.log($http);
}
return {login : login};
}])
I call the login function from a controller like so
loginService.login();
I hoped that my console will output the $http object I injected, but it's returning undefined.
How do I access this in the correct way?
You need to add the dependencies to your function arguments:
.factory('loginService', ['$http', '$rootScope', function($http, $rootScope) {
//You can use $http and $rootScope here now
}
See the official docs for more info on Dependency Injection in angular
Services you inject need to be passed as arguments of the function:
['$http', '$rootScope', function($http, $rootScope)
By the way, you'll need to do the same where you're trying to use it:
app.controller(['loginService', function (loginService) {
loginService.login();
});
try this:
var myapp = angular.module('mainApp', []);
myapp.controller('myController', ['$scope', 'myFactory', function($scope, myFactory) {
myFactory.login();
}]);
myapp.factory('myFactory', ['$http', function($http) {
var services = {};
services.login = function() {
console.log($http);
}
return services;
}]);
View:
<div ng-app='mainApp' ng-controller='myController'></div>
Related
hi all i using angular js i need to transfer the value from one page controller to another page controller and get that value into an a scope anybody help how to do this
code Page1.html
var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
function ($scope, $http, $window, $filter, $notify, $cookieStore)
{
$scope.Message="Hi welcome"
}]);
now i want to show scope message into page2 controller
var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
function ($scope, $http, $window, $filter, $notify, $cookieStore)
{
///here i want get that scope value
}]);
You can use $rootScope instead of $scope:
// do not forget to inject $rootScope as dependency
$rootScope.Message="Hi welcome";
But the best practice is using a service and share data and use it in any controller you want.
You should define a service and write getter/setter functions on this.
angular.module('app').service('msgService', function () {
var message;
this.setMsg = function (msg) {
message = msg;
};
this.getMsg = function () {
return message;
};
});
Now you should use the setMeg function in Controller1 and getMsg function in Controller2 after injecting the dependency like this.
app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
{
$scope.Message="Hi welcome"
msgService.setMsg($scope.Message);
}]);
app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
{
///here i want get that scope value
console.log('message from contoller 1 is : ', msgService.getMsg());
}]);
You should use services for it .
Services
app.factory('myService', function() {
var message= [];
return {
set: set,
get: get
}
function set(mes) {
message.push(mes)
}
function get() {
return message;
}
});
And in ctrl
ctrl1
$scope.message1= 'Hi';
myService.set($scope.message1);
ctrl2
var message = myService.get()
Sharing data from one controller to another using service
We can create a service to set and get the data between the controllers and then inject that service in the controller function where we want to use it.
Service :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Controllers :
app.controller('Controller1', ['setGetData',function(setGetData) {
// To set the data from the one controller
$scope.Message="Hi welcome";
setGetData.setData($scope.Message);
}]);
app.controller('Controller2', ['setGetData',function(setGetData) {
// To get the data from the another controller
var res = setGetData.getData();
console.log(res); // Hi welcome
}]);
Here, we can see that Controller1 is used for setting the data and Controller2 is used for getting the data. So, we can share the data from one controller to another controller like this.
I'd like to inject $ionicPlatform abstraction into the service, but seemed I'm doing this wrong way. How should I use $ionicPlatform with service?
(function () {
"use strict";
angular.module('service', []).service('BBNService', ["$ionicPlatform", function ($http, $localStorage, $ionicPlatform) {
This code making $ionicPlatform undefined.
Inject ionic dependency & Remove $http if you not using it as follows,
angular.module('service', ['ionic'])
.service('BBNService', ["$localStorage", "$ionicPlatform",
function ($localStorage, $ionicPlatform) {
}]);
It's undefined because you wrong the order. (use ionic.Platform)
Replace with this:
angular.module('service', [])
.service('BBNService', ["$http", "$localStorage",
function ($http, $localStorage) {
//use this
var $ionicPlatform = ionic.Platform;
}]);
i am trying to fetch web service api but i am not able to display
anything, i am new to angularjs please help me.
i have copied my controller and factory code which i am using.
Controller
app.controller('myController', ['$scope', 'fetchService', function($scope, fetchService){
$scope.countries = fetchService.get();
}]);
service
var app = angular.module('app',[]);
app.factory('fetchService', ['$http', function($http){
return{
get: function(){
return $http.get('api/data4.json').success(function(response){
return response.data;
});
}
}
}]);
The problem is that fetchService.get() is asynchronous (a promise returned by $http), so you have to use a .then() like so:
app.controller('myController', ['$scope', 'fetchService', function($scope, fetchService){
fetchService.get()
.then(function(response) {
$scope.countries = response;
});
}]);
I am trying to create a service to do some AJAX requests.
However, my service keeps getting undefined when I try to do something with it in my controllers. Here is my code.
I have found a lot of examples on here, and I've tried to follow a lot of them but no matter what I do my service keeps getting undefined.
My service:
MyApp.factory('myService', function($http) {
return {
findAll: function() {
return $http.get('/findAll')
.then(function(result) {
return result.data;
});
}
}
});
My Controller:
MyApp.controller('UserController', ['$scope', '$http', 'myService', function($scope, $http, $log, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
}]);
I assume I don't inject it correctly but I can't see whats wrong. I'm fairly new to Angular so..
Any pointers would be appreciated.
Remove $log from the injection. You are currently "naming" the myService service to $log and therefore myService inside the controller is undefined.
MyApp.controller('UserController', ['$scope', '$http', 'myService',
function($scope, $http, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
}]);
2nd solution
To avoid having to "name" the services like this it's acceptable to inject them without naming them.
MyApp.controller('UserController', function($scope, $http, myService) {
// Whatever I do with myService here it gets undefined.
//$scope.test = myService.findAll();
//myService.findAll();
});
Just remember to remove the closing bracket aswell.
i get the error "Unknown provider: {0}", if i try to call a service of the submodule inside the submodule
here the mainModule script
var mainApp = angular.module("mainApp", ["categoriesApp","ui.router"]);
//a service in the mainmodule which i can call with no problems in the submodule
mainApp.factory("getDataSvc", ["$http", "$q", "path", function ($http, $q, path) {
return{
...
some $http
....
}]);
and now the submodule
var categoriesApp = angular.module("categoriesApp", []);
//i can inject and use getDataSvc with no problems from the mainmodule
categoriesApp.controller("listCtrl", ["$scope", "getDataSvc", function ($scope, getDataSvc){
getDataSvc.categories().then(function(data){
...
})
}])
//my service in the submodule
categoriesApp.factory("sharedDataSvc", ["$scope", function ($scope){
return{
getValue: function(){
return "oioioioi";
}
}
}])
//in this line i get the error, if i try to inject the sharedDataSvc
//if i dont inject it, i get no errors, but cant use the service ;)
categoriesApp.controller("addBtnCrtl", ["$scope", "sharedDataSvc", function ($scope, sharedDataSvc){
console.log(sharedDataSvc.getValue());
}])
hope somebody can tell me what i`m doing wrong ;)
The problem is with sharedDataSvc factory
You cannot inject $scope to a factory because $scope is not a registered provider.
$scope is only injected to controllers ( within a locals object ).
categoriesApp.factory("sharedDataSvc", [ function (){
return{
getValue: function(){
return "oioioioi";
}
}
}])
each controller may be instantiated multiple time ( with each instance $scope is a different scope)
each service is instantiated only once and then cached ( the same instance injected everywhere)