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.