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',

Angular - Access config injected dependencies

When I try to access the $location variable injected into the config from my resolve route, I get a "Unknown Provider" error in the console.
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function ($routeProvider, $location) {
$location.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'home/home.html',
controller:'homeCtrl',
controllerAs: "vm",
resolve:{
getData: function(){
var param = $location.search().options
}
}
})
Shouldn't the $location parameter be accessible like a closure? I'm fairly new to JS and Angular, so I need clarification.
Thanks!

if you're using the array notation, then the strings must match what you're injecting. in this case, if you want to use $location, you should inject $location, not $locationProvider

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.

Angular ng-view with sticky headers not working

I'm trying to use the sticky headers directive from: http://ngmodules.org/modules/sticky-headers
but it doesn't seem to work with the combination of using ng-view.
When using the fsm directive as required, I'm getting an empty view:
angular.module('dashboard', ['fsm']).controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
When not including the fsm directive, everything works fine:
angular.module('dashboard').controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
Your help is much appreciated.
Thanks.

The difference between the method angular.module(string) and angular.module(string, array[]) is that the first one loads a specific module and the second one creates a new angular module
Make sure that you only create your module once

.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