私の角型アプリケーションは正しくjavascriptをロードしていましたが、ルーティング用に正しく設定されていませんでした。私はそれを修正しようとしているが、今、私のjavascriptの警告は、ファイルが接続されていないことを意味するポップアップされません。誰かがなぜsearchRadius.htmlの部分がindex.htmlにロードされていないのか教えていただけますか？私はindex.htmlの一番下にあるビューを適切にレンダリングしていますか？<div ui-view></div>？Viewとコントローラの両方がindex.htmlにロードされていません

のindex.html：

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
     <link rel="stylesheet" href="example/assets/stylesheets/example.css"> 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="website_libs/dev_deps.js"></script> 
     <script src="https://code.angularjs.org/1.3.6/angular.js"></script> 
     <script src="dist/angular-ui-router.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script> 
     <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script> 
     <script src="getLoc.js"></script> 
     <script src="searchRadius.js"></script> 
     <script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD_g7xCYEi-U54SYfTXQ_lukRsChkWgjXQ'></script> 
     <title>Pet Locate</title> 
     <!--NEW STUFF FROM TOM--> 
    </head> 
    <body style="height: 100%"> 
     <h1 style="text-align: center">Pet Locate</h1> 
     <div ui-view></div> 
    </body> 
</html>

searchRadius.js：

(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('location', { 
      url: '/:lat/:lon', 
      templateUrl: 'searchRadius.html', //changed from index to searchRadius.html 
      controller: 'MapsCtrl', 

      resolve: { 
       resolveMap: function(MapService, $stateParams) { 
        return MapService.getData($stateParams.lat, $stateParams.lon).then(function(rsp) { 
         console.log(rsp); 
         return rsp; 
        }).catch(function(err) { 
         console.log(err); 
        }) 
       } 
      } 
     }); 

    }) 

    .config(['uiGmapGoogleMapApiProvider', function(GoogleMapApi) { 
     GoogleMapApi.configure({ 
      key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g', 
      v: '3', 
      libraries: 'weather,geometry,visualization' 
     }); 
    }]) 


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 'resolveMap', 
     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 
       $state.transitionTo('location', { //location is the state name 
        center: $stateParams.center, 
        radius: $scope.map.circle.radius 
       }, { 
        notify: false 
       }); 
      }, 1000); //end of interval function 


     } 
    ]); //end of controller 

})(window, angular);

searchRadius.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> 
</div>

出典

2016-10-07 Anonymous

Iトンあなたのルート設定に以下のコードで問題があります。

resolve: { 
    resolveMap: function (MapService, $stateParams) { 
     return MapService.getData($stateParams.lat, $stateParams.lon).then(function (rsp){console.log(rsp); return rsp; }).catch(function (err){console.log(err);}) 
    } 
}

これを削除してもう一度ページを読み込むことはできますか？デベロッパーツールコンソールで読み込み中にエラーが発生しましたか？

出典

2016-10-07 07:13:23 rinoy

それを修正しました、ありがとうございます！アラートに正しい緯度と経度が表示されます（URLから引き込まれます）。しかし、このページはまだ空白です！コンソールにエラーが表示されていません –

実際には完璧に動作しています！ –

searchRadius.html

SearchRadius

のような単純なタグを追加して、その表示の有無を確認してください。テンプレートhtmlが読み込まれているかどうかを確認できます。 – rinoy

Viewとコントローラの両方がindex.htmlにロードされていません

答えて

SearchRadius

関連する問題