Angular Front To Back

Here we will setup our development environment including installing Node.js with NPM, Visual Studio Code and Git Bash

We will get started with the Angular CLI (Command line interface) to generate a new Angular application

We will take a look at what makes Angular 4 tick by looking at the folder and file structure of an application

TypeScript is a superset of JavaScript and is used with most Angular 2+ applications. Here we will look at some of the features of TypeScript

We will discuss what a component is and what the advantages of using them are

I will show you how to bind data from your component to the template using string interpolation 

Let's take a look at the different types of data that we can define in Angular and TypeScript.

We will look at how to add interfaces and models to map out our component properties

An overview of what we will be doing in section 4

We can use separate files for our html templates and css files

How to loop through data in your template using the ngFor directive

Add conditionals to your templates using the ngIf and ngSwitch directives

Learn how to bind data dynamically to attributes using property binding

Add dynamic classes with the ngClass directive

Add dynamic styles using the ngStyle directive

Use pipes like currency, percentage and date to format data in your templates

An overview of what we will be working on in section 5

Working with mouse events like click, hover and drag

How to change properties dynamically using events

Working with keyboard and input events like keyup, keydown, blur and focus

Using the ngModel directive for two way data binding

Handling form submission and manipulating component properties via forms

How to create template driven forms with ngForm and add some validation

An overview of what we will look at in section 6

What is a service and what are they used for? Also what are the advantages of using them?

I will show you how to create a service and import it into ngModule

We will return an observable / data stream from a service

We will make a GET request to the JSONplaceholder REST API service using the Http module

We will make a POST request to the JSONplaceholder REST API service using the Http module

We will make a DELETE request to the JSONplaceholder REST API service using the Http module

We will make a PUT request to the JSONplaceholder REST API service using the Http module

An overview of what we will learn in section 7

What is a router and how does it work?

We will look at how to define route paths and link them to components

We will look at how to use parameters in the url and how to grab them from inside of a component and use them

We will look at the FAQ app project and see what we will be building

Let's create the navbar and the question list component

In this video we will log into Firebase and create a new project, create the clients collection and setup a new user

We will generate all of the components needed for this app and setup the navbar and router

We will install and setup Firebase and AngularFire2 using NPM and import the necessary modules

We will fetch clients from firebase and bring them into the clients component

We will create the form to add a client to the system

We will create the service function to insert clients into the clients collection in Firebase

We will create the individual client component to display client info as well as the outstanding balance

In this video we will add the functionality to update the client balance from the user details component

In this video we will add the ability to edit and delete clients from Firebase through our application

We will add login functionality and authentication via Firebase and AngularFire2

We will add the logout functionality and hide and show nav links based on login status

We will create the authentication guard to apply to certain routes for access control

We will add the ability to register users which will be optional when we create the settings

Create the settings service to handle app settings like allowing registration

Create the settings form so that we can easily control the settings from the application