Angular 2 Jump Start With Typescript

Understand Brand New AngularJs 2 Framework By Building Apps
4.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.
1,719 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 75
  • Length 4 hours
  • 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 12/2015 English

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

What are the requirements?

  • Basics of Javascript is required
  • Typescript knowledge is not required
  • Angular 1 knowledge is not required

What am I going to get from this course?

  • Understand and write Angular 2 Applications
  • Understand core concepts like Dependency Injection, Routing, Directives
  • Understand Components using Angular 2
  • Communicating between components
  • Form Elements

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

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: Introduction.
03:01

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

Section 2: Introduction to Angular 2
02:51

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

04:52

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

02:21

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

05:12

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"

03:30

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

05:00

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.

04:52

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.

9 questions

Set of questions on your understanding of this current section.

Section 3: Hello World In Angular 2
01:08

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

Article

Link to the section source code.

08:13

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

03:59

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

02:58

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

02:52

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

04:05

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!

02:23

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

03:31

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.

03:20

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

Quiz
10 questions
Section 4: Bootstrapping our application
01:23

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

03:47

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.

04:22

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.

05:28

This lecture, gives the gentle introduction to gulp framework.

08: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.

03:25

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.

02:43

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

Section 5: Designing our Application Navigation.
01:08

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

03:21

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.

04:45

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

03:30

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

Section 6: Routing.
02:02

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

02:04

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

04:38

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

04:53

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

04:00

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.

04:47

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

03:32

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

02:02

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

Section 7: Service And Dependency Injection
01:08

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

01:47

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

01:54

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

04:25

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

03:54

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

05:48

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

05:50

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.

12:37

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

03:06

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

04:27

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

02:25

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

Section 8: Binding View With Our Model
01:29

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

03: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.

02:37

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

03:52

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

08:01

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

04:14

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

02:05

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

Section 9: Communicating Between Components
01:08

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

01:09

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"

02:23

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.

06:17

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

02:24
In this lecture, we are going to see how to pass data from our component to Card component using @Input annotation
Section 10: Components And View Encapsulation In Depth
00:46

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

05:40

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

02:40

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

05:04

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

01:35

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

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

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

Section 11: Pipes
00:29

In this lecture, we are going to discuss on the topics covered in this section.

02:07

In this lecture, we are going to see what pipes are and how to use a simple pre defined pipes.

04:35

In this lecture, we are going to create a custom pipe for removing the spaces in our course title.

02:40

In this lecture, we are going to discuss on the key takeaway on Angular 2 pipes.

Article

Exercise on pipes

Section 12: Appendix
02:03

In this lecture, we are going to see how to install node.

01:02

In this lecture, we are going to see how to install Sublime

Upcoming Lectures.
Preview
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Anto Aravinth, 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!

Ready to start learning?
Take This Course