Angular Google Maps Tutorial: Demo, Examples

Angular Google Maps is a set of directives that integrate Google Maps in an AngularJS application. It makes using Google Maps in such an application very easy as you don’t need to know the Google Maps API in order to use it.

Getting Started

Let’s start with a simple example to illustrate how easy it is to display data on a map:

angular.module('appMaps', ['uiGmapgoogle-maps'])
    .controller('mainCtrl', function($scope) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
    });

This is all your controller needs in order to display a map centered on the specified location, which is defined by a latitude and a longitude. Zoom level is a value between 1 and 20, 20 being the most zoomed-in value, and 1 being the most zoomed-out.

The HTML code to display that map is fairly straightforward:

<div id="map_canvas" ng-controller="mainCtrl">
      <ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
 </div>

All of this obviously requires some dependencies: The Google Maps API, Angular JS, Angular Google Maps and Lodash, which is a dependency of Angular Google Maps. Here is what the end result looks like:

Build an Angular 1.5 component – An AngularJS tutorial

Angular 1.5 recently introduced components, a feature also available in Angular 2. Using components from and in Angular 1.x makes a lot of the sense as it will help your application bridge the gap between Angular 1.x and Angular 2, which is the main reason why the Angular team announced components availability in Angular 1.5.

What’s a component?

A component is basically a directive that uses a simpler configuration and that is suitable for a component-based architecture, which is what Angular 2 is all about. Think of a component as a widget: A piece of HTML code that you can reuse in several different places in your web application.

Class-based Views Django Tutorial

The web framework for perfectionists with deadlines.

Django is all about making programmers more productive. As a web application framework, it provides tools and structure to help web developers get their work done fast.

The reason that developers use application frameworks today is because the vast majority of web programming is extremely repetitive: handling incoming requests, checking session information, authenticating users, CRUD database operations, etc.

The fraction of code that makes your web application unique is very small. Frameworks help developers satisfy one of the key principles of good code design: don’t repeat yourself (stay DRY).

View Functions and the Need for Class-based Views

One of the first tools that the Django project provided to developers was view functions:

def list_user_snippets(request):
    # Show list of a user's code snippets
    # for a Pastebin-like application
    snippets = Snippet.objects.filter(user=request.user)
    context = {'snippets':snippets}
    return render(request, 'mysnippets/snippet_list.html', context)

Django REST Framework Tutorial

If you are working on a single-page application and you want it to have some persistence, it’s a really good idea to have a REST api. This way you’ll be able to store your domain’s entities in the database. In this article, you will learn how to create a basic application with Django and Django REST framework. You can use this as a starting point, and then it’s quite easy to extend this project with different pluggable Django applications.

You can find a repository here and demo here. The animation below shows the automatically generated html interface of the api created in this tutorial:

Single Page Application using AngularJs Tutorial

AngularJs is a powerful javascript framework for building dynamic web applications. It became insanely popular nowadays. The good thing about Angular is that it has a set of ready-to-use modules to simplify building of single page applications.

In this tutorial, we will show you how to build a simple single page application. Even though we will build a small app, you will learn the concepts and will be able to build larger apps.

Single Page Application

Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

Previous Page 12