How to inject factory to controller? - angularjs

Hi I am new to angularjs and I am trying to inject some factory to controller but I am facing difficulties. My factory works fine. I am able to set data in factory.
Below is my code where I inject factory.
function () {
angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'SomeFactory',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, CONSTANTS, SomeFactory) {
var OTP = $stateParams.pageList.OTP;
$scope.EnterOTP = "Please enter this OTP to verify the user " + OTP;
//RegistrationOTPVerification.$inject = ['SomeFactory'];
//Facing issues in above line
alert(1);
function RegistrationOTPVerification(SomeFactory) {
var vm = this;
vm.someVariable = SomeFactory.getData();
console.log(vm.someVariable); // logs your data
alert(vm.someVariable);
}
});
This is my factory code.
(function () {
'use strict';
angular
.module('RoslpApp')
.factory('SomeFactory', SomeFactory);
SomeFactory.$inject = [];
function SomeFactory() {
var someData;
var factory = {
setData: setData,
getData: getData
};
function setData(data) {
someData = data;
}
function getData() {
return someData;
}
return factory;
}
})();
I set data in some other controller with SomeFactory.setData("123")
I want to inject someFactory as below:
RegistrationOTPVerification.$inject = ['SomeFactory'];
But whenever I write this, I get error RegistrationOTPVerification is undefined. If I comment that line everything works fine but I want to get some data from factory.
My factory name is SomeFactory and I want to inject in above controller. Any help would be appreciated.

Firstly, you missed CONSTANTS in your injections.
Next, I think you are mixing two kinds of syntax for controller here. Either use anonymous function or named. Don't mix both together.
Here's how your code should look like.
function () {
angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'SomeFactory',
function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, SomeFactory) {
var vm = this;
var OTP = $stateParams.pageList.OTP;
vm.EnterOTP = "Please enter this OTP to verify the user " + OTP;
vm.someVariable = SomeFactory.getData();
console.log(vm.someVariable); // logs your data
alert(vm.someVariable);
});

