Angular 2 - Superheroic Framework
4.4 (23 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.
703 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 - Superheroic Framework to your Wishlist.

Add to Wishlist

Angular 2 - Superheroic Framework

Be a Superhero in your organization by learning Angular 2 Framework
4.4 (23 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.
703 students enrolled
Created by Maruti Makwana
Last updated 8/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • At the end of this course students will be able to understand Angular 2 and some important parts of the Framework like Components, Bindings, Dependency Injections, Services, Interpolation, Custom Directives, Routing, Decorators etc with some important concepts which are useful in real life business application development.
  • This course will help those students who are having knowledge of JavaScript, CSS and HTML and willing to explore Angular 2 Framework with step by step code samples, Also this will help those who are already familiar with old version of Angular and now want to migrate to latest version.
View Curriculum
  • Installation and Configuration steps are already there in this course so there is no prior steps required, All you need is computer connected with internet connection.

If you are not familiar with Angular Framework and if you have question in your mind that

From Where i should start learning Angular 2 ?

- Do i need to Choose JavaScript or TypeScript with Angular application ?

- How can i learn Angular 2 as quick as possible ?

Then this Course is answer of these questions.

I am dealing with AngularJS Projects and Providing training on this from Couple of years and i know most students get confused with different terms of Angular and they need easy and cool way to understand some complex concepts. After great success of some angularJS courses on Udemy i decided to put this course on Angular 2 for my Students.

This is just beginning as i will keep adding new videos on this because Angular 2 is Endless.

It is perfect for those who has Knowledge of JavaScript, HTML and CSS, Knowledge of object oriented programming is optional but will be helpful if you know.

Who is the target audience?
  • This Angular course is for newbies who are not familier with Angular 2 and TypeScript and wanted to learn it in a quick and easy way
  • This course is not for you if you are not familiar with HTML, CSS and JavaScript basics.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
Getting familiar with Angular 2
1 Lecture 02:20

This is introduction of the course.

Preview 02:20
Introduction of the Course
3 Lectures 16:03

This lecture clears the confusion of how angular and angularJS both are different and why we have to use TypeScript with angular 2 ?

Preview 07:32

This lecture explains how to setup development environment for angular 2 application. also please find starter files in same lecture.

Preview 05:00

In this lecture we add required libraries in to our project using npm.

Preview 03:31
Understanding Component
2 Lectures 19:51

In this lecture i am explaining component and creating new component with template, Decorator and Class using visual studio code.  also i am using interpolation binding for some of my HTML tags in template UI.

Preview 10:41

This is continue concept of last lecture and in this i am explaining how component is connected with the HTML page and usage of custom directive in that.

Dealing with Component - Confusion Resolved..!
Understanding Angular Bindings
7 Lectures 41:30

This lecture explain simple one way binding of angular which is knows as interpolation and it is useful when we want read only kind of binding.

One way Binding [Read only interpolation binding ]

This lecture explain Two way binding and Event Binding and also compare syntax of all three bindings for better understanding.

Two way Binding and Event Binding

This lecture explains how can we bind collection of data using *ngFor directive of angular, i am also using *ngIF in this same lecture.

Binding with collection of data.

This lecture explains that if we have another component in application then how we can add it and set it to main component of the application.

Adding another Component in same application and bootstrap through it.

This lecture explains how to deal with change event and lost focus event of the controls using angular event bindings.

More on event bindings - Change event and Blur Event.

In this lecture i am covering how to change CSS properties and classes at runtime using angular directives like ngClass and ngStyle.

Handling CSS styles with ngClass and ngStyle

This lecture is a quick recap of whatever we have learned up to this point. i am doing this because before we move ahead with the next section i want you to understand these basics first.

Quick Recap of basics
Angular Avengers - Single Page Application of Angular 2
17 Lectures 01:30:04

This lecture explain working demo of SuperApp application which we are going to create in this section.

Preview 03:15

in this we are setting up  project using starter file provided in this lecture.

Setting Up Project for SuperApp

in this lecture we will add new component AppComponent which will be main component of this application.

Adding app component

In this lecture we will create Hero List Component with the proper HMTL tags using bootstrap classes.

Creating Hero List Component

In this lecture i have created some properties in Hero List Component and applied bindings with HTML UI. i have also used some pipes in this but i will cover that in depth in future sections.

Applying bindings in Hero List Component

In this lecture we are applying bindings for Hero Image and then we are dealing with click event binding or Show Image Button.

Applying bindings in Hero List Component Cont...

In this lecture we are Making our heroes Collection Strongly typed with the help of Interface of TypeScript. because of this that will show compile time type checking.

Making Collection Strongly typed with the help of Interface

this lecture customize Visual Studio Code workspace and  we will assign custom CSS class in our hero list component using styleUrls in component decorator.

Applying CSS using styleUrls property in component decorator

This lecture explains how we can associate life cycle hooks of angular 2 component in our application code.

Exploring Component Cycle Hooks

In this lecture we have created custom pipe using @Pipe decorator and using that we have filtered hero list collection.

Creating Custom Pipe in to filter herolist

in this lecture we are creating custom angular service using @Injectable decorator.

Creating Angular Service

In this lecture i am injecting service in app component using providers.

injecting service using Dependency Injection

In this lecture i am trying to get data from server using angular2/http and to deal with that i am using observables from reactive extensions.

Getting data from cloud server using http and observables

In this lecture we are trying to understand angular 2 routing concept

Introduction of angular2 Routing

In this lecture i am configuring routing in my app component and by this my welcome and heroList component will be connected with app component.

Routing Continue

In this lecture we are adding logic to the hero detail component and based on that we are creating proper User interface in HTML page.

Adding logic to Hero Detail Component

In this lecture we are customizing hero list component so that we add link to our hero name with which we can navigate to particular hero's detail. 

Finally Customizing Hero List Component To make everything work.

Thank you for completing this course, i hope you will clear this quiz easily as now you have Super Powers of  Angular 2.  

Be a Superhero by handling this Quiz of the Course.!
5 questions
About the Instructor
Maruti Makwana
4.3 Average rating
1,322 Reviews
22,194 Students
6 Courses
MCT-Corporate Trainer

I am providing trainings to different IT corporates from last 11+ Years on different Microsoft Technologies and some JavaScript Technologies.i am here to make my lectures online so that everyone can access my knowledge throughout the globe.

i know my strength that i can make complicated things simple and I will be happy if people like my videos and ask questions to me regarding technologies i know. My expertise is mostly on following technologies.

ASP NET MVC 5, Microsoft Azure, Sharepoint 2013, Windows Store Apps, Angular JS, Knockout JS, WebGL, Ember JS, Jquery,HTML 5, CSS3, WCF, WPF, etc