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;
}]);
Related
So I know that I need to use [] to secure my code before minification. For example:
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'HOORAY!';
}]);
But how to do that when I am not using app as global variable, I've got
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', Controller);
function Controller($scope, authService) {
var vm = $scope;
vm.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}
})();
How to prevent it from problems during minification?
The same way:
.controller('loginCtrl', ['$scope', 'authService', Controller]);
I strongly advise you to use ng-annotate, which allows using the simple syntax, and transforms it into minifiable code for you. That will make your code simpler, easier to read, and avoid a whole lot of bugs.
When a controller or a service is a named function like in code above, it looks best when it's annotated with $inject (see John Papa style guide).
angular
.module('app')
.controller('loginCtrl', Controller);
Controller.$inject = ['$scope', 'authService'];
function Controller($scope, authService) {...}
Hoisting allows to place the annotation right above injectable function.
I believe it should be the same way:
(function () {
'use strict';
angular
.module('app')
.controller('loginCtrl', ['$scope', 'authService', function($scope, authService) {
$scope.login = function(login_field, password_field) {
var loginData = {
login: login_field,
password: password_field
};
authService.login(loginData);
};
}]);
})();
One way you may try grunt-ngmin before the minification that will searches and replace the minification with minify-friendly code. Go to this link you will see example https://github.com/btford/grunt-ngmin#example
everyone.
I have a really strange (for me) problem here. I am trying to inject the $q lib in one of my controllers and when I try to console.log() it, it returns "undefined". I am injecting the same library in one of my services, and it's working there! Let me show you:
The service:
(function() { 'use strict';
angular
.module('app.grid')
.factory('GridData', GridData);
GridData.$inject = ['$http', '$q'];
function GridData($http, $q) {
...
The controller (not working):
(function() {
'use strict';
angular
.module('app.grid')
.controller('GridCtrl', GridCtrl);
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$q'];
function GridCtrl($log, $scope, GridData, $rootScope, $q) {
console.log($q); // Returns "undefined"
...
I wonder if any of you guys had had this same problem before? It's probably something real stupid, like it always is, but I can't see it for some reason :(
Cheers,
H
You need to add the $rootScope to your $inject array:
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$rootScope', '$q'];
Or remove it from the argument list if it's not needed:
function GridCtrl($log, $scope, GridData, $q) {
You have one too many arguments:
GridCtrl.$inject = ['$log', '$scope', 'GridData', '$q'];
function GridCtrl($log, $scope, GridData, $rootScope, $q) {
// ^
}
You're not injecting $rootScope. The $q service will be available inside your controller, it will just be referred to by $rootScope instead of $q. Remove that and it should work! Alternatively, add '$rootScope to the dependency array.
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 using an interceptor to add JWT tokens to my http calls. My code works fine like this:
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
But if I wrap that in an IIFE, then I get an Unknown Provider error:
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
Am I not allowed to use the IIFE?
EDIT: here are some more details
The error message is this one: http://errors.angularjs.org/1.3.8/$injector/unpr?p0=authInterceptorServiceProvider%20%3C-%20authInterceptorService%20%3C-%20%24http%20%3C-%20%24templateFactory%20%3C-%20%24view%20%3C-%20%24state
The source code is available here:
https://github.com/capesean/JWTKickStart/tree/master/JWTKickStart.APP/app
try to inject like this :
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService",["$injector","$q","$timeout" authInterceptorService]);
function authInterceptorService($injector, $q, $timeout) {
// your code
}
I have simple module with controller and factory. I want to use factory within my controller.
So I should add the name of factory within my function() of controller. Adding this, so my controller doesnt work anymore (blank page, no errors)
var app = angular.module('main', ['ngAnimate'])
app.factory('Socket', function($scope) { ... });
My controller works if:
app.controller('DemoCtrl', function($scope, $http, $filter, ngTableParams, $timeout) {...});
My controller does not work if:
app.controller('DemoCtrl', function($scope, $http, $filter, ngTableParams, $timeout, Socket) {...});
Can anyone help me on this?
You can't insert $scope into a service in angular, because it has no meaning in the context of services. $scope is for controllers only, so remove the $scope dependency from your service:
app.factory('Socket', function() { ... });