Uncaught error angular adding more than 3 modules

0
votes

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

2
javascriptangularjsionic-framework
Please share the javascript – KJ Price
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. are you sure that load module starter.vuelo? – Grundy
you may missed to load "starter.vuelo" module js – Asik
I have edited my question – Carlos Andres
can you provide html where add reference to your scripts? – Grundy

2 Answers

0
votes

your controller is dependent of 'starter.vuelo' module. See:

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

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

So, when you declare you controller module, you should declare this dependency:

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

After doing that you can add back:

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

I hope I could help you. :)

0
votes

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 :)