We Keep Coding

Unable to fetch value from angular app.factory

I am trying to share variable among the controller so I am using angular's Factory. I have following code for the same:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return {bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'PredictionController'
})
});
app.controller('PredictionController', ['$scope', '$http', '$interval', function($scope, $http, $interval){
$scope.hasPermission = UserVerified;
}]);
and on HTML i am just using hasPermission.bool to set visibility of a <div>.
But the issue is angularjs is unable to identify UserVerified defined in "app.factory".
I am getting following error:
ReferenceError: UserVerified is not defined
I referred following : Share data between AngularJS controllers
Only difference I can find is, I am using dependencies which is not used in the example in the above link.

you need to inject your custom service in your controller
app.controller('PredictionController', ['$scope', '$http', '$interval','UserVerified',function($scope,$http,$interval,UserVerified) {
$scope. hasPermission = UserVerified.bool; //true
}]);
inorder to avoid breaking of your application after minification of code you can also use $inject in angularjs to inject dependecies.
app.controller("PredictionController",PredictionController);
PredictionController.$inject = [$scope','$http','$interval','UserVerified']//dependencies
function PredictionController($scope,http,interval,UserVerified){
$scope. hasPermission = UserVerified.bool; //true
}
Note: Services names will be renamed after the minification and can indulge in breaking your application

You need to do this,
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerified.bool;
}]);
You need to pass the service as a parameter to controller

You need to inject UserVerified into your controller.
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerifiedvalue.;
}]);
Plus, in UserVerified you are returning a key which is a reserved word. It will work but will create unnecessary confusion.
app.factory('UserVerified', function() {
return {value: false};
});
Here is a plunker as a demo.

How to inject dependencies to a named angular directive controller?

If I have code similar to this question on injecting another controller to a directive:
angular.module('paramApp', []);
angular.module('paramApp').controller('ParamCtrl', ['$scope', '$http', function($scope, $http) {
.
.
.
}]);
angular.module('deviceApp', ['paramApp']);
angular.module('deviceApp').directive('DeviceDirective', function () {
return {
.
.
.
controller: 'ParamCtrl'
};
});
When I minify js, the injected dependencies of $scope and $http break, how can I explicitly define the dependencies of ParamCtrl when creating DeviceDirective to prevent uncaught injector issues with bundled js?

I am very late to this question but I'll give it a shot.
The syntax is based on John Papa's Angular style guide
First you need a way to make your controller reusable. Convert it from an anonymous function to a named function and pass it to your angular app like so:
// Named controller function
ParamCtrl function($scope, $http) {
this.doStuff
}
// Bind it to your app
angular.module('paramApp').controller('ParamCtrl', ['$scope', '$http', ParamCtrl );
// While we are at it, do the same with your directive
DeviceDirective function (controlerParam) {
return {
...
controller: controlerParam
}
}
// Bind it to your app
angular.module('deviceApp', ['ParamCtrl', DeviceDirective]);
However, if you meant to pass the controller's scope to your directive refer to fiznool's post

Can't seem to inject angular-jwt into factory

I am trying to inject angular-jwt into a factory for use in auth functions, but I keep getting the error
`Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.3.15/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
return new ErrorConstructor(message);`
Here's the code:
webapp.factory('Auth', ['angular-jwt'], function($http, API_URL, $window, $location, jwtHelper ) {
Also the learning curve to angular seems sharp in this way, how am I supposed to make sense out of the error to find out why it's failing? Thanks!

Inject all the required dependency in your app module. That what you were injecting new module while declaring factory.
Code
var webapp = angular.module('myAppName',['angular-jwt']);
webapp.factory('Auth',['$http', 'API_URL', '$window', '$location', 'jwtHelper',
function($http, API_URL, $window, $location, jwtHelper ) {
//your c0de here
}]);

AngularJS : get translate key in app.js

In my application, I use the AngularJS module Pascal Precht (translate module). I come to you because I can not get in my method myApp.Run of app.js a translation key.
I can do in a controller or a view. But impossible to get it at the initialization of the project. It shows me the key, not correspondence.
Do you have a solution?
Here is my code:
var myApp = angular.module('myApp', ['ngRoute', 'ngAnimate', 'myApp.filters', 'myApp.services', 'myApp.directives', 'pascalprecht.translate']);
// Declare routeProvider
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'partials/connectView.html', controller:'ConnectController'});
$routeProvider.when('/homeView', {templateUrl:'partials/homeView.html', controller:'HomeController'});
}]);
// Declare translateProvider
myApp.config(['$translateProvider', function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'res/localization/lang-',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr_FR');
//$translateProvider.preferredLanguage('en_US');
}]);
// Declare Global variables
myApp.run(['$rootScope', '$filter', function($rootScope, $filter) {
$rootScope.list = false;
etc....
//I'm trying to get translate Key but it doesn't work
console.log($filter('translate')('MY_KEY'));
}]);
My AngularJS version is 1.2.16 (last stable version). Thx

Try injecting the $translate service in app.run().
angular-translate version 1.1.1 and below
myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
$log.debug($translate('MY_KEY'));
}]);
I'd also suggest you to upgrade to the latest version of Pascal Precht's angular-translate. There are some changes in the new version.
angular-translate version 2.0.0 and above
myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
// translate via promises (recommended way)
$translate(['MY_KEY', 'MY_OTHER_KEY'])
.then(function (translation) {
$log.debug(translation.MY_KEY);
});
// translate instantly from the internal state of loaded translation
$log.debug($translate.instant('MY_KEY'));
}]);
See this helpful migration guide.

Why don't you inject the $translate service in the run section
and then call it instead of using the filter?!
console.log($translate('MY_KEY'));

Well, Apparently I can't comment because of reputation issue, we came across something that might be what you are experiencing - since the locale file is downloaded only in the config part of angular, it might not be available (yet) when you call the translate.
We solved this by adding all the locale files upfront (we don't have many and they are small) and in the initialization we just choose the correct one, that way we avoid the problem.
(again this should probably be more of a comment then an answer, but I can't comment...)

This is not a solution for your issue, but if you try the following code in your 'run', you will get an idea, why the translation is not available at the initializing state.
myApp.run(['$rootScope', '$filter','$timeout', function($rootScope, $filter,$timeout) {
$timeout(function(){
alert($filter('translate')('MY_KEY'));
},5000)
}]);
Problem here is, by the time the translation is being loaded the 'run' will be executed. So it cannot be assured that you will get the translation loaded at that time.

Access a factory in the same module in AngularJS

I wonder why I can't access a factory within the same module.
As I think it is better to build a web app with different independent modules, I would like to group all methods (services, factories, directives, ...) within the same module.
What do I do wrong?
app = angular.module("MyGreatModuleProvider", []);
app.factory("MyFactory", function($rootScope, $scope) {
return {
myFunction: function() {
console.log("Hello World");
}
}
});
app.controller("myCtrl", function($scope, MyFactory) {
MyFactory.myFunction();
// This doesnt't work, unknown provider
});

Factories don't have a $scope
If you remove the $scope and only keep the $rootScope it works just fine

You can remove both $scope and $rootScope from the factory declaration. Here's a plunker.

Define your injected object names to let the Angular know what to inject into fields:
app.controller("myCtrl", ['$scope', 'MyFactory', function($scope, MyFactory) {
MyFactory.myFunction();
}]);
It's a good practice especially if you are going to compile your application.
Moreover as others pointed out: factories doesn't have $rootScope and $scope.