未捕獲的錯誤角度添加了3個以上模塊

Question

每當我嘗試將3個以上的模塊添加到角度依存關系中時，我都會得到以下輸出：

未捕獲的錯誤：[$ injector：modulerr]由於以下原因而無法實例化模塊啟動器：錯誤：[$ injector：modulerr]由於以下原因而未能實例化模塊starter.vuelo：錯誤：[$ injector：nomod]模塊'starter.vuelo'是無法使用！ 您可能拼錯了模塊名稱，或者忘記了加載它。 如果注冊模塊，請確保將依賴項指定為第二個參數。

有什么建議么？

這是工廠。

我不能在一個模塊中放置多個工廠。 而且，如果我創建一個新模塊，則無法將其添加到依賴項中，因為顯然不能超過3個。

例如：

angular.module（'starter'，['ionic'，'starter.controllers'，'starter.services']）

這有效，但我需要其他模塊

angular.module（'starter'，['ionic'，'starter.controllers'，'starter.services'，'starter.vuelo']）

中斷所有導航

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>

索引標簽

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

更新：

我嘗試了quicoli的建議，但事實並非如此。 我發現元素中的一個對象缺少鍵，並引發了意外的令牌異常。

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'},

謝謝

Answer 1

您的控制器依賴於“ starter.vuelo”模塊。 看到：

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

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

因此，在聲明控制器模塊時，應聲明以下依賴關系：

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

之后，您可以添加回去：

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

希望能對您有所幫助。 :)

Answer 2

朋友，

我只是出了什么問題...您的vuelo.js出現了sintaxe錯誤。...以下是正確的版本：

    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];
    }
  }
});

我會給你一個提示。...當您在使用角/離子時出現黑屏時，輸入chrome開發人員工具，我就用它來查看出了什么問題.....

現在我可以為您提供幫助:)