Introduction

EFA Logo

Eleven Fifty Angular Firebase App Introduction

Angular, AngularFire, Firebase

A full scale walkthrough introducing students to the core concepts of Angular, and connecting an Angular website to Firebase.

Topics we are going to cover

  • Creating an Angular project

  • Using the Angular CLI

  • Including Bootstrap and jQuery in an Angular project

  • Routing between views

  • Passing information between files in Angular

  • Authentication

  • Queries to Firebase’s “Real-Time Database”

  • Deploying to Firebase

Assumptions

This documentation assumes that:

  • You have Node.js is installed, and you are familiar with basic npm commands such as “npm install”.

  • You are familiar with the Command Line Interface (CLI), and able to change and read directories. (Windows uses “Command Prompt” and MAC uses “Terminal”)

  • You have Git installed and are able to perform basic Git commands, such as “git add” and “git commit”.

  • You are comfortable with HTML, CSS, and JavaScript.

  • You are familiar with outside libraries such as Bootstrap and jQuery. This walkthrough will use Bootstrap version 4.

  • You have Visual Studio Code installed. You may use a different text editor, but VS Code is highly recommended for Angular development. This walkthrough assumes you are using VS Code. Don’t worry if you are unfamiliar with VS Code, this walkthrough will demonstrate basic usage.

  • You have a Google account.

What is Angular ?

Angular is a front end JavaScript Framework, built by Google. Angular practices the MVC (Model View Controller) design pattern. The definition from Google is—“Angular is a platform that makes it easy to build applications with the web.” The annotation that developers use for Angular is ‘ng.’ These names are synonymous with one another, don’t be too shocked to see the reference of ‘ng.’ The Angular documentation that will be referenced throughout this build is located here. It’s important to note that we are working with Angular 5, which is a whole different paradigm from AngularJS(1.5).

SPAs

Don’t worry if that didn’t give you much. The simple explanation of Angular is that it makes it easy to build complex websites. Angular excels at building “Single Page Apps” or SPAs.

The idea of an SPA is… The browser only loads ONE PAGE, even if your site looks like it has way more than just one page. When a user clicks a link to go to the “About Us” page, it doesn’t load a whole new page. In fact, there’s no server request-response cycle for the “About Us” page. Instead of downloading a whole new page. SPAs just change the content on the existing page.

img

For example, if you are on the “Home Page” and click a link to visit the “About Us” page… the “Home Page” content will disappear, and the “About Us” content will magically appear. The header will not reload, the footer will not reload, and there will be no wasteful and time consuming request-response cycle with the server… instead, Angular will erase the “Home Page” content (think CSS rule: display: none) and tell the “About Us” content to appear.

In short, why learn Angular? SPAs feel incredible fast. Unfortunately, they are incredibly hard to build. Angular makes it easy.

To do this, Angular uses a “superset” of JavaScript. A more fancy way of writing JavaScript that adds some advanced features to JavaScript. This superset is called “TypeScript”. TypeScript is almost like a blanket that wraps itself around JavaScript. There’s still JavaScript inside, but the outside looks pretty different.

When all’s said and done, when you build and deploy your Angular website, all of the TypeScript will be compiled into JavaScript. The finished product contains only JavaScript - no TypeScript.

What is Firebase?

Firebase is a “Backend-as-a-Service” or BaaS offered by Google. Firebase gives developers the tools to develop high-quality apps and grow your user base. Firebase covers the essentials so developers can focus on the front-end.

Simple answer: No more building Express servers in Node.js. Firebase handles everything back-end related.

  • Want a server to host your website? - Check

  • Want a database to store information? - Check

  • Want a file storage system to host images or videos? - Check

  • Want users to login & logout of your website? - Check

  • Want to handle some server-side logic? - Check

  • Want your server hosted in multiple global locations, so even folks across the world have fast response times? - Check

  • Want your data backed up, in case a server dies? - Check

  • Want scaling built in, so if your website doesn’t die if it suddenly becomes popular and gains 1000+ users? - Check

  • Want to build an app for a mobile phone, and share information with the web interface? Check

  • Want all of this done safely and securely, with little effort on your part? - Check

Firebase handles ALL of that for us, for free (to a limit). If your website grows gigantic, they will turn everything off until you pay them.

What are we going to build?

We will build a very simple SPA (Single Page App) that acts as a public message board. Anyone can join and post a message for all the world to see. The home page will simply be a list of messages that have been posted. There is a header at the top of the page and a footer at the bottom.

img

There will be a page for visitors to register & create an account…. and another page for existing users to log in.

img

Users who are logged in will be able to create a new message.

img

Users can edit or delete messages - but only their own messages.

img

Module 1

Last updated