2017-12-25 5 views
1

いくつかのモジュールで構成されるAngularJSで簡単なアプリケーションを作成しようとしています。
app.module.jsAngularJS(1.6.8):モジュールのインスタンス化に失敗しました

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import angularLoadingBar from 'angular-loading-bar'; 
import ngAnimate from 'angular-animate'; 
import selectize from 'selectize'; 
import ngFileUpload from 'ng-file-upload'; 
import wtResponsive from 'angular-responsive-tables'; 
import uiLeaflet from 'ui-leaflet'; 
import angularJwt from 'angular-jwt'; 

import mapModule from './map/map.module'; 

import config from './app.config'; 

angular 
    .module('myApp', [ 
     uiRouter, 
     angularLoadingBar, 
     ngAnimate, 
     selectize, 
     ngFileUpload, 
     wtResponsive, 
     uiLeaflet, 
     angularJwt, 
     mapModule 
    ]) 
    .config(config); 

app.config.js

config.$inject = ['cfpLoadingBarProvider', '$httpProvider', 'jwtOptionsProvider']; 

function config(cfpLoadingBarProvider, $httpProvider, jwtOptionsProvider) { 
    cfpLoadingBarProvider.latencyThreshold = 1000; 
    jwtOptionsProvider.config({ 
     tokenGetter:() => window.token 
    }); 

    $httpProvider.interceptors.push('jwtInterceptor'); 
} 

export default config; 

map.module.js

import angular from 'angular'; 

import mapCtrl from './controllers/map.controller'; 
import routes from './map.routes'; 

export default angular.module('myApp.map', []) 
    .controller('mapCtrl', mapCtrl) 
    .config(routes) 
    .name; 

map.controller.js

import angular from 'angular'; 

mapCtrl.$inject = ['cfpLoadingBar', 'placeService', 'typeService']; 

function mapCtrl(cfpLoadingBar, placeService, typeService) { 

    const vm = this; 
    vm.group_markers = []; 
    vm.select = []; 
    vm.getAllPlaces = getAllPlaces; 
    vm.getAllTypes = getAllTypes; 
    vm.addPlaceInMap = addPlaceInMap; 
    vm.getPlacesByType = getPlacesByType; 
    vm.activate = activate; 

    activate(); 

    function activate() { 

    angular.extend(vm, { 
     grodno: { 
     lat: 53.6834599, 
     lng: 23.8342648, 
     zoom: 13 
     }, 
     markers: {}, 
     tiles: { 
     url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
     options: { 
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
     } 
     } 
    }); 

    vm.myConfig = { 
     create: false, 
     valueField: 'value', 
     labelField: 'text', 
     delimiter: '|', 
     placeholder: 'Choose type object', 
     maxItems: 1 
    }; 
    cfpLoadingBar.start(); 
    vm.getAllTypes(); 
    vm.getAllPlaces(); 
    cfpLoadingBar.complete(); 
    } 

    function getAllTypes() { 
    typeService.getAll() 
     .then(response => { 
     vm.getData = response.data; 
     vm.select.push({ 
      value: 0, 
      text: 'Все объекты' 
     }); 
     if (!response.data) { 
      response.data.forEach(item => { 
       vm.select.push({ 
        value: item.id_type, 
        text: item.name_type 
       }); 
      }); 
     } 
     }); 
    } 

    function getAllPlaces() { 
    placeService.getAll() 
     .then(response => { 
     vm.addPlaceInMap(response.data); 
     }); 
    } 

    function addPlaceInMap(response) { 
    if (!vm.getData) { 
    response.forEach((item, i) => { 
     const typeOfPlace = vm.getData[item.id_type - 1].name_type; 
     const nameOfImage = vm.getData[item.id_type - 1].image; 
     const lat = parseFloat(item.lat); 
     const lng = parseFloat(item.lng); 
     vm.markers['marker' + (i + 1)] = { 
      lat: lat, 
      lng: lng, 
      focus: false, 
      draggable: false, 
      group: 'vm.group_markers', 
      message: '<b>' + 
      item.name_place + 
      ',</b> ' + 
      typeOfPlace + 
      '<br>' + 
      item.address + 
      '<br/>', 
      icon: { 
      iconSize: [54, 54], 
      iconAnchor: [16, 37], 
      popupAnchor: [0, -30], 
      iconUrl: './uploads/' + nameOfImage 
      } 
     }; 
     }); 
     cfpLoadingBar.complete(); 
    } 
    } 

    function getPlacesByType() { 
    vm.typeIsNumber = parseInt(vm.type); 
    cfpLoadingBar.start(); 
    if (vm.typeIsNumber === 0) { 
     vm.getAllPlaces(); 
    } else { 
     vm.markers = {}; 
     placeService.getPlacesByType(vm.typeIsNumber) 
      .then(response => { 
      vm.places = response.data; 
      vm.addPlaceInMap(vm.places); 
     } 
    ); 
    } 
    } 
} 

export default mapCtrl; 
私は、ブラウザでコンソールを開くと3210

map.routes.js

import mapView from './views/map.html'; 

routes.$inject = ['$stateProvider']; 

function routes($stateProvider) { 
    $stateProvider 
     .state('map', { 
      url: '/', 
      templateUrl: mapView, 
      controller: 'mapCtrl', 
      controllerAs: 'vm', 
      module: 'map' 
     }) 
} 

export default routes; 

私はエラーを取得する: enter image description here

私はAngularJS 1.6.8を使用して、私のシンプルなアプリを作成します。
質問で多くの回答が見つかったが、私の問題解決には役に立たなかった。
お願いします。私はどこでエラーが発生したのか分かりません。

+0

私の質問を更新したのは、 'map.controller.js'と' map.routes.js'のコードでした。 –

答えて

1

角度モジュール定義は次のようにする必要があります

angular 
    .module('myApp', [ 
     'ui.Router', 
     'angular-loading-bar', 
     'ngAnimate', 
     'selectize', 
     'ngFileUpload', 
     'wtResponsive', 
     'uiLeaflet', 
     'angularJwt', 
     'mapModule' 
    ]) 
0

私は私の問題を解決しました。私はマニュアルの初期化に関する記事を読んだ後、コードを変更しました。今、私は何の誤りもありません。記事の
リンク:私は私のコードは、誰かを助けることを願っています

import 'angular'; 
import 'angular-ui-router'; 
import 'angular-loading-bar'; 
import 'angular-animate'; 
import 'angular-selectize2/dist/selectize.js'; 
import 'angular-simple-logger/dist/angular-simple-logger.min'; 
import 'ng-file-upload'; 
import 'angular-responsive-tables'; 
import 'ui-leaflet'; 
import 'angular-jwt'; 
import 'immutable'; 

import mapModule from './map/map.module'; 

const packageModules = [ 
    'ui.router', 
    'angular-loading-bar', 
    'ngAnimate', 
    'selectize', 
    'ngFileUpload', 
    'wt.responsive', 
    'nemLogging', 
    'ui-leaflet', 
    'angular-jwt' 
]; 

function processAllModules(customModules) { 
    angular.element(() => { 
     angular.module('myApp', packageModules.concat(customModules)); 
     angular.bootstrap(document, ['myApp']); 
    }); 
} 

processAllModules([ 
    mapModule 
]); 

https://docs.angularjs.org/guide/bootstrap
私はapp.module.jsの私の更新されたコードを掲載しました。

関連する問題