We Keep Coding

Ionic/angularjs how to fix Cookie issue of unknown provider?

I am trying to user cookies but I get the following error.
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider:
UserServiceProvider <- UserService <- AuthenticationService
I did the following:
1) mentioned this in my index.html
<script src="//code.angularjs.org/1.4.3/angular-cookies.js"></script>
2) in my app.js I added ngCookies
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','app.filters','ngSanitize','ngCookies','base64'])
3) then I created a new service, i referenced it in my index.
<script src="js/authenticationService.js"></script>
4) I included $cookies in my authenticationService.js
(function () {
'use strict';
angular
.module('app')
.factory('AuthenticationService', AuthenticationService);
AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService','$cookies'];
function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService,$cookies) {...
can someone help me with the error?
When I change the angular cookies version to 1.2.20, i get this error instead
ionic.bundle.js:25642 TypeError: $browser.addPollFn is not a function
at Object. (angular-cookies.js:60)

As stated above in the comments. In your authenticationService.js, you have this line AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService','$cookies'];. This means that there should be injectable components like services / factories / controllers available for Angular when this service is initialized.
In this case all components other than UserService are available either as a part of angular.js or as other packages like angular-cookies.js.
Can you add a definition for UserService.js as well then your app should work.

Correct way to access emojione in angular controller

I have a PhoneGap App with AngularJs 1.5.5, OnsenUI 2 and EmojiOne.
I am trying to access the emojione variable inside of the angular controller:
ons.bootstrap.controller('AppController', ['$scope', '$timeout','$http', '$sce', function ($scope, $timeout, $http, $sce) {
emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = '../res/sprites/emojione.sprites.svg';
...
I have some function calls later on as well.
It is working as intended when i run it on my PC, but fails to resolve "emojione" (it is undefined) on android.
This is my first time working with angularjs and JavaScript so it may be something really simple.

Are you loading emojione library from a cdn?
Mobile has internet access?

When dealing with angularjs and standard javascript libraries, I like to make a module and factory simply for accessing the root variable, just like you are trying to do:
angular.module('emojioneModule', [])
.factory('emojione', function($window) {
return $window.emojione;
});
This allows you to inject the reference, and allows you to mock up the emojione for unit tests, as you can inject a mock instead.
ons.bootstrap.controller('AppController', ['$scope', '$timeout','$http', '$sce', 'emojione', function ($scope, $timeout, $http, $sce, emojione) {
emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = '../res/sprites/emojione.sprites.svg';
...
However, you could just inject $window, and access it directly from there.

(IONIC) Error: [$injector:unpr] Unknown provider: dataServicesProvider <- dataServices <- AuthCtrl

Im not able to connect to a custom service (dataService) which i had made.
here is the controller code
angular.module('auth.controller', [])
.controller('AuthCtrl',function($scope, $state, $ionicHistory, dataService) {
//some code
});
here is my custom service
angular.module('data.service',[])
.service('dataService', ['$http',function ($http) {
//some code
}])
my main controller
angular.module('wgmsApp.controllers', ['auth.controller','dashboard.controller')
.controller('MenuCtrl', function($scope, $ionicPopup, $state){
}])
my service.js
angular.module('wgmsApp.services', ['data.service'])
All files are included properly in index.html

You have defined the service dataService as part of the module data.service.
Therefore, to be able to leverage the services of one particular module in another, you'll need to inject the former into the latter.
i.e.
angular.module('auth.controller', ['data.service']) // inject the `data.service` module here
.controller('AuthCtrl',function($scope, $state, $ionicHistory, dataService) {
//some code
});

try to use like this-
angular.module('auth.controller', [])
.controller('AuthCtrl',["$scope","$state","$ionicHistory","dataService",function($scope, $state, $ionicHistory, dataService) {
//some code
}]);
Hope this may help you.

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.

.ns() undefined in google angular maps directive

I am trying to use the angular google maps directive with my app, but I keep getting an "undefined error"
This is my app.js
angular.module('app', ['cs'])
.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
GoogleMapApi.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//routes
}])
and my controller
angular.module('cs.Controllers')
.controller('MapController', ['$rootScope', '$scope', '$window', '$document', 'MenuService', 'GoogleMapApi'.ns(),
function($rootScope, $scope, $window, $document, menuService, GoogleMapApi) {
$rootScope.menuList = menuService.all();
}]);
What could be the problem

For others that got here that had added the missing dependency declaration, see: angular-google-maps , undefined is not a function
It looks like they've gotten rid of the ns() function, but haven't updated the documentation yet:
https://github.com/angular-ui/angular-google-maps/pull/872/
https://github.com/angular-ui/angular-google-maps/issues/821
Update all instances of 'string'.ns() to 'uiGmapstring' in your code and you should be good.

You're missing the dependency declaration in your app.
angular.module('app', ['google-maps'.ns(),'cs.Controllers']
Here's a plunker using one of the project's demo pages. I changed it to use the new provider.
http://plnkr.co/edit/eUbkv2qKu92T9iUp7yAF?p=preview