Introduction
Last updated
Last updated
Angular, AngularFire, Firebase
A full scale walkthrough introducing students to the core concepts of Angular, and connecting an Angular website to Firebase.
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
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.
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).
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.
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.
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.
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.
There will be a page for visitors to register & create an account…. and another page for existing users to log in.
Users who are logged in will be able to create a new message.
Users can edit or delete messages - but only their own messages.