You missed CONSTANTS in controller dependency list:
'$translate', '$state', '$stateParams', 'SomeFactory',
... $translate, $state, $stateParams, CONSTANTS, SomeFactory) {
So whatever you inject SomeFactory is available in controller under the name CONSTANTS and symbol SomeFactory is undefined.

Related

how to passing data from one controller to another controller using angular js 1

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.

TypeError: $http.get is not a function in Angular JS

I am trying to use Angular Service and since $scope can not be injected inside service so using $rootScope. My code look like fine but getting following error-
TypeError: $http.get is not a function
Here is code-
EmployeeService.js:
///
app.factory('fetchEmpService', ['$rootScope', '$http', function ($http, $rootScope) {
var employees = [];
return {
fetchEmp: function () {
debugger;
return $http.get("EmpWebService.asmx/GetEmp")
.then(function (response) {
employees = response.data;
$rootScope.$broadcast('allEmployees', employees);
return employees;
});
}
};
}]);
In my controller I am trying to consume it like below:
$scope.employees = fetchEmpService.fetchEmp();
$scope.$on('allEmployees', function (events, employees) {
$scope.employees = employees;
});
I am bit confuse that will the data will come inside $scope.$on
Your parameters and array of injectables are in a different order.
This:
app.factory('fetchEmpService', ['$rootScope', '$http', function ($http, $rootScope)
Needs to be
app.factory('fetchEmpService', ['$rootScope', '$http', function ($rootScope, $http)
The order is important and needs to be the same.
More information on dependency injection.

AngularJS Service not acting as Singleton

Apologies for the code heavy post but I wanted to provide as much context as possible. I am having an issue with defining a service in my Angular.js application. Services are supposed to act as singletons throughout an application (source), so I am very confused to be getting the following behavior.
In my app.js file, I run my AmplitudeService Service and console.log(AmplitudeService). This outputs an object with all of the methods that I have defined within my AmplitudeService.js file. As such, I am able to properly use the service and log events as expected.
However, when I console.log(AmplitudeService) within my header.js, it outputs my Window object. As such, the Window does not contain functions such as "logEvent", "identifyUser", etc., so AmplitudeService is not usable in that case.
Would appreciate any and all insight!
AmplitudeService.js (source)
Note: If you check the author's syntax, he returns an object at the end of his service. In my research, I've read to use the "this" keyword when defining Service functions (source), and that you don't need to return an object as you would with a Factory, so I have updated it accordingly.
angular.module('AmplitudeService', [])
.service('AmplitudeService',
['$amplitude', '$rootScope', 'amplitudeApiKey', '$location',
function ($amplitude, $rootScope, amplitudeApiKey, $location) {
this.init = function() {
$amplitude.init(amplitudeApiKey, null);
$amplitude.logEvent('LAUNCHED_SITE', {page: $location.$$path});
}
this.identifyUser = function(userId, userProperties) {
$amplitude.setUserId(userId);
$amplitude.setUserProperties(userProperties);
}
this.logEvent = function(eventName, params) {
$amplitude.logEvent(eventName, params);
}
}]);
angular-amplitude.js (source)
This allows access to "$amplitude" throughout the application
(function(){
var module = angular.module('angular-amplitude', ['ng']);
module.provider('$amplitude', [function $amplitudeProvider() {
this.$get = ['$window', function($window) {
(function(e,t){
var r = e.amplitude || {};
var n = t.createElement("script");
n.type = "text/javascript";
n.async = true;
n.src = "https://d24n15hnbwhuhn.buttfront.net/libs/amplitude-2.2.0-min.gz.js";
var s = t.getElementsByTagName("script")[0];
s.parentNode.insertBefore(n,s);
r._q = [];
function a(e){
r[e] = function(){
r._q.push([e].concat(Array.prototype.slice.call(arguments,0)));
}
}
var i = ["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties"];
for(var o = 0; o < i.length; o++){
a(i[o])
}
e.amplitude = r
}
)(window,document);
return $window.amplitude;
}];
}]);
return module;
}());
App.js
angular.module('app', [
'ngRoute',
'angular-amplitude',
'AmplitudeService',
])
.run(['AmplitudeService', function(AmplitudeService){
console.log(AmplitudeService); // Outputs 'Object {}'
AmplitudeService.init();
AmplitudeService.logEvent('LAUNCHED_SITE');
console.log(AmplitudeService); // Outputs 'Object {}'
}])
Header.js
angular.module('app.common.header', [])
.controller('HeaderCtrl', [ '$rootScope', '$scope', '$location', '$scope', '$route', '$window', 'AmplitudeService', function($rootScope, $scope, $location, $route, $window, AmplitudeService){
$scope.goToSearch = function(term) {
$location.path('/search/' + term);
console.log(AmplitudeService); // Outputs 'Window {}'
};
}]);
Looks like you are injecting $scope in your controller, causing the unexpected mapping of the variable
angular.module('app.common.header', [])
.controller('HeaderCtrl', [ '$rootScope', '$scope', '$location', **'$scope'**, '$route', '$window', 'AmplitudeService', function($rootScope, $scope, $location, $route, $window, AmplitudeService){
$scope.goToSearch = function(term) {
$location.path('/search/' + term);
console.log(AmplitudeService); // Outputs 'Window {}'
};
}]);
as an aside if find this format far easier to read / work with when defining controllers
angular
.module('app.common.header', [])
.controller('HeaderCtrl', headerController);
headerController.$inject = [ '$rootScope', '$scope', '$location', '$route', '$window', 'AmplitudeService']
function headerController($rootScope, $scope, $location, $route, $window, AmplitudeService){
$scope.goToSearch = function(term) {
$location.path('/search/' + term);
console.log(AmplitudeService); // Outputs 'Window {}'
};
}

angular, factory Error: AuthFactory.getUserInfo is not a function

i'm a new in Angular. I try create factory but got an Error: AuthFactory.getUserInfo is not a function. Could somebody help me?
My Code:
auth.factory.js:
angular.module('tsg').factory('AuthFactory', function() {
return {
getUserInfo: function getUserInfo(){
console.log("AuthFactory.getUserInfo()");
return "userInfo";
}
};
});
header.js:
angular.module('tsg').controller('HeaderCtrl',HeaderCtrl);
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
{
AuthFactory.getUserInfo();
$scope.username = "UserName123";
$scope.date = new Date();
};
When you do a DI , their sequence really matters
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
the sequence of parameters is incorrect.
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $cookieStore, AuthFactory)
in your case AuthFactory instance inside your controller is not the factory you have written. It is the instance of $location service. You have misplaced it in the injection sequence.
When you do dependency injection follow the correct order of it as follows:
HeaderCtrl.$inject = ['$scope', '$rootScope', '$location','$cookieStore','AuthFactory'];
function HeaderCtrl($scope, $rootScope,$location,$cookieStore, AuthFactory)
now you factory will work as you expected.

When I use a service a form on my controller is not known to the scope of the service

I have the following code factory:
angular.module('common')
.factory('_g',
['$http', '$q', '$resource', '$rootScope', '$timeout', '_o', '_u',
function ($http, $q, $resource, $rootScope, $timeout, _o, _u) {
var _init = function ($scope) {
$scope.modalReset = function () {
_modalReset($scope); // << No modalForm appears on this scope
};
};
var _modalReset = function ($scope) {
$scope.modalForm.$setPristine();
};
return {
init: _init,
modalReset: _modalReset
}
In my controller I initialize the service like this at the start of the code:
_g.init($scope);
On my page I have a form:
<form class="form" name="modalForm">
<button data-ng-click="modalReset()">
Reset
</button>
From what I learned this form will be added to the scope dynamically and appear as $scope.modalForm
When my form calls $scope.modalReset it executes BUT there is no modalForm on the $scope when I check it with the debugger.
Can someone explain why this is. What it seems like is that the service is being passed the
scope at an early stage before the modalForm has been added. Is this the case and is there a
way that I can solve this problem?
First of all its not good practice to use $scope into factory/service. Services are Singletons.
This logic you can write in directive or controller.
Anyways, from your example I don't see you pass somehow $scope as argument to both methods. I would change factory to:
angular.module('common')
.factory('_g',
['$http', '$q', '$resource', '$rootScope', '$timeout', '_o', '_u',
function ($http, $q, $resource, $rootScope, $timeout, _o, _u) {
var _init = function ($scope) {
$scope.modalReset = function () {
_modalReset($scope); // << No modalForm appears on this scope
};
};
var _modalReset = function ($scope) {
$scope.modalForm.$setPristine();
};
return {
init: function ($scope) {
return _init($scope) ;
},
_modalReset: function ($scope) {
return _init($scope) ;
}
}
}]);

Resources