Create mapify app using Angularjs and other frameworks

Getting prepared

We will utilize the same code that we utilized as a part of the past case as a beginning stage. What’s more, it is suggested that you as of now have Bower introduced on your framework. On the off chance that you don’t have or know Bower, don’t stress, we will exhibit how to introduce it physically.

At the root project folder, open your terminal window and type:

bower install ngmap --save

To get the directive to work properly, you need to add the Google Maps script. In this example, we will use the code directly from the Google CDN through this

link: //maps.google.com/maps/api/js.

Open the index.html file and add the following script tag right after the mappingService.js script:

Add the ng-map script right after the Google Maps script: Don’t place any code inside the tag; when generators run any task, this block of code is always replaced. Open the app.js file and add the following highlighted code to the angularjs dependencies:

angular.module('yeomananddirectives', [ 'ngResource', 'ui.bootstrap', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'mapping', 'ngMap', ])

At this point, we have our directive maps installed in our application. Now, let’s see the necessary steps to use the directive. Open mapping.html and add the following code:

Open mappingCtrl.js and add the following code:

var positions = [ { lat: -23.630153, lng: -46.563964 }, { lat: -23.625828, lng: -46.571946 }, { lat: -23.634006, lng: -46.576066 }, { lat: -23.624883 ,lng: -46.564209 } ]; $scope.positions = positions;

Let’s check the final result. Open your terminal window and type the following command: grunt dev Your default browser will open at the application welcome screen. Check the mapping URL

http://127.0.0.1:8000/#!/mapping.

Add the following code to the mappingService.js file inside the mapping module:

var positions = [ { lat: -23.630153, lng: -46.563964 }, { lat: -23.625828, lng: -46.571946 }, { lat: -23.634006, lng: -46.576066 }, { lat: -23.624883 ,lng: -46.564209 } ]; return { all: function() { return positions; } }

Now, add the mappingService factory to mappingCtrl as a dependency:

angular.module('mapping') .controller('MappingCtrl', ['$scope','MappingService', function ($scope, MappingService) { // Using a service $scope.positions = MappingService.all(); }]);

In this way, we have a greater flexibility to use this directive. Tip

Note that our service in a real application will be an endpoint to a server that returns the positions stored in a database.