角度コンポーネントでリーフレットを使用する

Question

角度ワークフローではかなり新しいです。リーフレットを使って自分のページにマップを追加しようとしています。私はコンポーネントを通してそれをやりたい。 2つの手順（コメントに記載）を踏まえて（無駄なく）実行しました。

あなたはここで結果を確認できます。 http://oye-api.herokuapp.com/test.html

をしかし、私は何もありません。マップはありませんが、エラーもありません。私は何が悪いのか分からない。手伝ってくれますか？

ありがとうございます！

これは私が持っているものです。

page.html

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
 
<script src="bower_components/angular/angular.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
 
    <script src="bower_components/angular-mocks/angular-mocks.js"></script> 
 

 
<script src="app.module.js"></script> 
 
<script src="map/map.module.js"></script> 
 
    <script src="map/map.component.js"></script> 
 

 
<map></map>

map.component.js

angular. 
 
    module('map'). 
 
    component('map', { 
 
    templateUrl: 'map/map.template.html', 
 
    controller: MapController 
 
    } 
 
); 
 

 
MapController.$inject = ['$scope']; 
 

 
function MapController($scope) { 
 
    var ctrl = this; 
 
    angular.extend(ctrl, { 
 
     san_fran: { 
 
      lat: 37.78, 
 
      lng: -122.42, 
 
      zoom: 13 
 
     }, 
 
     events: {}, 
 
     layers: { 
 
      baselayers: { 
 
       osm: { 
 
        name: 'OpenStreetMap', 
 
        url: 'https://{s}.tiles.mapbox.com/v3/examples.map-i875mjb7/{z}/{x}/{y}.png', 
 
        type: 'xyz' 
 
       } 
 
      } 
 
     }, 
 
     defaults: { 
 
      scrollWheelZoom: false 
 
     } 
 
    }); 
 
}

map.template.html

<leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'></leaflet>

app.module.js

'use strict'; 
 

 
angular.module('oyeApp', [ 
 
    'ngRoute', 
 
    'map' 
 
]);

map.module.js

'use strict'; 
 

 
angular.module('map', [ 
 
    'ngRoute' 
 
]);

Answer 1

地図のdiv は、下のリンクを参照して表示するようにCSSクラスを追加します。私は従うことをしようとした http://leafletjs.com/examples/quick-start/