Angular 2 Deep Dive
2.8 (3 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.
55 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Angular 2 Deep Dive

Dive into the core architectural components and concepts of Angular 2 to develop strongly structured, versatile web appl
2.8 (3 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.
55 students enrolled
Created by Packt Publishing
Last updated 7/2016
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create an application with Angular 2, structure your code, and bootstrap the app within minutes
  • Discover dependency injection in Angular 2 with its new tree structure of providers
  • Build smaller, reusable components as building blocks of your application
  • Abstract business logic into injectables and make use of built-in services to make AJAX calls
  • Simplify the manipulation of data for easy presentation using Pipes
  • Adopt reactive programming using the great Observables from RxJS
  • Embrace asynchronous programming with ES6’s Promises
  • Validate aplenty, with built-in validation, custom validators, and asynchronous verifications
View Curriculum
  • This course contains practical hands-on videos that begin from scratch and become a full-fledged application with live coding and explanations. By the end of the course, you will be able to work with the framework in the most effective way possible, progressing your skills to a more sophisticated level with Angular 2.

Angular 2 promises cross-platform coding, greater development efficiency, better speed and performance and incredible tooling to create applications, both mobile and desktop.

Angular 2 is a massive architectural overhaul from its predecessor, and will completely change the way developers approach JavaScript web development. The redesign incorporates several new key development concepts and practices, meaning developers have to adopt a new way of approaching projects with Angular. This course delivers an early deep dive into the architectural aspects of Angular 2 development, and imparts the knowledge you need to understand comprehensively and put into practice the key concepts powering the framework.

We will begin by grasping the concepts of Angular 2, and apply them to an application that grows in complexity throughout the course, culminating in a fully-featured example of song-library.

You will discover how to present data to users while also ensuring that their interactions on the UI are handled by the presentation layer of your app. Then we will take a look at business logic needs so that the system behaves exactly as per your requirements; here services and other abstraction layers will come into play.

You will also learn how to create forms with ease, and smoothly handle validation. At the end, we’ll glue all these development aspects with reactive and asynchronous programming, which you will embrace as you learn to control flows and story lines of actions in the app.

This course will not only teach you the ropes of developing with the framework, but also help you build more complex and future-proof applications.

About The Author

Mathieu Chauvinc is a Managing Director at Red Ape Solutions, where he aspires to keep the company at the bleeding edge of web technologies. On a daily basis, he leads the tech team of 15 and collaborates with them in building complex single page applications and neat hybrid mobile apps. He has been involved in web technologies for over a decade, from Django to Node.js and Go, SQL to NoSQL, Mootools to Angular 2, continuously trying to keep the right balance between the excitement of new frameworks and the stability of proven ones. He always has a special place in his heart for Python and Django.

He holds a Master’s in Engineering from the German University Karlsruhe and a Master’s in Engineering from the French ENSAM (Paris). Despite an engineering background, he has always had a passion for knowledge sharing, which has followed him until today, and he regularly conducts corporate or free training sessions on various IT topics in his country of residence, Malaysia.

He is also the author of several video courses, published by Packt, such as Learning JavaScript Promises and Introducing Ionic 2. He has recently enjoyed the chance of reviewing courses for Packt.

Who is the target audience?
  • If you are a novice of the Angular framework, you will find plenty of information to get started and quickly see the results of hands-on examples. Seasoned Angular 1 developers will benefit from the past experience of the author who, like them, had to experience the transition from 1.x to 2. More experienced developers will find extra information and tips about a framework that offers a lot more than a superficial first look would let you believe.
Compare to Other Angular Courses
Curriculum For This Course
27 Lectures
Head First into Angular 2
3 Lectures 20:43

This video provides an overview of the entire course.

Preview 03:03

We need to get started with our project. For this, we’ll use a seed project and install all dependencies so that a simple gulp task allows us to run our app.

The Root of All Things

Is it worth it to use TypeScript for Angular 2 projects? We think it is, and we’ll show why in this video.

To TypeScript or Not to TypeScript, That Is No Question
It’s All about Components
6 Lectures 50:00

We want to display data from the JavaScript side onto the screen. This is done via data binding from the component to the template.

Preview 09:02

We need to react to the user’s interactions such as clicking and typing. For this, we’ll bind to events.

Binding to Events

Cluttering our entire app into a single root component will not be scalable, nor allow us to reuse components.

So we’ll create our own component to handle a smaller part of the application.

Creating Your Own Component

As we add more specific, reusable components, they will need to communicate with one another. We’ll use @Input and @Output to communicate to and from parent and child components.

I/O – Component Data and Event Emitters

Sometimes, the markup coded in a template needs to be kept in the template of a smaller component. This is called content projection, and we’ll use ng-content to achieve that.

Content Projection

Some components don’t expect to display anything. They need to act on the existing element they are added to. These are called directives in Angular 2 and are basically components without a view. We’ll create one.

Injectables and Providers
5 Lectures 34:57

The business layer needs to be separated from the presentation layer. Also data is often pulled from a server. We’ll make use of built-in injectables and in particular the HTTP service to achieve those two goals.

Preview 05:50

Logic should not be kept inside a component. So we’ll build our own service to take care of the loading of data and mapping to track objects.

Creating an Injectable

The strength of dependency injection is that a constructor does not need to know what implementation of each of its dependencies it uses. Using "provide," we can override a service and make full use of the strengths of dependency injection.

The Power of Providers

It is rare for all components in an application to want to use a service in the same manner. There will always be small customizations needed, even within the same application. The hierarchy of injectors makes it possible to handle those intricacies while remaining DRY.

Hierarchy of Injectors

Tests are great to ensure quality of work, avoid breaking changes and in general make developers feel comfortable about the code they write. We’ll use a typical testing setting to unit-test an ES6 class and the service we built earlier.

Testing a Service
Routing through the App
4 Lectures 20:57

Sites rarely have a single page; we need to be able to navigate from one page to another. We’ll use Angular’s router to enable such navigation.

Preview 05:11

Pages that display a single item, for example, an article or a track, need to read their ID from the URL of the route. We will create a route that includes such a parameter and capture it from the target component.

Routing with Parameters

Under a single item page, it is common to have sub-items, for example, the details for a track, and the artist for a track. We can handle all routes from the main component, but that’s messy and not very future proof. With the new router’s child routing abilities, we will extend a single item route defined at the top level, with sub-routes defined on the single track page component.

Child Routing

At various, important moments in an application, we might want to interject and conduct some actions. Hooks provide a way to do so in a very pluggable manner.

Lifecycle Hooks
4 Lectures 24:49

Separating concerns between view logic and presentation is vital. However, it is also helpful to use a declarative way to apply simple modifications on data from within the template. To achieve this, we will use pipes that are built into Angular 2.

Preview 05:19

Existing pipes in Angular 2 cover a fair amount of use cases of pipes. But not all. We create our own pipe and extend it to use parameters.

Custom Pipes

One of the promises of Angular 2 is to be more efficient and faster. When confronted with mutable objects, Angular assumes they may have been modified; except within pipes. Let’s consider ways to deal with that exception, good and bad.

Stay Pure

Many components simply load data asynchronously and then set the given data onto the template. The async pipe offers to deal with such a case, as well as to guarantee that on destroy, the corresponding listeners will be stopped, thus avoiding memory leaks.

Asynchronous Piping
Fun with Forms
3 Lectures 24:27

Almost every site or app contains at least one form. Sometimes, forms can be simple and we want a quick way to implement them while still making use of validation and error display. We will build a fully template-based form that is quick, yet powerful.

Preview 07:42

Template-based forms can quickly get cluttered and its declarativity soon becomes a lack of separation of concerns. Using NgFormModel, we can ensure that more complex and future proof forms are built.

When the Model Gets Involved

Every form needs validation, be it required fields, e-mail checking or more unique requirements. We will use built-in and customer validators to evaluate a form’s validity and to display the corresponding errors.

Validating Plenty
We Live in an Asynchronous World
2 Lectures 18:18

Asynchronous processes, when they combine several actions, can be complex. Promises allow handling of such flows in a very natural way, which even at times makes us forget that the flow is asynchronous.

Preview 10:04

When it comes to combining events, API calls, and various other asynchronous tools, everything becomes even more complicated and confused. Observables offer a cohesive interface to combine those tools, and furthermore extend it with operators to accomplish just about anything with streams.

The Power of Observables
About the Instructor
Packt Publishing
3.9 Average rating
8,229 Reviews
58,946 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.