Using Leaflet in Angular components
<p>I'm quite new in the Angular workflow. I'm trying to add a map to my pages using Leaflet. I'd like to do it through components.
I followed two instructions (listed in comment) in order to make it happen (in vain).</p>

<p>You can see the result here:
<a href="http://oye-api.herokuapp.com/test.html" rel="nofollow noreferrer">http://oye-api.herokuapp.com/test.html</a></p>

<p>But I have nothing. No map, but no error either. I don't know what I did wrong. Can you help?</p>

<p>Thanks!</p>

<p>This is what I have:</p>

<p>page.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /&gt;
&lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/angular-mocks/angular-mocks.js"&gt;&lt;/script&gt;

&lt;script src="app.module.js"&gt;&lt;/script&gt;
&lt;script src="map/map.module.js"&gt;&lt;/script&gt;
    &lt;script src="map/map.component.js"&gt;&lt;/script&gt;

&lt;map&gt;&lt;/map&gt;</code></pre>
</div>
</div>
</p>

<p>map.component.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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
        }
    });
}</code></pre>
</div>
</div>
</p>

<p>map.template.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'&gt;&lt;/leaflet&gt;</code></pre>
</div>
</div>
</p>

<p>app.module.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';

angular.module('oyeApp', [
  'ngRoute',
  'map'
]);</code></pre>
</div>
</div>
</p>

<p>map.module.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';

angular.module('map', [
  'ngRoute'
]);</code></pre>
</div>
</div>
</p>