Im getting this error and I cannot locate the problem, following is my error
Error: [ng:areq] Argument 'homeCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.25/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at VALIDITY_STATE_PROPERTY (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12)
at assertArg (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9134:11)
at assertArgFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9144:3)
at $get (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14903:9)
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at IonicModule.directive.directive.compile (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42942:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14336:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14330:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)
Following is my angular
, ionic
project
#app.js
angular.module('ft', ['ionic', 'ft.controllers'])
.run(function($ionicPlatform) {
// run method
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sideMenu.html',
controller: 'menuCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
#www/js/controllers/home_ctrl.js
angular.module('ft.controllers', [])
.controller('homeCtrl', function($scope, $ionicModal, $timeout){
});
#index.html file
<script src="js/app.js"></script>
<script src="js/controllers/home_ctrl.js"></script>
But if i remove the homeCtrl
from routes, it works fine. I spent fair amount of time now and for me it seems ok.
any help would be much appreciated, thanks in advance
It looks like you are using bundling & minification
, try:
var app = angular.module('ft.controllers', []);
app.controller('homeCtrl', ['$scope', '$ionicModal', '$timeout', function ($scope, $ionicModal, $timeout) {
});
Minification of the JS code replaces variables name. AngularJS
does it's injection of modules based on this names.
Finally I was able to fix the issue, The problem was ft.controllers
is used in two controllers.
angular.module('ft.controllers', [])
.controller('homeCtrl', function($scope, $ionicModal, $timeout){
});
angular.module('ft.controllers', [])
.controller('menuCtrl', function($scope, $ionicModal, $timeout){
]});
When I changed the names to ft.controllers.home
, ft.controllers.menu
and added them to app.js
it started working
How ever I thought it will work as I believe the same this is used in ionic
sideMenu
started app
#controllers.js from ionic started sideMenu app
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('PlaylistsCtrl', function($scope) {
})