Angular 2 Core Concepts
0.0 (0 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 student enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Core Concepts to your Wishlist.

Add to Wishlist

Angular 2 Core Concepts

Recipes that help you become pro at building powerful web apps with Angular 2
0.0 (0 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 student enrolled
Created by Packt Publishing
Last updated 4/2017
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
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?
  • Understand how to best move an Angular 1 application to Angular 2
  • Build a solid foundational understanding of the core elements of Angular 2 such as components, forms, and services
  • Properly implement applications utilizing advanced topics such as dependency injection
  • Know how to maximize the performance of Angular 2 applications
  • Understand the best ways to take an Angular 2 application from TypeScript in a code editor to a fully-functional application served on your site
  • Get to know the best practices when organizing and testing a large Angular 2 application
  • TypeScript in a code editor to a fully function application served on your site
View Curriculum
  • To fully benefit from the coverage included in this course, you will need:
  • Prior working developing knowledge of the JavaScript (ES5) language, familiarity with Git and GitHub for source control, and an understanding of basic HTML syntax.
  • This course has the following software requirements:
  • An editor like Atom
  • Node.js - Version 6.10.XX LTS
  • Node Version Manager
  • Command Prompt

Angular 2 introduces an entirely new paradigm of applications. It wholly embraces all the newest concepts that are built into the next generation of browsers, and it cuts away all the fat and bloat from Angular 1. This course plunges directly into the heart of all the most important Angular 2 concepts.

This course helps you to migrate from Angular 1 application to Angular 2, familiarizes you with the Angular 2 components and covers the reworked Angular 2 form modules in depth.

About the Author

Matt Frisbie is currently a software engineer at Google. He was the author of the Packt bestseller AngularJS Web Application Development Cookbook, and also has published several video series through O’Reilly. He is also active in the Angular community, giving presentations at meetups and doing webcasts.

Who is the target audience?
  • This course is for developers who are competent with JavaScript and are looking to dive headfirst into the TypeScript edition of Angular 2. It is also geared towards developers with experience in Angular 1 who are looking to make the transition.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
Strategies for Upgrading to Angular 2
8 Lectures 37:33

This video gives an overview of the entire course.

Preview 02:54

One of the unusual conventions introduced in Angular 1 was the relationship between directives and the data they consumed.

Componentizing Directives Using the controllerAs Encapsulation

In Angular 1, there are several built-in directives, including ngController and ngInclude, that developers tend to lean on when building applications.

Migrating an Application to Component Directives

The 1.5 release of AngularJS introduced a new tool: the component. It isn't exactly similar to the concept of the Angular 2 component.

Implementing a Basic Component in AngularJS 1.5

Angular 1 developers will be quite familiar with the factory/service/provider trifecta. In many ways, this has gone largely unaltered in Angular 2 conceptually.

Normalizing Service Types

Angular 2 comes with the ability to connect it to an existing Angular 1 application.

Connecting Angular 1 and Angular 2 with UpgradeModule

How to fully utilize Angular 2 components inside an Angular 1 template.

Downgrading Angular 2 components to Angular 1 directives with downgradeComponent

How to define a service type in Angular 2 and then inject it into an Angular 1 context.

Downgrading Angular 2 Providers to Angular 1 Services with downgradeInjectable
Conquering Components and Directives
14 Lectures 01:25:49

When writing an application component in TypeScript, there are several new paradigms that you must become familiar and comfortable with.

Preview 13:23

With the departure of the Angular 1.x concept of $scope inheritance, mentally remodeling, It is important that how information would be passed around your application.

Passing Members from a Parent Component to a Child Component

In Angular 1, it was expected that the developer would utilize the built-in replacement directives for element attributes that had meaningful DOM behavior attached to them.

Binding to Native Element Attributes

In Angular 2, the other hemisphere of binding that is needed for a fully functioning application is event binding.

Registering Handlers on Native Browser Events

In the wake of the disappearance of $scope, Angular was left with a void for propagating information up the component tree.

Generating and Capturing Custom Events Using EventEmitter

In the course of creating applications, you will often find it useful to be able to attach component-style behavior to DOM elements, but without the need to have templating.

Attaching Behavior to DOM Elements with Directives

Utilizing components as standalone tags that are self-contained and wholly manage their contents is a clean pattern, but you will frequently find that your component tags demand that they enclose content.

Projecting Nested Content Using ngContent

Any developer that has used a client framework is intimately familiar with two basic operations in an application: iterative rendering from a collection and conditional rendering.

Using ngFor and ngIf Structural Directives for Model-Based DOM Control

Many developers will begin with Angular 2 and reach for something that resembles the trustworthy ng-model in Angular 1.

Referencing Elements Using Template Variables

One of the great new benefits of the new Angular binding style is that you are able to more accurately target what you are binding to.

Attribute Property Binding

Angular's component rendering process has a large number of facets, and different types of data and references will become available at different times.

Utilizing Component Life Cycle Hooks

In the course of building an application, you may encounter a scenario where it would be useful to reference a parent component from a child component, such as to inspect member data or invoke public methods.

Referencing a Parent Component from a Child Component

Depending on your application's separation of concerns, it might make sense for a child component in your application to reference a parent, and at the same time, for the parent to reference the child.

Configuring Mutual Parent-Child Awareness with ViewChild and forwardRef

The companion to Angular's ViewChild is ContentChild. It performs a similar duty; it retrieves a reference to the target child component and makes it available as a member of the parent component instance.

Configuring Mutual Parent-Child Awareness with ContentChild and forwardRef
Building Template-Driven and Reactive Forms
8 Lectures 01:04:56

Angular 2 still has two-way data binding, but the way it behaves is a bit different from what we're used to.

Preview 08:01

The simplest form behavior imaginable would be the validation of a single input field

Implementing Basic Field Validation with a FormControl

Forms in applications frequently exist to aggregate multiple instances of input into a unified behavior.

Bundling Controls with a FormGroup

FormGroups are more than capable of serving your needs for the purpose of combining many FormControl objects into one container.

Bundling FormControls with a FormArray

Angular provides mechanisms with which you can implicitly create and assign these objects and attach them to the form's DOM elements.

Implementing Basic Forms with NgForm

Angular provides a way for you to put together forms that don't rely on the template hierarchy for definition.

Implementing Basic Forms with FormBuilder and FormControlName

The basic built-in validators that Angular provides will get you off the ground.

Creating and Using a Custom Validator

Angular will run this validation every time the validator is invoked, which might be quite often if form validation is bound to rapid-fire events.

Creating and Using a Custom Asynchronous Validator with Promises
About the Instructor
Packt Publishing
3.9 Average rating
7,349 Reviews
52,531 Students
616 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.