Simple Openlayers + Angular

Question

i'm trying to implement simple openlayers map using angular

var app =angular.module('app',[] );

app.controller= ('myController',function() {

    var map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:4326"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        layers: [
        new OpenLayers.Layer.OSM()]
    });

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }
    return map;
}

I can't find solution for this error :

Uncaught Error:

[$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)

What am i doing wrong?

This seems to be some kind of dependency injection problem have a look at this fiddle there it is working maybe you missed something jsfiddle.net/tianhai/r4w5r — stackg91
this "jsfiddle.net/tianhai/r4w5r – stackg91" is angular 1.1 version. I'm using 1.3 and this example doesnt work anymore — jackersson

Deblaton Jean-Philippe Deblaton Jean-Philippe · Accepted Answer · 2015-09-17T11:25:26

app.controller is a function.

Here is the good syntax :

app.controller('myController',function() {

    var map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:4326"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        layers: [
        new OpenLayers.Layer.OSM()]
    });

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }
    // return map; <- this should not be done. I don't understand what you're trying to do with a controller
});

In angular, controllers are used to bind data and functions to your html view. A controller is not a function that you call to get a result returned. You call functions that are defined into your controller. eg:

angular.module("app", []);
angular.module('app').controller('someController', function(){
    var self = this;

    self.hello = "World";

    self.alertMe = function(){
        alert("HELLO");
    };
});

and the html :

<body ng-app="app">
   <div ng-controller="someController as example" 
        ng-click="example.alertMe()">
            Hello {{example.hello}} 
   </div>
</body>

Will have as result :

Hello World

and if you click on it, it will open an alert.

Simple Openlayers + Angular

1 Answers