Carlos Andres Carlos Andres - 4 months ago 33
AngularJS Question

Uncaught error angular adding more than 3 modules

Whenever I try to add more than 3 modules to the angular dependencies I get this output:


Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.vuelo due to:
Error: [$injector:nomod] Module 'starter.vuelo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.


Any suggestions?

This is a factory.

I can not put more than one factory in a single module. And if I create a new module, I can not add it to dependencies because apparently there can not be more than 3.

For example:


angular.module('starter', ['ionic', 'starter.controllers','starter.services'])


This works but I need the other module


angular.module('starter', ['ionic', 'starter.controllers','starter.services','starter.vuelo'])


Breaks all navigation

services.js

angular.module('starter.services',['starter.controllers'])

.factory('MenuService', function() {

var menu = [
{
id:0,
titulo:'Buscar Charters',
descripcion:'',
icono:'ion-search'
},
{
id:1,
titulo:'Escalas vacias',
descripcion:'',
icono:'ion-plane'
},
{
id:2,
titulo:'Mi perfil',
descripcion:'',
icono:'ion-briefcase'
},
{
id:3,
titulo:'Mensajes',
descripcion:'',
icono:'ion-chatboxes'
}];

return {
all: function() {
return menu;
},
get: function(itemId) {
// Simple index lookup
return menu[itemId];
}
}
});


vuelo.js

angular.module('starter.vuelo',[])

.factory('VueloService', function () {
var vuelos = [{
id:1,
salida:{'MAN','Aeropuerto Augusto Cesar Sandino'},
destino:{'SJO','Juan Santamaria Intl'},
escalas:[],
aeronave:1,
asientos:4,
precioNormal:4199,
precioMiembro:2819,
horario:'diurno',
tiempoEstimado:45,
fechaVuelo:'20/10/14',
hora:'11:00am'
}];

return{
all: function() {
return vuelos;
},
get: function (vueloId) {
return vuelos[vueloId];
}
}
});


controllers.js

angular.module('starter.controllers', [])


.controller('MenuCtrl', function($scope, MenuService) {

$scope.menus = MenuService.all();

})

.controller('MenuDetalleCtrl', function($scope, $stateParams, MenuService) {

$scope.menu = MenuService.get($stateParams.menuId);

})

.controller('CharterCtrl', function($scope, $stateParams, VueloService) {

$scope.vuelos = VueloService.all();
});


app.js

angular.module('starter', ['ionic', 'starter.controllers','starter.services'])


.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})

.state('tab.menu', {
url: '/menu',
views: {
'index-tab': {
templateUrl: 'templates/index-tab.html',
controller: 'MenuCtrl'
}
}
})

// .state('tab.opcion', {
// url: '/menu/:menuId',
// views: {
// 'index-tab': {
// templateUrl: 'templates/vuelosCharter.html',
// controller: 'MenuDetalleCtrl'
// }
// }
// })

.state('tab.charters', {
url: '/menu/0',
views: {
'index-tab': {
templateUrl: 'templates/buscarCharter.html',
controller: 'MenuDetalleCtrl'
}
}
})

.state('tab.escalas', {
url: '/menu/1',
views: {
'index-tab': {
templateUrl: 'templates/escalasVacias.html',
controller: 'CharterCtrl'
}
}
})

.state('tab.perfil', {
url: '/menu/2',
views: {
'index-tab': {
templateUrl: 'templates/datosCuenta.html',
controller: 'MenuDetalleCtrl'
}
}
})

.state('tab.mensajes', {
url: '/menu/3',
views: {
'index-tab': {
templateUrl: 'templates/buscarCharter.html',
controller: 'MenuDetalleCtrl'
}
}
})

.state('tab.cuenta', {
url: '/cuenta',
views: {
'cuenta-tab': {
templateUrl: 'templates/cuenta.html'
}
}
})

.state('tab.buscar', {
url: '/buscar',
views: {
'buscar-tab': {
templateUrl: 'templates/buscar.html'
}
}
});

// $urlRouterProvider

// .when('/menu/0',{
// templateUrl :'buscarCharter.html'
// })


// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/menu');

});


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>Jets</title>

<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">

<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">

<!-- ionic/angularjs scripts -->
<script src="lib/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/vuelo.js"></script>
</head>

<!--
'starter' is the name of this angular module (js/app.js)
-->
<body ng-app="starter" animation="slide-left-right-ios7">

<!--
The nav bar that will be updated as we navigate between views
Additional attributes set its look, ion-nav-bar animation and icons
Icons provided by Ionicons: http://ionicons.com/
-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon button-clear ion-ios7-arrow-back">

</ion-nav-back-button>
</ion-nav-bar>

<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>

</body>
</html>


tabs.html

<ion-tabs class="tabs-icon-top tabs-default">

<ion-tab title="MenĂº" icon="icon ion-home" href="#/tab/menu">
<ion-nav-view name="index-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="Mi cuenta" icon="icon ion-person" href="#/tab/cuenta">
<ion-nav-view name="cuenta-tab"></ion-nav-view>
</ion-tab>

<ion-tab title="Buscar" icon="icon ion-search" href="#/tab/buscar">
<ion-nav-view name="buscar-tab"></ion-nav-view>
</ion-tab>


</ion-tabs>


index-tab

<ion-view title="MenĂº">
<ion-content>

<ion-list>

<ion-item ng-repeat="menu in menus" type="item-text-wrap" href="#/tab/menu/{{menu.id}}" >
<i class="icon {{menu.icono}}"></i>
<p>{{menu.titulo}}</p>

</ion-item>

</ion-list>

</ion-content>
</ion-view>


escalasVacias.html

<ion-view title='Escalas vacias'>

<ion-content>
<ion-list>
<ion-item ng-repeat="vuelo in vuelos">
{{vuelo.id}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>


Update:

I have tried what quicoli suggests, but it is not the case. I figured out that one object in the element was missing the keys, and throwed an Unexpected token exception.

salida:{'MAN','Aeropuerto Augusto Cesar Sandino'},
destino:{'SJO','Juan Santamaria Intl'},

salida:{'cod':'MAN','ap':'Aeropuerto Augusto Cesar Sandino'},
destino:{'cod':'SJO','ap':'Juan Santamaria Intl'},


Thanks

Answer

Friend,

I just got what's wrong... your vuelo.js has sintaxe erros.... below is the correct version:

    angular.module('starter.vuelo',[])

   .factory('VueloService', function () {
    var vuelos = [{
    id:1,
    salida:{ id: 'MAN', name:'Aeropuerto Augusto Cesar Sandino'}, //<<--- here
    destino:{id: 'SJO',name :'Juan Santamaria Intl'}, //<<--- and here
    escalas:[],
    aeronave:1,
    asientos:4,
    precioNormal:4199,
    precioMiembro:2819,
    horario:'diurno',
    tiempoEstimado:45,
    fechaVuelo:'20/10/14',
    hora:'11:00am'
  }];

  return{
    all: function() {
      return vuelos;
    },
    get: function (vueloId) {
      return vuelos[vueloId];
    }
  }
});

I'll give you a tip.... when you get a black screen when using angular/ionic, enter in chrome developer tools, I used that to see what was wrong.....

Now I now I could help you :)

Comments