Angular 2 Jump Start With Typescript
3.5 (91 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.
1,731 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Jump Start With Typescript to your Wishlist.

Add to Wishlist

Angular 2 Jump Start With Typescript

Understand Brand New AngularJs 2 Framework By Building Apps
3.5 (91 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.
1,731 students enrolled
Created by Anto Aravinth
Last updated 3/2016
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand and write Angular 2 Applications
  • Understand core concepts like Dependency Injection, Routing, Directives
  • Understand Components using Angular 2
  • Communicating between components
  • Form Elements
View Curriculum
Requirements
  • Basics of Javascript is required
  • Typescript knowledge is not required
  • Angular 1 knowledge is not required
Description

With more than 1k+ students with great ratings and review;This course is under active development based out on students topics, sign up today before the price rises! Look at the "Upcoming Lectures" section on the curriculum for the upcoming topics!

There are two groups of people. First group of people might already knew Angular 1 and thinking Angular 2 have come up in its beta version, which is completely has new concepts then Angular 1. They might be thinking how to get started with Angular 2?

Second group of people might be the person who wants to learn Angular from scratch and thinking where to start from. Whether should I start Angular 1 or Angular 2? Obviously Angular 2, but from where?

I'm sure out your out of these two groups! And this course designed for these two groups of people! Having Angular 2 have reached its beta version, it indicates that its APIs are going to be stable and doesnt change! Thats great news!

This course teaches the fundamentals of Angular 2 using Typescript as an language. Don't worry if Typescript is new to you! This course teaches the enough knowledge on Typescript to work on Angular 2. We will start with fundamentals of Angular 2 and goes in depth!

I believe the best way to learn is to understand how a Angular 2 works and what it does for you, look at examples, and then try it yourself. By keeping that principles in mind, we will be building up Udemy Course Tracker page using Angular 2 completely from scratch. By building this application, students will be getting immense knowledge on Angular 2 as framework.

Signup the course today to learn Angular 2 in its beta version and be ready when Angular 2 is in production!

The gist of the course is as follows:

1. What is Component in web terms?

2. How Angular 2 is different from Angular 1 ( Bonus lectures )

3. Dependency injection

4. Directives

5. Routing

6. Communication between components

7. Form handling

8. Pipes and Custom Pipes

9. Observables (advanced)

10. HTTP Services

and etc.

All code samples are put in Github, so that students can follow the lectures and build themselves!

Who is the target audience?
  • Anyone who have interested to learn Angular 2
  • This course doesn't teach Angular 1
  • Anyone who wants to be ready and master Angular 2!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
74 Lectures
04:11:59
+
Introduction.
1 Lecture 03:01

In this lecture, we are going to discuss on what we are going to build and the course agenda

Preview 03:01
+
Introduction to Angular 2
7 Lectures 28:38

In this lecture we are going to give the gist of MVC fundamentals.

Preview 02:51

In this lecture, we are going to construct a very simple application by following MVC pattern using plain Javascript. At end of this lecture, we will discuss, why one shouldn't write his/her own MVC framework. Rather start using frameworks like Angular

Preview 04:52

In this lecture, we will give an introduction to angular framework. We will walkthrough the benefits it brings to the table.

Preview 02:21

In this lecture, we are going to discuss the new concept called "WebComponents". This lecture also explains, how Angular 2 is built on top of "WebComponents"

Preview 05:12

In this lecture, we are going to see an highlevel view of what Component Based thinking should be. And also discuss the relationship between MV* vs Components.!

Preview 03:30

In this lecture, we will see what all new ideas that are there in angular 2 framework. At the same time, we will see whats not there in Angular 2 from Angular 1 version.

Preview 05:00

Dependency injection is a corner stone of the software paradigm. In this lecture, we are going to give a solid introduction to Dependency injection by showcasing a very simple example. Once we understood the DI, concept, will give a idea of how Angular does DI with respect to Components.

Preview 04:52

Set of questions on your understanding of this current section.

Quiz
9 questions
+
Hello World In Angular 2
10 Lectures 32:32

In this lecture, we will discuss on what we are going to do in this particular section.

What we are going to see?
01:08

Link to the section source code.

Project Source Code Link
00:03

In this lecture, we will see why one should be using Typescript instead of Javascript. The lectures demonstrates the point with simple example.

Typescript Aside: What is Typescript?
08:13

In this lecture, we will set up our environment that will be using for demonstrating the demo app in this section.

Setting up with Angular 2 and Typescript
03:59

In this lecture, we will be creating our first component in Angular!

Lets Create An Component
02:58

In this lecture, we will be discussing on what are modules, and how one should be using import and export keyword of ES6 specs.

ES6 Aside: What are modules?
02:52

After understanding the module system, in this lecture, we will import Angular component annotations to bind our class in Typescript to make it an Angular component!

Wiring The Component With Angular Annotation
04:05

After creating the component, in this lecture, we will be binding our component with our view ( html )

Binding the component with view
02:23

In this lecture, we will explain, how angular creates our component object using the in-built function called bootstrap. We will also discuss the idea of "Root" component from Angular perspective.

Final Step: Bootstrapping.
03:31

This lecture explains the concept of data binding. The lecture demonstrate how data binding works, by modifying the current example of this section.

A word on data binding
03:20

Quiz
10 questions
+
Bootstrapping our application
7 Lectures 29:36

In this lecture, we are going to see what we are going to build in this particular section

What we are going to see?
01:23

In this lecture, we are going to see how to download the project source code. The lecture walk through the steps that are required to checkout the github project and stay sync with the source code.

Downloading Project Source Code
03:47

In this lecture, we are going to see how the dependencies are handled in an enterprise level application. The lecture starts with what is npm, how the package.json looks like etc.

NPM Aside: Handling our dependency.
04:22

This lecture, gives the gentle introduction to gulp framework.

Gulp Aside: Handling our product flow.
05:28

In this lecture, let us walk through the typescript files that are there in the source directories. We will also see how index.html is using the transpiled javascript file.

Explaining the source files.
08:28

We know the typescript files needs to be converted into javascript files. But how does gulp does that? In this lecture, we are going to discuss on the tsconfig.json file and how its used to specify the compiler option for converting an typescript file to an javascript file.

Typescript Aside: How does Typescript is getting converted?
03:25

In this lecture, let us quickly recap on what we have learned in this particular section.

Recap
02:43
+
Designing our Application Navigation.
4 Lectures 12:44

In this lecture, we are going to discuss on what this section teaches and what we are going to build in this section.

What we are going to see?
01:08

Before we design our application, we need to see why and what is Bootstrap. The answers for such an question is found on this particular lecture.

Installing And Understanding Bootstarp
03:21

In this lecture, finally we are getting our hands dirty by start desinging our navigation bar.

Designing our navigation bar
04:45

This lecture is going to give the gentle introduction to SPA. We are also going to see how SPA pushes to the concept of "Routing".

An Gentle Introduction to SPA
03:30
+
Routing.
8 Lectures 27:58

In this section, we are going to discuss on what we are going to build in this section.

What we are going to see?
02:02

Before we begun with our coding part, lets us understand the fundamentals behind Routing concepts.

Fundamentals of Routing
02:04

Angular 2 as framework provides two routing mechanism. In this lecture, we are going to discuss these two mechanism in depth.

Two Types Of Routing
04:38

In this lecture, we are going to see and understand how to inject Routing providers into our root application.

Injecting The Routing Providers
04:53

In this lecture, we are going to give a brief introduction to Directives in Angular 2 Framework; After understanding Directives, we are going to see what are RouterOutlet means and its usecase.

Directives and RouterOutlet
04:00

After understanding the routerOutlet directvies, finally we will see how to configure the router using @RouteConfig annotations.

@RouteConfig Annotations
04:47

In this lecture, we are going to see how to bind the view with our router configuration using RouterLink directives.

RouterLink Directives
03:32

In this lecture, let us quickly recap on what we have learned in this particular section.

Recap
02:02
+
Service And Dependency Injection
11 Lectures 47:21

In this lecture, we are going to discuss on what this section consititues of.

What we are going to see?
01:08

This lecture revisits the DI concepts that we have discussed earlier.

Intro to Dependency Injection
01:47

In this lecture, we are going to discuss about the relationship between Inversion of control paradigm and DI.

Inversion of Control
01:54

In this lecture, we are focusing on creating our first service. We are going to see what is @Injectable annotation is.

Creating our Injectable Service
04:25

In this lecture, we are going to ask Angular to inject Http providers in our components using @Inject annotations.

Injecting HTTP using @Inject
03:54

In this lecture, we are going discuss about Udemy APIs that we are going to use in this course.

Udemy API Aside: Udemy Rest API Details
05:48

In this lecture, we are going to give an solid introduction to Observables. We will be discussing how Observables are very useful pattern for solving async problems.

Observables and its methods
05:50

In this lecture, we are going to see how to tie up Http calls with observables.

HTTP and Observables
12:37

In this lecture, we are going to see how to inject the created service into our Component using providers

Injecting Services Using providers
03:06

In this lecture, we are going to understand the subscribe part of Observables API.

Subscribing to Observables
04:27

In this lecture, let us quickly recap on what we have learned in this complete section.

Recap
02:25
+
Binding View With Our Model
7 Lectures 25:47

In this lecture, we are going to discuss on what we are going to build in this section.

What we are going to see?
01:29

In this lecture, we are going to discuss on Bootstrap Grid system. After undertsanding it, we are going to use it in our view designing.

Designing our View
03:29

In this lecture, we are going to design our Dashboard component which will be having the model

Designing our Model
02:37

In this lecture, we are going to see how to bind the model that we have defined in our previous lecture with our View.

Binding View With Our Model
03:52

In this lecture, we are going to see and discuss about ngFor directives.

Designing our view with ngFor directive
08:01

In this lecture, we are going to see and discuss about ngFor directives

Conditional Check with ngIf directive
04:14

In this lecture, we are going to revisit on the MV* pattern that we have learned already.

MV* terminology revisited
02:05
+
Communicating Between Components
5 Lectures 13:21

In this lecture, we are going to see what we are going to learn in this complete section.

What we are going to see?
01:08

Before we get down into practical section of how to pass data from one component to another component, lets quickly revisit our learning on "Component Thinking"

Revisit On Component Thinking
01:09

In this lecture, we are going to create an Component called Card, which is going to be responsible for rendering our "Course Card" UI part.

Creating Card Component
02:23

In this lecture, we are going to see how to pass data from our component to Card component using properties

Passing Data to Card Component Using Properties
06:17

In this lecture, we are going to see how to pass data from our component to Card component using @Input annotation
Passing Data to Card Component Using @Input
02:24
+
Components And View Encapsulation In Depth
7 Lectures 17:52

In this lecture, we are going to discuss on what we are going to learn in this section!

What we are going to see?
00:46

In this lecture, we are going to understand what is Shadow DOM and what problem does it solve.

Shadow DOM: Webcomponent Standard
05:40

In this lecture, we are going to see the problem of encapsulating css styles

How do we handle View encapsulation?
02:40

In this lecture, we are going to see how to use Angular 2 ViewEncapsulation Emulated mode.

ViewEncapsulation Emulated In Detail
05:04

In this lecture, we are going to see how to use Angular 2 ViewEncapsulation Native mode.

ViewEncapsulation Native In Detail
01:35

In this lecture, we are going to see how to use Angular 2 ViewEncapsulation None mode.
ViewEncapsulation None In Detail
00:55

In this lecture, we are going to quickly walkthrough on what we have learned in this lecture!

Recap
01:12
2 More Sections
About the Instructor
Anto Aravinth
4.0 Average rating
134 Reviews
2,973 Students
4 Courses
Software Developer & Passionate Teacher

Hi this is Anto. Well, I have around 3+ years Experience in Software development. During my software development there will be lot of learnings for me. I want my learnings to be shared with others! There are tough times when I learn the things. I want it to be easily sharable to others.

I still remember my teacher saying "If you want to understand one thing, you need to teach it". And thats exactly I have been doing in my company and also over here! I'm mostly into web development using Java and front-end technologies. I'm a teacher at my office and over here as well! :)

Apart from work, I'm an open source contributor to Groovy, Selenium and React Js. Member of JUG Chennai!