AngularJS $ stateProviderのURLが空白のページになる

Question

私はangle-ui-routerを使用していて、第1のコントローラと同様の第2のコントローラを設定していますが、2番目のコントローラのルートが正しくルーティングされていません。誰かが私が間違っていた場所を教えてもらえますか？

最初のコントローラ用のHTML（正常に動作します）：

<div style="height: 100%"> <!--took out: ng-if="map.center !== undefined"--> 
    <ui-gmap-google-map 
         center='map.center' 
         zoom='map.zoom' 
         draggable='map.draggable' 
         dragging='map.dragging' 
         refresh='map.refresh' 
         options='map.options' 
         events='map.events' 
         pan='map.pan'> 


     <ui-gmap-circle 
         center='map.circle.center' 
         radius='map.circle.radius' 
         fill='map.circle.fill' 
         stroke='map.circle.stroke' 
         clickable='map.circle.clickable' 
         draggable='map.circle.draggable' 
         editable='map.circle.editable' 
         visible='map.circle.visible' 
         events='map.circle.events'> 

     </ui-gmap-circle> 


    </ui-gmap-google-map> 
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD_g7xCYEi-U54SYfTXQ_lukRsChkWgjXQ'></script> 
</div> 

第一コントローラ（正常に動作します）：

(function (window, ng) { 
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router']) 



    .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
     $stateProvider.state('searchRadius', { 
      url: '/:lat/:lon', 
      templateUrl: 'searchRadius.html', //changed from index to searchRadius.html 
      controller: 'MapsCtrl', 
     }); 
    }) 


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 
     function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) { 
      $log.currentLevel = $log.LEVELS.debug; 
      var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) }; 
      alert(JSON.stringify(center)); 
      Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ... 

      console.log($stateParams); 

      $scope.map = { 
       center: center, 
       pan: false, 
       zoom: 16, 
       refresh: false, 
       events: {}, 
       bounds: {} 
      }; 

      $scope.map.circle = { 
       id: 1, 
       center: center, 
       radius: 500, //(current time - date lost)*km/hour 
       stroke: { 
        color: '#08B21F', 
        weight: 2, 
        opacity: 1 
       }, 

       fill: { 
        color: '#08B21F', 
        opacity: 0.5 
       }, 
       geodesic: false, // optional: defaults to false 
       draggable: false, // optional: defaults to false 
       clickable: true, // optional: defaults to true 
       editable: false, // optional: defaults to false 
       visible: true, // optional: defaults to true 
       events: { 
        dblclick: function() { 
         $log.debug("circle dblclick"); 
        }, 
        radius_changed: function (gObject) { 
         var radius = gObject.getRadius(); 
         $log.debug("circle radius radius_changed " + radius); 
        } 
       } 
      } 

      //Increase Radius: 
      $interval(function(){ 
       $scope.map.circle.radius += 30; //dynamic var 
      }, 1000); //end of interval function 


     } ]); //end of controller 

})(window, angular); 

第二HTML（空白ページ）：

<!--Add ability to input location as address--> 

<div> 
     <ui-gmap-google-map 
         center='map.center' 
         zoom='map.zoom' 
         draggable='map.draggable' 
         dragging='map.dragging' 
         refresh='map.refresh' 
         options='map.options' 
         events='map.events' 
         pan='map.pan'> 


     <ui-gmap-circle 
         center='map.circle.center' 
         radius='map.circle.radius' 
         fill='map.circle.fill' 
         stroke='map.circle.stroke' 
         clickable='map.circle.clickable' 
         draggable='map.circle.draggable' 
         editable='map.circle.editable' 
         visible='map.circle.visible' 
         events='map.circle.events'> 

     </ui-gmap-circle> 


    </ui-gmap-google-map> 

    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWKJRXSux3dAdEYOYqjkoi2MCW8dutFbY&callback=initMap"> 
    </script> 
</div> 

第二コントローラ（エラーなしの空白ページが表示されます）。

あなたは必ずしも

を要求されない$ routerProviderを使用している

(function (window, ng) { 
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router']) 



    .config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error 
     $stateProvider.state('getLocation', { 
      url: '/getLocation', 
      templateUrl: 'getlocation.html', //changed from index to searchRadius.html 
      controller: 'GetlocationCtrl', 
     }); 
    }) 



    .controller('GetlocationCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$state", "$stateParams", 
     function ($scope, $log, GoogleMapApi, $state, $stateParams) { 
      $log.currentLevel = $log.LEVELS.debug; 
      var center = { latitude: 49.22, longitude: -122.66 }; //default center 
      alert(JSON.stringify(center)); 

      console.log($stateParams); 

      $scope.map = { 
       center: center, 
       pan: false, 
       zoom: 16, 
       refresh: false, 
       events: {}, 
       bounds: {} 
      }; 

      $scope.map.circle = { 
       id: 1, 
       center: center, 
       radius: 500, //(current time - date lost)*km/hour 
       stroke: { 
        color: '#08B21F', 
        weight: 2, 
        opacity: 1 
       }, 

       fill: { 
        color: '#08B21F', 
        opacity: 0.5 
       }, 
       geodesic: false, // optional: defaults to false 
       draggable: false, // optional: defaults to false 
       clickable: true, // optional: defaults to true 
       editable: false, // optional: defaults to false 
       visible: true, // optional: defaults to true 
       events: { 
        dblclick: function() { 
         $log.debug("circle dblclick"); 
        }, 
        radius_changed: function (gObject) { 
         var radius = gObject.getRadius(); 
         $log.debug("circle radius radius_changed " + radius); 
        } 
       } 
      } 


     } ]); //end of controller 

})(window, angular); 

Answer 1

（ⅰ）（ⅱ）私はあなたのコードをチェックするときにも、あなたは第二のコントローラをロードした後に最初のモジュールをロードしています。このようなスクリプトをindex.htmlに入れてください。

<script src="searchRadius.js"></script> 
<script src="getLoc.js"></script>