First I ran through the Angular tutorial, which took a few hours to absorb. Then I dove right in to building my one page application based on the Angular Seed Project and Google Maps for AngularJS

The most basic setup requires changing 3 files:

  • /app/index.html
  • /app/partials/map.html
  • /app/css/app.css
  • /app/js/app.js
  • /app/js/controller.js

There is one thing that makes this tricky – in the Angular tutorial they show several ways to use the controllers constructor function (Step 5, A Note on Minification) to do dependency injection and if your not paying attention you may not be familiar with the syntax used in the Angular seed app.

controller.js

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function() {

  }])
  .controller('MyCtrl2', [function() {

  }])
 .controller('Map', ['$scope', function($scope) {
 	$scope.map = {
	    center: {
	        latitude: 45,
	        longitude: -73
	    },
	   	zoom: 8
	};

	console.dir($scope.map);
 }]);

Pretty straight forward to get a boiler plate application up and running.

Leave a reply

Your email address will not be published. Required fields are marked *