Angular 2 Demystified

In this video we are going to look at interfaces in TypeScript.

In this video we are going to look at a basic class.

In this video we are going to look at adding a constructor to our class.

In this section we are going to look at class inheritance.

In this section we are going to look at how you can use the project files and the dev server.

In this video we are going to briefly look at Angular's API reference and available guides.

In this video we are going to learn about Angular concepts at a very high-level. In addition, we will learn how different concepts in Angular are related to each other to help us have a better mental picture for the rest of the course

In this video we are going to look at components at a ver high level. We are going to learn what they are, and how you can make them at a very high level.

In this video we are going to set up a project from scratch to make our first component.

In this video we are going to define the the class and template for our component and run it in the browser.

In this video we are going to define an input for a simple component.

In this video we are going to learn how you can bind native DOM properties to component instance variable.

In this video we are going to learn what local variables are and how we can use them.

In this video we are going to learn about component outputs and how you can create custom events for component outputs

In this video we are going to learn how to make a very simple attribute directive.

In this video we are going to learn about the host property of attribute directives.

In this video we are going to learn how to use the `NgIf` structural directive.

In this video we are going to learn how to use the built-in NgSwitch directive to conditionally show or hide elements on the page.

In this video we are going to write a custom pipe.

In this video we are going to learn about pipes with parameters.

In this video we are going to learn how to use a pipe inside a component's class.

In this video we are going to learn how to use the built-in date pipe in a template and a controller.

In this video we are going to learn how to use the built-in Slice pipe.

In this video we are going to learn about the Async Pipe and when you can use it.

In this video we are going to learn how to use the http module to make a GET request to get data from an endpoint.

In this video we will download the course repository from Github and install the dependencies of for the project. Make sure you have node installed on your machine and you get the versions of node and npm by typing `npm -v` and `node -v`. Also don't use `sudo` when using npm. If you get permissions problems, give permissions to the folder that complained about permissions. I have added the `chown` command in the readme file that you can use to give yourself permissions to the folders containing node modules. If you have problems installing node, a basic search on stackoverflow can help you solve the problem. If you can't still solve issues with your node setup, let me know and I will help you out.

Everything in Angular2 is a component. Specifically a tree of components. Check out this diagram for getting a better picture of component tree in Angular2: https://angular2-intro.firebaseapp.com/#/35. Also check out the following link to understand the importance of nested components in Angular2: http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications. At the end, it all boils down to dividing your application into logical components. Your root component job would be to require the components at the highest level. So, your root component will essentially require the features of your application and then each component would require its own components. This creates a very clean architecture and an application that is very easy to reason about.

In this video we will move the code for the root component to the main file. The mail.ts script will instantiate the app and will bootstrap the application. Consequently, the root component will then load the components for the application.

In this video we will organize our files to reflect the architecture of the application. All the components will be put in the components folder and each component will be put in their respective folder. This separation of concern is very important since each component will have all the files and scripts that are associated with it, making reasoning about the application trivial.

In this video we will create our second component, the messenger component. This component is simply responsible for showing a list of messages to the screen. We will see later how this component can be composed with another component to create the messages.

In this video we will use the For directive to loop through the messages array and display them in the messenger component's view.

In this video we will create the compose component. The compose component is responsible for creating new messages. Later we will see how we can compose the messenger component with the compose component to show the messages in the messenger view.

In this video we will create a service that abstracts the behavior and data associated with the messenger component. Generally, it is a good idea to keep the controllers as lean as possible and delegate the heavy tasks to the service.

In this video we will create an event handler for the click event. We will read the value from the input and read it when clicking on the button. We will also look at using local variables to passing DOM elements to event handlers.

In this video we will look at using the keyup event to clear the input after the enter key is pressed. We will read the value, set the value to the instance variable, and then we will use the event's target to set the value to an empty value.

In this video we will create the compose component. The compose component is responsible for creating new messages. Later we will see how we can compose the messenger component with the compose component to show the messages in the messenger view.

In this video we will use the Debugger in Chrome Dev tools to debug why the message wasn't showing up in the view.