I am trying to inject ionic history in my Ionic Project and I am getting this error
Error: [$injector:unpr] http://errors.angularjs.org/1.2.14/$injector/unpr?p0=%24ionicHistoryProvider%20%3C-%20%24ionicHistory
This is my complete controller code
.controller('menu', ['$scope', '$state', '$ionicHistory', function($scope,$state,$ionicHistory) { //first menu
var user = JSON.parse(localStorage.getItem("user"));
$scope.gotoUser = function(){
localStorage.removeItem("selectedName");
localStorage.setItem("selectedName",username);
$state.go("Page");
};
$scope.gotoLogouts = function() {
// localStorage.clear();
$ionicHistory.clearHistory();
//localStorage.removeItem('user');
$state.go("login");
}])
Please what am doing wrong.
Are you using Cordova?
If you are, it is probably happening because you did not inject ngCordova in your module.
Like:
angular.module('anotei', ['ionic', 'ngCordova'])
my friend your problem is not in you $ionicHistory, it is in the locatStorage. you are not injecting the local storage in the controller. Just inject it and it will work.
Cheers.
Try to add the closing curly bracket } for the $scope.gotoLogouts function, just before the last line.
#Nadeem Khoury you should not inject localStorage. It is $localStorage that should be injected but he is using localStorage which should not be injected.
If this is exactly the code you are using, I am with #Ennedigi
.controller('menu', ['$scope', '$state', '$ionicHistory', function($scope,$state,$ionicHistory) { //first menu
var user = JSON.parse(localStorage.getItem("user"));
$scope.gotoUser = function(){
localStorage.removeItem("selectedName");
localStorage.setItem("selectedName",username);
$state.go("Page");
};
$scope.gotoLogouts = function() {
// localStorage.clear();
$ionicHistory.clearHistory();
//localStorage.removeItem('user');
$state.go("login");
}
}])
try to include timeout, location and windows in module
IonicModule
.factory('$ionicHistory', [
'$rootScope',
'$state',
'$location',
'$window',
'$timeout',
'$ionicViewSwitcher',
'$ionicNavViewDelegate',
function($rootScope, $state, $location, $window, $timeout, $ionicViewSwitcher, $ionicNavViewDelegate) {
#Blaze, you have to inject $localStorage in your controller like below,
.controller('menu', ['$scope', '$state', '$ionicHistory', '$localStorage' function($scope,$state,$ionicHistory,$localStorage) { //first menu
var user = JSON.parse(localStorage.getItem("user"));
$scope.gotoUser = function(){
localStorage.removeItem("selectedName");
localStorage.setItem("selectedName",username);
$state.go("Page");
};
$scope.gotoLogouts = function() {
// localStorage.clear();
$ionicHistory.clearHistory();
//localStorage.removeItem('user');
$state.go("login");
}
}])
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.
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.
I use AngualrJS for my frontend, before navigating to a page in my routes.js there is a resolve where I can initialize variables needed for controller.
Actually I need the oposite of them - if I leave a page than a method should be invoked, because I use websocket/sockjs and I will switch of the ping if chat page is leaved.
Is there any possibility to do this?
Thanks a lot!
(function() {
'use strict';
angular
.module('myProject.chat')
.controller('ChatController', ChatController);
ChatController.$inject = ['$scope', '$state', '$location', '$http', '$timeout', ...];
function ChatController($scope, $state, $location, $http, $timeout, ...) {
$scope.vm = this;
var vm = this;
vm.stompClient.subscribe('/topic/chat/' ...
There is a destroy event you can use
$scope.$on('$destroy', function(){
// do cleanup
});
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>
I'm trying to create a factory and use it cross routes in each controller but apparently I'm doing something wrong...
The app:
var app = angular.module('sam', ['ngRoute', 'ngGrid', 'ui.bootstrap']);
The factory
app.factory("User",function(){
return {};
});
The routes
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the main page which will direct to the buildings page
.when('/', {
templateUrl : 'web/pages/buildings.html',
controller : 'mainController',
controllerAs : 'buildings'
})
});
The controller
app.controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
This prints : hello!!!!! undefined
you are missing 'User' in your controller.
app.controller('mainController', ['$filter', '$http','$log', **'User',** function($filter, $http, $log, User){
$log.log('hello!!!!!', User);
}]);
You forgot to include User as part of injection array
controller('mainController', ['$filter', '$http','$log', function($filter, $http, $log, User){
Should be:
controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
app.factory("User",function(){
return {
show:function(){
alert('Factory called')
}
};
});
app.controller('mainController', ['$filter', '$http','$log','User', function($filter, $http, $log, User){
//that is the way you can call your factory
// you can call this factory function in any controller by injecting it.
User.show(); //will popup alert window.
}]);