I am using the Ionic framework to build an hybrid app with AngularJS and Cordova. Completely new to both AngularJS and JavaScript, this has not been a sweet ride.
Everything was working fine until I decided to re-organize the structure of my app with 1 file per controller/service. So I'm pretty sure that the problem is coming from there, I just can't find how to fix it.
Here's the code:
js/app.js
angular.module('app', ['ionic', 'app.controllers'])
.run(function($ionicPlatform) {
...
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
...
js/controllers/LoginCtrl.js
angular.module('app.controllers', [])
.controller('LoginCtrl', ['$scope', '$http', '$state'], function($scope, $http, $state) {});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
</html>
Tried many variations of the code above, to no avail.
Any help greatly appreciated...
Edit
I might have made some progress in finding out what the problem is (or just yet another symptom).
In my index.html
file, if I switch the order of declaration of the controllers, the one declared right after app.js always gets ignored. This is the error I get when I put them in the order below
Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/RegisterCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
the function of your controller has to be inside the dependencies array.
.controller('LoginCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {}]);
And i think you also have to inject $ionicPlatform in your run() and config function, like this
.run(["$ionicPlatform", function($ionicPlatform) {
...
}])
.config(["dep1", function(dep1) {}]);