Utilisation de la notice dans les composants angulaires

Question

Je suis relativement nouveau dans le flux de travail Angular. J'essaie d'ajouter une carte à mes pages en utilisant Leaflet. Je voudrais le faire à travers des composants. J'ai suivi deux instructions (listées dans le commentaire) pour que cela se fasse (en vain).

Vous pouvez voir le résultat ici: http://oye-api.herokuapp.com/test.html

Mais je n'ai rien. Pas de carte, mais pas d'erreur non plus. Je ne sais pas ce que j'ai fait de mal. Pouvez-vous aider?

Merci!

C'est ce que j'ai:

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

Ajouter classe css pour montrer la carte div lien ci-dessous se réfèrent: http://leafletjs.com/examples/quick-start/