Learning Angular components - Second Edition
5.0 (1 rating)
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.
12 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Angular components - Second Edition to your Wishlist.

Add to Wishlist

Learning Angular components - Second Edition

Your go-to guide when building successful Angular components (Version 2+)
5.0 (1 rating)
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.
12 students enrolled
Created by Packt Publishing
Last updated 6/2017
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop a strong understanding of Angular 2 components by slicing static HTML pages into dedicated components
  • Configure a modern setup with TypeScript, SystemJS, and ES2015
  • Refactor and upgrade an Angular 1.x application to Angular 2
  • Design reusable components by understanding how data flows in and out of them and by leveraging advanced Angular 2 template techniques
  • Debug Angular 2 components and write automated unit and end-to-end tests
  • Embed external libraries such as d3
  • Run Angular 2 components on mobile devices and on the server
View Curriculum
  • Prior experience in Angular 2 development will be beneficial, but not compulsory.

Learning Angular Components helps you get on track by introducing you to Google’s brand new Angular platform. In this video course, you will be guided through the various steps in building real-world Angular components for version 2+.

We will start by setting up a modern development environment with TypeScript and ES2015 support, and you'll gain an initial understanding of what components are about, how to build them, and how they differ from the directives. We then focus on applying new concepts while building a fictitious dashboard application for a home automation system.

We'll guide you through the process of building reusable Angular components. You will learn about HTML rendering templates, see how to establish a data flow between different components, and even find out how to integrate external libraries. But not only that, we will also focus on how to make our components production-ready and maintainable by applying automated unit and end-to-end testing techniques. As a bonus, you will discover how to bring your Angular components to other environments such as the server side and mobile devices.

Learning Angular Components is your go-to guide when building successful Angular components.

About the Author

Juri Strumpflohner is a passionate web developer, tech lead, and architect, and is currently focusing on frontend technologies. He has over 6 years of experience in developing JavaScript single page applications with various frameworks, most lately with Angular 1.x and 2.0.

He organizes a software craftsmanship meetup, contributes to open source projects, does technical book reviews.

Who is the target audience?
  • If you are a JavaScript Developer interested in learning the core aspects of Angular 2 Components then this is the right course for you.
Compare to Other Angular Courses
Curriculum For This Course
20 Lectures
Getting Started
3 Lectures 16:28

This video gives an overview of the entire course.

Preview 03:37

The viewer doesn't yet have a good understanding of ES6 and TypeScript, which makes it hard for him to read and understand Angular 2 code. Thus, we go over the fundamental features and we'll take a look at our development setup, on top of which we build our application.

Project Setup

Current approaches in componentization and reusability on the web frontend have some undesirable side effects. This video shows the user what the potential problems are and how modern methodologies like WebComponents and Angular aim at tackling them.

All About Components
Angular 2 – Scratching the Surface
3 Lectures 31:36

How do we write Angular 2 components? In this video we'll get a first grasp at it.

Preview 07:05

Commonly, our components interact with the outside by having data flow in and out. This video demonstrates how to realize that data flow.

Feeding Our Component with Data

Many already have huge Angular 1.x applications. In the long run, people will want to upgrade in order to benefit from Angular 2's new features. This video shows some possible upgrade paths and measures that should be taken.

Upgrading from Angular 1.x
HomeAuto – First Screens
3 Lectures 24:07

Know how to decompose a UI into components and how to properly organize them from into folders, following naming and structuring guidelines from the community.

Preview 09:53

Inject an external dependency into a component and render its data using the Angular template syntax.

Scanning for New Sensors

How to use pipes to filter data and how to establish a data flow and communication between different components. 

Creating a General-Purpose Filter
Building Reusable Modals
3 Lectures 19:06

Develop a modal dialog, style it via dedicated component properties and establish a two-way databinding with the passed data.

Preview 07:20

Currently our modal dialog solution is not reusable for different use cases. We will solve this in this video.

Making the Modal Generally Reusable

Learn about the difference between components and directives.

Attribute Directives to the Help
Building Up Our Dashboard
3 Lectures 23:00

Learn how to interact with child content that is projected in a <ng-content> region.

Preview 07:26

How to best integrate external third-party libraries and make them work with Angular 2.

Integrating an External Library – Data Visualization with D3

Minify, bundle and deploy an app in production.

Ready for Production – Bundling and Minification
Maintaining Components
3 Lectures 23:17

Writing a unit test for our Angular 2 component.

Preview 11:26

How to debug the current state of our application to gain a better insight.

Debugging (with Augury)

How to automate the detection of malfunctioning software.

e2e Testing of Angular 2 Components
Show Me More!
2 Lectures 20:01

Build hybrid mobile apps with Angular 2.

Preview 09:43

Pre-rendering Angular 2 applications on the server.

Going Universal with Angular 2
About the Instructor
Packt Publishing
3.9 Average rating
8,229 Reviews
59,023 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.