Question

我尝试在AngularJS上创建一个由几个模块组成的简单应用程序 Task.Delay

tokenSource1

app.module.js

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;

当我在浏览器中打开控制台时，出现错误：

我使用AngularJS map.routes.js编写我的简单应用程序我的问题找到了很多答案，但它对解决我的问题没有任何帮助请帮我。我无法理解我在哪里犯了错误。

Answer 1

角度模块定义必须如下：

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

Answer 2

我解决了我的问题。在我阅读有关手动初始化的文章后，我更改了我的代码。现在，我没有任何错误文章链接：https://docs.angularjs.org/guide/bootstrap
我发布了更新后的app.module.js代码：

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

我希望我的代码可以帮助某人。

AngularJS（1.6.8）：无法实例化模块

2 个答案: