Probleme beim Importieren von ArcGIS Javascript-API-Ressourcen und Laden von Dojo

Ich verwende die ArcGIS Javascript-API, um einer vorhandenen Webanwendung mithilfe von AngularJS und JSP einige Funktionen (ein Such-Widget) hinzuzufügen. Ich habe Probleme beim Auflösen eines Pfadnamens für das esri/dijit/Search-Paket, da es einen Pfadnamen auf unserem lokalen Server anstelle der Online-API versucht und einen 404-Fehler erzeugt.Probleme beim Importieren von ArcGIS Javascript-API-Ressourcen und Laden von Dojo

BEARBEITEN Ich sehe jetzt, dass, wenn ich die Online ArcGIS Javascript API referenziere, habe ich eine lokale Datei, die den Fehler 404 empfängt. Wenn Sie nicht darauf verweisen, führt dies natürlich zu Problemen für die Datei esri/dijit/Search. Ich konzentriere mich jetzt darauf, dies so zu konfigurieren, dass ich beide Pfadnamen auflösen kann. Aktualisierter Code befindet sich unten im Bearbeitungsbereich.

Ich habe eine app.js mit der Funktion benötigen:

'use strict'; 

var mapApp=angular.module('org.ours.app.map', ['ngRoute','org.ours.app.map.controllers']); 

mapApp.config(['$routeProvider', function($routeProvider,StudentController) { 
    $routeProvider.when('/', { controller: 'MapController'}); 
    $routeProvider.otherwise({redirectTo: '/'}); 
}]); 

require([ 
    "esri/map", 
    "dojo/domReady!", 
    "esri/toolbars/navigation", 
    "esri/toolbars/draw", 
    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/tasks/IdentifyParameters", 
    "esri/tasks/IdentifyResult", 
    "esri/tasks/IdentifyTask", 
    "esri/layers/GraphicsLayer", 
    "esri/dijit/InfoWindow", 
    "esri/dijit/Search", 
    "esri/layers/FeatureLayer", 
    "esri/InfoTemplate" 
    ], function() { 
    var lScope=angular.element(document.getElementById('mapDiv')).scope(); 
    lScope.onReady.apply(lScope,arguments); 
});

Der Controller für den Such-Widget (aus einer Online-ArcGIS Probe angepasst):

'use strict'; 

mapAppControllers.controller('SearchController', function($rootScope, $scope) { 
    $scope.$parent.searchScope=$scope; 
    var me=$scope; 
    var ALL; 
    angular.extend($scope,{ 
     init:function(Map, Search, FeatureLayer, InfoTemplate, pMap){ 
      me.map=pMap; 
      me.search = new Search({ 
       enableButtonMode: true, //this enables the search widget to display as a single button 
       enableLabel: false, 
       enableInfoWindow: true, 
       showInfoWindowOnSelect: false, 
       map: map 
      }, "search"); 

      me.sources = search.get("sources"); 

      sources.push({ 
       featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"), 
       searchFields: ["Name"], 
       displayField: "Name", 
       exactMatch: false, 
       name: "Senator", 
       outFields: ["*"], 
       placeholder: "Senator name", 
       maxResults: 6, 
       maxSuggestions: 6, 

       //Create an InfoTemplate 

       infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"), 

       enableSuggestions: true, 
       minCharacters: 0 
      }); 

      //Set the sources above to the search widget 
      search.set("sources", sources); 

      search.startup(); 

     } 
    }) 
});

ich dann einen Index habe. jsp mit ein paar Map-Elementen, einschließlich des Such-Widgets (unten), das ich hinzufügen möchte. Ich habe hier auf die Online ArcGIS JavaScript API verwiesen, aber ich bin mir nicht sicher, ob es am richtigen Ort ist. Ich frage mich auch, ob es möglicherweise ein anderes Paket gibt, das die/esri/dijit/Search Datei umleitet.

Diese Version erzeugt einen 404-Fehler, die in http://ouserver/esri/dijit/Search für die Datei aussieht:

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html> 
<html ng-app="org.ours.app.map" class="map-viewport"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="js/arcgis/esri/css/esri.css"> 
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap/bootstrap-theme.css"> 

    <link rel="stylesheet" href="css/map.css"> 

    <script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"></script> 
    <script src="js/angularjs/angular.min.js"></script> 
    <script src="js/angularjs/i18n/angular-locale_fr-fr.js"></script> 
    <script src="js/angularjs/angular-animate.min.js"></script> 
    <script src="js/angularjs/angular-route.min.js"></script> 
    <script src="js/bootstrap/ui-bootstrap-tpls-1.1.2.min.js"></script> 


    <script src="js/utils/ColorsUtil.js"></script> 

    <script src="js/controllers.js"></script> 

    <script src="js/controllers/Attributes.js"></script> 
    <script src="js/controllers/Results.js"></script> 
    <script src="js/controllers/Identify.js"></script> 
    <script src="js/controllers/Toolbar.js"></script> 
    <script src="js/controllers/MapService.js"></script> 
    <script src="js/controllers/Map.js"></script> 
    <script src="js/controllers/Body.js"></script> 
    <script src="js/controllers/Search.js"></script> 

    <script src="js/app.js"></script> 

</head> 
<body ng-controller="BodyController" class="map-body"> 

<div style="display: none" ng-controller="IdentifyController"></div> 



<div id="mapDiv" ng-controller="MapController"> 
    <script type="text/ng-template" id="infoWindowTemplate.html"> 
    <div style="max-height: 300px;overflow-y: auto;overflow-x: hidden"> 
     <table cellpadding="2"> 
     <tbody> 
     <tr ng-repeat="attribute in resultsScope.popover.attributes" ng-class="$index%2==1?'map-attributes-even':''" > 
      <td style="font-weight: bold" >{{attribute.label}}</td> 
      <td style="padding-left: 5px" uib-tooltip="{{attribute.value}}">{{attribute.value}}</td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    </script> 
    <div id="popoverPosition" 
     popover-title="{{resultsScope.popover.title}}" 
     uib-popover-template="resultsScope.popover.templateUrl" 
     popover-is-open="resultsScope.popover.isOpen" 
    ></div> 
</div> 

<div class="map-toolbar" ng-controller="ToolbarController" id="toolbar"> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-click="onMapActionClick('prev')" ng-disabled="navModel.prev" uib-tooltip="Vue précédente" tooltip-placement="bottom"><i class="glyphicon glyphicon-circle-arrow-left"></i></label> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'pan'" uib-tooltip="Déplacer" tooltip-placement="bottom"><i class="glyphicon glyphicon-move"></i></label> 
    <label class="btn btn-primary" ng-click="onMapActionClick('next')" ng-disabled="navModel.next" uib-tooltip="Vue suivante" tooltip-placement="bottom"><i class="glyphicon glyphicon-circle-arrow-right"></i></label> 
    </div> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomout'" uib-tooltip="Dézoomer" tooltip-placement="bottom"><i class="glyphicon glyphicon-zoom-out"></i></label> 
    <label class="btn btn-primary" ng-click="onMapActionClick('full')" uib-tooltip="Vue globale" tooltip-placement="bottom"><i class="glyphicon glyphicon-fullscreen"></i></label> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomin'" uib-tooltip="Zoomer" tooltip-placement="bottom"><i class="glyphicon glyphicon-zoom-in"></i></label> 
    </div> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'identify'" uib-tooltip="Identifier" tooltip-placement="bottom"><i class="glyphicon glyphicon-info-sign"></i></label> 
    </div> 

    <div class="btn-group" style="display: inline-block;width:400px" ng-controller="MapServiceController"> 
    <script type="text/ng-template" id="serviceLyerTemplate.html"> 
     <a> 
     <span ng-bind-html="match.label | uibTypeaheadHighlight:query | BoldLayersOptions:match"></span> 
     </a> 
    </script> 
    <div style="display: inline-block;" > 
     <input type="text" ng-model="serviceSelected" placeholder="Selectionner un service" uib-typeahead="service as service.name for service in services | filter:{name:$viewValue}" 
      typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;" 
      typeahead-on-select="onServiceSelect($model)" typeahead-select-on-blur="true"> 
    </div> 
    <div style="display: inline-block;width:50%"> 
     <input type="text" ng-model="layerSelected" placeholder="Selectionner une couche" uib-typeahead="layer as layer.name for layer in layers | filter:{name:$viewValue}" 
      typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;" 
      typeahead-on-select="onLayerSelect($model)" typeahead-select-on-blur="true" 
     > 
    </div> 
    </div> 

</div> 

<div class="map-messagebar"> 
    <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="width: 600px">{{alert.msg}}</uib-alert> 
</div> 

<label class="btn btn-success map-identify" ng-model="resultsScope.visible" uib-btn-checkbox ng-click="attributesScope.visible=$event.ctrlKey?resultsScope.visible:attributesScope.visible"><i class="glyphicon glyphicon-info-sign"></i></label> 
<label class="btn btn-success map-show-attributes" ng-model="attributesScope.visible" uib-btn-checkbox ng-click="resultsScope.visible=$event.ctrlKey?attributesScope.visible:resultsScope.visible"><i class="glyphicon glyphicon-list-alt"></i></label> 
<button class="btn btn-success map-reset" ng-click="reset()"><i class="glyphicon glyphicon-remove-sign"></i></button> 



<div class="panel panel-primary map-results animate-hide" id="resultsDiv" ng-controller="ResultsController" ng-show="visible"> 
    <div class="panel-heading"><i class="glyphicon glyphicon-info-sign"></i> Résultats<i class="pull-right glyphicon glyphicon-chevron-left" ng-click="visible=!visible"></i></div> 
    <div class="panel-body map-results-body" > 
    <uib-accordion close-others="oneAtATime" style="width: 100%;height: 100%"> 
     <uib-accordion-group ng-repeat="layer in layers" is-open="layer.isFirstOpen" class="panel panel-success"> 
     <uib-accordion-heading><i class="glyphicon glyphicon-play" ng-style="layer.style"></i> {{layer.name}}</uib-accordion-heading> 
     <label class="btn btn-link btn-default map-result" ng-model="result.visible" ng-click="show(result)" ng-repeat="result in layer.results" uib-btn-checkbox> 
      {{result.displayValue}} 
      <i class="pull-right glyphicon glyphicon-fullscreen" ng-click="zoom(result,$event)"></i> 
      <i class="pull-right glyphicon glyphicon-list-alt" ng-click="attributesScope.visible=true;attributesScope.show(result,$event)" style="margin-right:5px"></i> 
     </label> 
     </uib-accordion-group> 
    </uib-accordion> 
    </div> 
</div> 

<div class="panel panel-primary map-attributes" id="attributesDiv" ng-controller="AttributesController" ng-show="visible"> 
    <div class="panel-heading"><i class="glyphicon glyphicon-list-alt"></i> Attributs<i class="pull-right glyphicon glyphicon-chevron-right" ng-click="visible=!visible"></i></div> 
    <div class="panel-body map-attributes-body"> 
    <table cellpadding="2"> 
     <tbody> 
     <tr ng-repeat="attribute in attributes" ng-class="$index%2==1?'map-attributes-even':''" ><td style="font-weight: bold">{{attribute.label}}</td><td style="padding-left: 5px">{{attribute.value}}</td></tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

<script src="https://js.arcgis.com/3.17/"></script> 

<div ng-controller="SearchController" id="search"> 
    <h1> This is a test </h1> 
</div> 

</body> 
</html>

Es gibt viele andere Dateien im Paket. Ich bin neu in diesem Bereich, daher bin ich offen für Vorschläge, wo ich suchen soll. Dies ist die Dateistruktur:

EDIT Wenn an die Spitze der index.jsp die ArcGIS-API-Referenz zu bewegen, ich Probleme jetzt haben dojo_fr.js Lösung (auf lokalen Server). Wie kann ich dies so konfigurieren, dass beide aufgelöst werden?

Diese Version erzeugt einen 404-Fehler für die Datei in https://js.arcgis.com/3.17/dojo/nls/dojo_fr.js suchen:

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html> 
<html ng-app="pf.pde.app.map" class="map-viewport"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="js/arcgis/esri/css/esri.css"> 
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap/bootstrap-theme.css"> 

    <link rel="stylesheet" href="css/map.css"> 

    <script src="https://js.arcgis.com/3.17/"></script> 

    <script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"></script> 
    <script src="js/angularjs/angular.min.js"></script> 
    <script src="js/angularjs/i18n/angular-locale_fr-fr.js"></script> 
    <script src="js/angularjs/angular-animate.min.js"></script> 
    <script src="js/angularjs/angular-route.min.js"></script> 
    <script src="js/bootstrap/ui-bootstrap-tpls-1.1.2.min.js"></script> 


    <script src="js/utils/ColorsUtil.js"></script> 

    <script src="js/controllers.js"></script> 

    <script src="js/controllers/Attributes.js"></script> 
    <script src="js/controllers/Results.js"></script> 
    <script src="js/controllers/Identify.js"></script> 
    <script src="js/controllers/Toolbar.js"></script> 
    <script src="js/controllers/MapService.js"></script> 
    <script src="js/controllers/Map.js"></script> 
    <script src="js/controllers/Body.js"></script> 
    <script src="js/controllers/Search.js"></script> 

    <script src="js/app.js"></script> 

</head> 
<body ng-controller="BodyController" class="map-body"> 

<div style="display: none" ng-controller="IdentifyController"></div> 



<div id="mapDiv" ng-controller="MapController"> 
    <script type="text/ng-template" id="infoWindowTemplate.html"> 
    <div style="max-height: 300px;overflow-y: auto;overflow-x: hidden"> 
     <table cellpadding="2"> 
     <tbody> 
     <tr ng-repeat="attribute in resultsScope.popover.attributes" ng-class="$index%2==1?'map-attributes-even':''" > 
      <td style="font-weight: bold" >{{attribute.label}}</td> 
      <td style="padding-left: 5px" uib-tooltip="{{attribute.value}}">{{attribute.value}}</td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    </script> 
    <div id="popoverPosition" 
     popover-title="{{resultsScope.popover.title}}" 
     uib-popover-template="resultsScope.popover.templateUrl" 
     popover-is-open="resultsScope.popover.isOpen" 
    ></div> 
</div> 

<div class="map-toolbar" ng-controller="ToolbarController" id="toolbar"> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-click="onMapActionClick('prev')" ng-disabled="navModel.prev" uib-tooltip="Vue précédente" tooltip-placement="bottom"><i class="glyphicon glyphicon-circle-arrow-left"></i></label> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'pan'" uib-tooltip="Déplacer" tooltip-placement="bottom"><i class="glyphicon glyphicon-move"></i></label> 
    <label class="btn btn-primary" ng-click="onMapActionClick('next')" ng-disabled="navModel.next" uib-tooltip="Vue suivante" tooltip-placement="bottom"><i class="glyphicon glyphicon-circle-arrow-right"></i></label> 
    </div> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomout'" uib-tooltip="Dézoomer" tooltip-placement="bottom"><i class="glyphicon glyphicon-zoom-out"></i></label> 
    <label class="btn btn-primary" ng-click="onMapActionClick('full')" uib-tooltip="Vue globale" tooltip-placement="bottom"><i class="glyphicon glyphicon-fullscreen"></i></label> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomin'" uib-tooltip="Zoomer" tooltip-placement="bottom"><i class="glyphicon glyphicon-zoom-in"></i></label> 
    </div> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'identify'" uib-tooltip="Identifier" tooltip-placement="bottom"><i class="glyphicon glyphicon-info-sign"></i></label> 
    </div> 

    <div class="btn-group" style="display: inline-block;width:400px" ng-controller="MapServiceController"> 
    <script type="text/ng-template" id="serviceLyerTemplate.html"> 
     <a> 
     <span ng-bind-html="match.label | uibTypeaheadHighlight:query | BoldLayersOptions:match"></span> 
     </a> 
    </script> 
    <div style="display: inline-block;" > 
     <input type="text" ng-model="serviceSelected" placeholder="Selectionner un service" uib-typeahead="service as service.name for service in services | filter:{name:$viewValue}" 
      typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;" 
      typeahead-on-select="onServiceSelect($model)" typeahead-select-on-blur="true"> 
    </div> 
    <div style="display: inline-block;width:50%"> 
     <input type="text" ng-model="layerSelected" placeholder="Selectionner une couche" uib-typeahead="layer as layer.name for layer in layers | filter:{name:$viewValue}" 
      typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;" 
      typeahead-on-select="onLayerSelect($model)" typeahead-select-on-blur="true" 
     > 
    </div> 
    </div> 

</div> 

<div class="map-messagebar"> 
    <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="width: 600px">{{alert.msg}}</uib-alert> 
</div> 

<label class="btn btn-success map-identify" ng-model="resultsScope.visible" uib-btn-checkbox ng-click="attributesScope.visible=$event.ctrlKey?resultsScope.visible:attributesScope.visible"><i class="glyphicon glyphicon-info-sign"></i></label> 
<label class="btn btn-success map-show-attributes" ng-model="attributesScope.visible" uib-btn-checkbox ng-click="resultsScope.visible=$event.ctrlKey?attributesScope.visible:resultsScope.visible"><i class="glyphicon glyphicon-list-alt"></i></label> 
<button class="btn btn-success map-reset" ng-click="reset()"><i class="glyphicon glyphicon-remove-sign"></i></button> 



<div class="panel panel-primary map-results animate-hide" id="resultsDiv" ng-controller="ResultsController" ng-show="visible"> 
    <div class="panel-heading"><i class="glyphicon glyphicon-info-sign"></i> Résultats<i class="pull-right glyphicon glyphicon-chevron-left" ng-click="visible=!visible"></i></div> 
    <div class="panel-body map-results-body" > 
    <uib-accordion close-others="oneAtATime" style="width: 100%;height: 100%"> 
     <uib-accordion-group ng-repeat="layer in layers" is-open="layer.isFirstOpen" class="panel panel-success"> 
     <uib-accordion-heading><i class="glyphicon glyphicon-play" ng-style="layer.style"></i> {{layer.name}}</uib-accordion-heading> 
     <label class="btn btn-link btn-default map-result" ng-model="result.visible" ng-click="show(result)" ng-repeat="result in layer.results" uib-btn-checkbox> 
      {{result.displayValue}} 
      <i class="pull-right glyphicon glyphicon-fullscreen" ng-click="zoom(result,$event)"></i> 
      <i class="pull-right glyphicon glyphicon-list-alt" ng-click="attributesScope.visible=true;attributesScope.show(result,$event)" style="margin-right:5px"></i> 
     </label> 
     </uib-accordion-group> 
    </uib-accordion> 
    </div> 
</div> 

<div class="panel panel-primary map-attributes" id="attributesDiv" ng-controller="AttributesController" ng-show="visible"> 
    <div class="panel-heading"><i class="glyphicon glyphicon-list-alt"></i> Attributs<i class="pull-right glyphicon glyphicon-chevron-right" ng-click="visible=!visible"></i></div> 
    <div class="panel-body map-attributes-body"> 
    <table cellpadding="2"> 
     <tbody> 
     <tr ng-repeat="attribute in attributes" ng-class="$index%2==1?'map-attributes-even':''" ><td style="font-weight: bold">{{attribute.label}}</td><td style="padding-left: 5px">{{attribute.value}}</td></tr> 
     </tbody> 
    </table> 
    </div> 
</div> 



<div ng-controller="SearchController" id="search"> 
    <h1> This is a test </h1> 
</div> 

</body> 
</html>

UPDATE Ich versuche, die dojoConfig zu tun, aber ich bin immer noch nicht bekommen es (wie es derzeit ist unten). Es gibt andere Dinge, die das Laden der Seite verhindern. Wenn diese Dinge eliminiert werden, funktioniert die Seite geladen wird und der Rest:

-ArcGIS API Online-Referenz (404 Fehler auf dojo_fr.js) -requiring esri/Suchen/dijit (404 Fehler auf Search.js wenn ArcGIS API ist nicht die Art und Weise verwiesen ich es unten getan haben)

<script src="https://js.arcgis.com/3.17/"></script> 

    <!-- First dojoConfig --> 
    <script type="text/javascript"> 
    var dojoConfig = { 
     packages: [ 
      { 
       location: '/js/arcgis', 
       name: 'arcgis' 
      } 
     ] 
    }; 
    </script> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 

    <script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"></script>

Quelle

2016-07-13 user25976

Ich denke, Sie sind falsch mit 'DojoConfig', der' Pakete' Abschnitt ist nicht für die Referenzierung einer bestimmten Datei. Warum brauchen Sie auch zwei 'dojo.js' Dateien? Sind nicht das Gleiche? Überprüfen Sie [diesen Link] (https://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/) für eine Referenz auf 'dojoConfig' und [dieses aus Dojo] (http://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/). Lass es mich wissen, wenn das hilft –

@CastroRoy Okay..Ich war verwirrt, als ich das schrieb. Die ursprüngliche App hat eine lokale dojo.js-Datei und hat keinen Verweis auf die Arcgis-API, so wie ich es versucht habe. Ich dachte, dass es fehlte, aber ich fange an zu denken, dass es die API anders referenziert. Ich bin mir einfach nicht sicher wie. Dies ist am meisten wie die Quelle meines Problems. – user25976

ich denke, was Sie brauchen, ist Configuring Dojo with dojoConfig, wie ich Ihren Code nicht sehen, es in.Grundsätzlich müssen Sie die dojoConfig var erstellen, bevor einschließlich dojo, zum Beispiel:

<!-- If including dojo from googleapis --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 

<!-- And later do this --> 
<script type="text/javascript"> 
    require([ 
     'myApp/myComponent', 
     'dojo/dom', 
     'dojo/dom-construct' 
     ], function(myComponent, dom, domConstruct) { 
      //do something 
    }); 
</script>

Laden myApp/myComponent fehl, weil der Lader diese URL verwenden

http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/myApp/myComponent.js

aber, wenn vor dojo einschließlich wir initiieren die dojoConfig

<!-- First dojoConfig --> 
<script type="text/javascript"> 
    var dojoConfig = { 
     packages: [ 
      { 
       location: '/js/myApp', 
       name: 'myApp' 
      } 
     ] 
    }; 
</script> 

<!-- Then load dojo --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

Dann versucht der Loader, myApp/myComponent von meinem lokalen Server zu bekommen.

Beachten Sie, dass dies ein illustratives Beispiel dafür ist, wie Sie die dojoContig verwenden können.

Quelle

2016-07-14 23:39:17

Wo ist der beste Ort, um die DojoConfig zu erstellen? Macht es einen Unterschied, dass diese Web-App das angularjs-Framework verwendet? – user25976

Sie können es inline in den HTML-Code einfügen, dh in index.html, wo Sie alle Ihre Skripte einschließen, oder Sie können eine einzelne 'js'-Datei dafür erstellen, aber Sie müssen sicherstellen, dass sie vor dem' Dojo geladen wird. js'. In beiden Fällen sollte die 'dojoConfig' existieren, damit sie von' dojo.js' verwendet werden kann. Und es ist egal, 'AngularJS' zu verwenden. –

Ich habe versucht zu integrieren, was Sie vorgeschlagen haben. Gehe ich das richtig? Siehe edits .. – user25976

Probleme beim Importieren von ArcGIS Javascript-API-Ressourcen und Laden von Dojo

Antwort

Verwandte Themen