We Keep Coding

using uibModal in angularJS v1.48 applcation

I am trying to use uibModal (from angular-ui-bootstrap v0.12.1) in an angularJS application (v.148). I am aware of the current angular versions. When I am trying to use the modal using example code below, I am seeing the error:
TypeError: $uibModal.open is not a function
I have added the following to the application:
angular.module('someApp', ['ui.bootstrap']);
In the controller file, I am using the following:
angular.module('someAppController')
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService',
function($scope, $http, $locaton, $uibModal, someService) {
On an event:
$uibModal.open({
templateUrl: 'some.html',
windowClass: 'modal-danger'
});
I have tried replacing $uibModal to $modal (both in the module call and where I am trying to create the modal). However, I get the same error complaining about $uibModal.open or $modal.open is not a fucntion. Any thoughts on what I am doing wrong? I cannot find any issues with the versions or other dependencies causing issues.

You have some typos in your code and are not properly injecting the $uibModal provider
change
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService'
to
.controller('someController', ['$scope', '$http', '$location', '$uibModal', 'someService'
also change
templateUrk: 'some.html',
to
templateUrl: 'some.html',

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.

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.

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
}]);

How to configure 'ngProgress' as loader in my project [ngbp boilerplate]

I'm using 'ngbp' (https://github.com/ngbp/ngbp) angular boilerplate to build my project and I'm trying to make ngProgress work to show the loader when changing from section to section.
I've installed ngProgress through bower. I have css and js in place.
In my app.js I have this:
(function(app) {
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
app.run(function () {});
app.controller('AppController', ['$scope', function ($scope) {
}]);
}(angular.module("grinFood", [
'grinFood.home',
'grinFood.about',
'grinFood.menu',
'grinFood.catering',
'grinFood.takeithome',
'grinFood.contact',
'templates-app',
'templates-common',
'ui.router.state',
'ui.router',
'ngProgress',
])));
Then for example my catering.js looks like this:
(function(app) {
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('catering', {
url: '/catering',
views: {
"main": {
controller: 'CateringController',
templateUrl: 'catering/catering.tpl.html'
}
},
data:{ pageTitle: 'Catering' }
});
}]);
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
var init = function() {
// A definitive place to put everything that needs to run when the controller starts. Avoid
// writing any code outside of this function that executes immediately.
ngProgress.start();
};
init();
}]);
}(angular.module("grinFood.catering", [
'ui.router'
])));
That is when I get TypeError: Cannot read property 'start' of undefined
Also tried to put the ngprogress in the controller in app.js but I can't make it work.
You can watch the error here: http://ticketcomunicacion.com/grinfood/#/menu
Any help would be appreciate. Thanks

First off, ngbp looks like it's out of date. Try http://yeoman.io/ Secondly, I'm clueless why do you wrap app with a function? This is pointless, unless that you have a other library with a conflict.
Do you use minifiers? If yes try use one that is aware of anugarjs dependency framework. Basically, you need to specify your dependency correctly
['$scope', function ($scope, ngProgress)
change to
function ($scope, ngProgress)
or
['$scope', 'ngProgress', function ($scope, ngProgress)

You are not injecting ngProgress into the controller properly.
Instead of this:
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
You need to do this:
app.controller('CateringController', ['$scope', 'ngProgress', function ($scope, ngProgress) {
Note, a while back I switched to using ng-annotate, it's a very nice way to avoid these errors. I actually use ng-annotate-rails. These will help you avoid these types of mistakes in the future and clean up your code a bit. I highly recommend either one!