$ionicModal.fromTemplateUrl undefined is not a function - angularjs

Question

I want to make an ionicModal form in my app but it always say's:
TypeError: undefined is not a function
at new AppController (http://127.0.0.1:58710/www/js/home/AppController.js:15:17)
at invoke (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11602:23)
at http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14906:28
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2797:28
at nodeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14336:13)
at compositeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13730:13)
at publicLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13626:30)
at updateView (http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2733:23)
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2697:11 <div ui-view="">
My code is:
function AppController($scope, $log, $state, $ionicModal) {
'use strict';
$scope.days = [];
var column = [];
// Load the modal from the given template URL
console.log(JSON.stringify($ionicModal) + "lalala");
$ionicModal.fromTemplateUrl('templates/home/selectedDay.html', function ($ionicModal) {
$scope.modal = $ionicModal;
$scope.modalRightButtons = [
{
type: 'button-clear',
content: 'Close',
tap: function (e) {
$scope.modal.hide();
}
}];
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
$scope.openModal = function () {
$scope.modal.show();
};
This is exactly the same as in the example i just don't know what am I doing wrong...
my app.js is:
var App = angular.module('App', ['ionic', 'ngResource', 'ui.router']);
App.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
'Header': {
templateUrl: 'templates/home/homeHeader.html',
controller: 'homeHeaderController'
},
'': {
templateUrl: 'templates/home/calendar.html',
controller: 'AppController'
}
}
})
$urlRouterProvider
.otherwise('/home');
});
App.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
App
.controller('AppController', ['$scope', '$log', '$state', '$localstorage', AppController])
I have an other app where everything is working. I don't see what could be wrong here....
EDIT
I changed the first row of AppController and now I am getting an other error.
The new first row:
function AppController($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
The new error:
"Cannot read property 'fromTemplateUrl' of undefined"

Answer 1

The problem is with dependency injection (DI). The syntax you are using is good if you plan to minify your code, but you have to declare the exact same dependencies in the exact same order in both places. Your AppController object has more dependencies than you declare in the angular.controller() method.
Controller function
function AppController ($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
...
}
Angular Controller declaration
App.controller('AppController', ['$scope', '$log', '$state', 'Api', '$localstorage', '$ionicSideMenuDelegate', '$ionicPopup', '$ionicModal', AppController]);