Angular 2 Demystified

Conquer Angular2 and TypeScript fundamentals - Build Great Mobile & Web Applications With Angular 2 (EBOOK INCLUDED)
3.2 (84 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,124 students enrolled
$20
Take This Course
  • Lectures 49
  • Contents Video: 3.5 hours
    Other: 3 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course 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.

What are the 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.

What am I going to get from this course?

  • 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

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started
Article

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

02:42

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

03:23

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.

05:19

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

Section 2: TypeScript Crash-course
06:08

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

05:09

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

05:07

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

Article

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

Modules
Article
Section 3: Angular β
05:46

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

05:49

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

04:21

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

Section 4: Components
04:41

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.

03:11

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

06:38

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

06:29

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

04:20

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

06:10

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

07:28

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

Section 5: Directives
04:01

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

05:14

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

03:18

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

06:19
In this video we are going to learn how to use the `NgFor` structural directive.
03:09
In this video we are going to learn how to use the `NgClass` directive.
04:27
In this video we are going to learn how to use the `NgStyle` directive.
05:09

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.

Section 6: Pipes
05:53

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

02:42

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

02:07

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

05:19

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

03:12

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

03:42

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

Section 7: Services and Dependency Injection
Simple Service
04:55
Section 8: Http
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.

Section 9: Angular ɑ
Disclaimer/Notes
Preview
Article
Using the Project Files
01:10
01:26

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.

04:48

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.

04:06

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.

03:18

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.

06:56

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.

04:42

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

04:04

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.

03:47

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.

06:09

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.

03:17

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.

05:25

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.

05:04

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

Section 10: Bonus Materials
Get My 2 Other Courses At A Steep Discount
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Amin Meyghani, JavaScript Developer

My name is Amin and I currently work as a Senior Front-end Engineer at a software company called Yodle. 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

Ready to start learning?
Take This Course