Angular 2+ with Typescript - Essential Training

Hello and welcome to the getting started section of this course.

Repo is located here: https://github.com/jakblak/learn-angular2

Download the slides here: https://www.slideshare.net/PatrickSchroeder1/angular-2-essential-training

So what exactly is Angular? AngularJS is a leading framework for building javascript heavy single-page web applications.

Repo for this course: https://github.com/jakblak/learn-angular2

Angular 2 was conceived as a complete rewrite to Angular 1 in order to fulfill the expectations of modern developers who demand blazing speed and responsiveness from their web applications.

Which language to use? Angular 2 provides a variety of options when choosing a language to code in. We can use ES5 which is the current version of javascript, Dart, CoffeeScript, either of the newer versions of javascript known as ES2015 and a future version of javascript known as ES7 or Typescript, which is the preferred language.

Now that we’ve made the decision to code using the Typescript language, lets take a brief look at some of the core language characteristics as it relates to Angular 2.

In this section, we’ll look at the different developer environment options and set up our first Angular app.

In this lecture, we discuss operating systems, installing Node.js and choosing an editor.

Getting setup with our starting code. 

Understand the concept of modules.

Hint: Module = File

Introduction to section.

The Angular docs tell us that NgModules are used in order to help us organize our application into cohesive blocks of functionality. So lets explore exactly what they mean by that.

In this video you’ll learn how we bootstrap our application which is the process of putting together the minimal pieces needed to run an Angular application.

Components are at the heart of Angular 2. In this section we’ll discuss how to create and use components to encapsulate functionality.

Components are the foundation of modular development and are brand new in Angular 2.

To get you familiar using components, lets reconstruct our AppComponent making a few changes.

In this video we discuss what comprises a component and how we should be structuring our components.

Lets now go through the process of creating a new nested component to act as a directive as well as walk through how to use a templateUrl and styles within our component.

Discussion of how to hide our Javascript files from appearing in the editor.

In this video we’re going to update our app so that it starts to look more like our sample application.

Data binding is the mechanism we use for communicating between the template and the component class.

The fist type of data binding we’ll discuss is that of 1-way binding. One way binding is handled using either interpolation or property binding.

In this video we’re going to make our books-list component the main page of our application. Then we’ll add in some new data in order to demonstrate data-binding.

The next type of binding we need to talk about is that of 2-way binding. When using 2-way binding our view is bound to our model.

Add 2-way binding to our search field.

Event binding is used to respond to user actions.

Back in our app we’re going to create event binding to toggle between showing or hiding one of our images.

You can think of a Directive in Angular as an HTML element or attribute that is used to extend and enhance our HTML.

This video will cover component and attribute directives.

We use the NgIf directive when we want to add, remove or update view elements.

The NgFor directive instantiates a template once per item from an iterable.

The ngClass directive adds and removes CSS classes on an HTML element.

Pipes allow us to transform or format our data. In this way we can take data given to us by an API or database and make it more appropriate for our needs inside of our application.

Angular provides us with some built-in pipes that we can easily use inside of our templates. These include: uppercase, lowercase, decimal, currency, date and JSON.

In this video we’re going to see how you can go about creating your own custom pipe. We'll first walk through the process in our slides and then build a Truncate Pipe to limit the amount of characters displayed in a description.

In this section we’re going to be talking about Interfaces in Typescript. We’ll start off with a definition of what interfaces are and explore why they are used.

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Lets now create and export a Book interface.

In this section we’re going to be discussing how to use component lifecycle hooks.

Angular defines lifecycle hooks as a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Lets now see how to add a new lifecycle hook to our application.