Angular 2 Demystified
4.1 (69 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,154 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Demystified to your Wishlist.

Add to Wishlist

Angular 2 Demystified

Conquer Angular2 and TypeScript fundamentals - Build Great Mobile & Web Applications With Angular 2 (EBOOK INCLUDED)
4.1 (69 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,154 students enrolled
Created by Amin Meyghani
Last updated 5/2016
English
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 5 Articles
  • 15 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create Angular components to describe your application features
  • Compose Angular components and delegate functionalities to interested parties.
  • Use Angular Component Controllers to encapsulate instance variables and make them available to templates
  • Make Service Classes to handle business logic of your application
  • Use internal Directives, namely for, property selector and event handler
  • Use local variables in templates to get handle of DOM elements
  • Handle events using Angular event syntax and the DOM event system.
  • Use the debugger in Chrome DevTools to debug issues
View Curriculum
Requirements
  • You should know JavaScript very well before taking this course
  • You should also have basic understanding of the Angular framework
  • You should be familiar with the basics of ES6. For example you should know how to create a class, how to import modules, etc.
  • You should also be familiar with the basics of TypeScript.
Description

NOTE: THE COURSE IS STILL UNDER DEVELOPMENT AND NEW CONTENT IS CONSTANTLY BEING ADDED. GET THE COURSE NOW WHILE IT'S AT ITS LOWEST PRICE AND GET FUTURE CONTENT AT NO EXTRA CHARGE.

Master the fundamentals of Angular 2 and TypeScript using easy-to-follow examples and sample apps.


Angular 2 is going to be a game changer in the Web Development world and would enable you to architect large scale and maintainable software. Angular 2 embraces web technologies and best practices in software development which means that your software will be future proof. Not to mention its performance and blazingly fast internals that would make it the first choice for making mobile applications.

At this point Angular is still in developer preview but you can get started learning the basic concepts and get ahead of the curve. This course introduces you the basic concepts of Angular 2 namely Components, Annotations, Views, Event Handlers and Directives. In Angular 2 everything is a Component and this course takes a component-centric approach. We will use Components as the main point of discussion and learn about other concepts in Angular 2 in the context of Components.

Even though Angular 2 is still in developer preview, you should set learning Angular 2 as your top priority because not only is Angular 2 going to be the future of web, but also there are a lot of new concepts in Angular 2 that require time to internalize. Also note that this course will be continuously updated as new changes come out. Don't worry about the API changes that much as long as you learn the semantics of the framework, syntax and API changes won't be as important.

As an awesome bonus of joining the course, you’ll get my ebook: Angular 2 for beginners for FREE. Please check out the book on leanpub to get access (the link is in the video).

Start learning today and get ahead of the game.

Who is the target audience?
  • You can still take advantage of the course if you are not familiar with Angular, but the learning curve will be much steeper
  • This course is best suited for those who are already familiar with Angular.
Curriculum For This Course
49 Lectures
03:28:40
+
Getting Started
4 Lectures 11:39

This section contains the course content, book and all the project files. It gets updated frequently, so be sure to check it out every now and then. Also, you can find the links to the code and book repos below:

book: https://github.com/aminmeyghani/angular2-intro-book

code: https://github.com/aminmeyghani/angular2-intro

Course Content
00:15

In this section we are going to install Node with nvm, the Node Version Manager.

Preview 02:42

In this video we are going to install Visual Studio Code and go through some the basics. Make sure to download the notes to follow along more easily.

Installing Visual Studio Code
03:23

In this section we will go through setting up VSCode for TypeScript.

Setting up VSCode for TypeScript
05:19
+
TypeScript Crash-course
5 Lectures 18:16

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

Interfaces
06:08

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

Preview 05:09

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

Classes: Adding a Constructor
05:07

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

Classes: Inheritance
00:28

Modules
01:24
+
Angular β
3 Lectures 15:56

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

Using Angular Project Files
05:46

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

Preview 05:49

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

Preview 04:21
+
Components
7 Lectures 38:57

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.

Intro to Components
04:41

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

Basic Component Setup
03:11

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

Basic Component Class
06:38

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

Component Inputs
06:29

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

Native DOM Property Binding
04:20

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

Using Local Variables
06:10

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

Component Outputs
07:28
+
Directives
7 Lectures 31:37

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

Attribute Directive
04:01

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

Host Property
05:14

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

NgIf
03:18

In this video we are going to learn how to use the `NgFor` structural directive.
Preview 06:19

In this video we are going to learn how to use the `NgClass` directive.
NgClass
03:09

In this video we are going to learn how to use the `NgStyle` directive.
NgStyle
04:27

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.

NgSwitch
05:09
+
Pipes
6 Lectures 22:55

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

Preview 05:53

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

Pipe with Parameters
02:42

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

Using Pipe in Controller
02:07

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

Date Pipe
05:19

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

Slice Pipe
03:12

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

Preview 03:42
+
Services and Dependency Injection
1 Lecture 04:55
Simple Service
04:55
+
Http
1 Lecture 09:38

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.

Using the Get method
09:38
+
Angular ɑ
14 Lectures 54:25

Using the Project Files
01:10

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.

Cloning the course repository
01:26

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.

Creating the root component
04:48

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.

Creating the main method
04:06

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.

Organize folders using a component-centric perspective
03:18

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.

Creating the Messenger Component
06:56

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

Using the For directive
04:42

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.

Creating the Compose Component
04:04

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.

Creating the MessageStore Service
03:47

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.

Handling Events Example 1
06:09

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.

Handling Events Example 2
03:17

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.

Composing Messenger with the Compose Component
05:25

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

Debugging the Components
05:04
+
Bonus Materials
1 Lecture 00:33
Get My 2 Other Courses At A Steep Discount
00:33
About the Instructor
Amin Meyghani
4.3 Average rating
170 Reviews
8,848 Students
3 Courses
JavaScript Engineer

My name is Amin and I'm a JavaScript Engineer. I have worked on a variety of projects ranging from implementing user interfaces, to making productivity tools for engineers and designers. I am also very passionate about education and enjoy sharing what I learn with the world.

I am also the co-author of the Less Web Development Cookbook published by Packt Publishing. The book is about working with LESS on the client to make apps more maintainable.

I have been a self-taught learner as long as I can remember and I really enjoy sharing my findings and learnings with the world through any medium that I can. If you have any questions regarding any of my courses, you can reach me at amin@meyghani.net