Angular 2 Essentials
3.6 (4 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.
63 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Angular 2 Essentials

Unlock the power of Angular 2 to take over the world of modern web development
3.6 (4 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.
63 students enrolled
Created by Packt Publishing
Last updated 9/2016
Current price: $10 Original price: $80 Discount: 88% 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?
  • Create your first component with Angular 2 with minimal setup
  • Understand how Angular 2 wants you to build an application
  • Expand your skillset with the use of tools such TypeScript and Gulp
  • Find out how to build sophisticated components and how to reuse them
  • See how you can take an existing site and slice and dice it into individual components
  • Build your app with security and debugging in mind
  • Leverage a modern DevOps tool such as Ansible to deploy your application
  • Test your Ansible scripts locally with disposable virtual machines created using Vagrant
View Curriculum
  • Experience with HTML, CSS, and JavaScript are all expected; however, no prior experience with AngularJS is assumed.

Angular 2 is a dream framework for any modern day web developer. It lets you build powerful and impressive web applications, with great development efficiency, speed, and performance. This course helps you gain a strong foundation in Angular 2 and the key concepts involved in creating modern web applications.

Starting off by building your first Angular 2 component, you’ll go all the way through topics such as deployment and automated builds by the end of the course.

After building your first components, you’ll return to the build-tools to understand them better. Here you’ll see how Gulp is used throughout to automate the building of your software to make your development life easier. Then you’ll take a deep dive into the constituents of an Angular 2 component and use them to reconstruct an existing example site for Google's Material Design Lite library. Once you have your application ready, you will learn how to test and debug it. Finally, we wrap up the course by deploying your app and you’ll learn how to incorporate the continuous integration principle for automation.

About The Author

John Munsch is a professional software developer with over 29 years of experience. For the last three years, he's been leading a team building modern web app front ends with AngularJS after a couple of years spent doing the same kind of work with Backbone.js, Underscore.js, and Handlebars.js. He's definitely enjoying a life filled with JavaScript, AngularJS, and Node.js after more than 20 years spent in the Java, C++, and C world.

Prior to this course, he developed a video course called Learning AngularJS Directives, also for Packt Publishing.

Who is the target audience?
  • This course is for developers who want to learn about Angular 2 and use it to build web applications.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
Seeing Results
6 Lectures 26:30

This video provides an overview of the entire course.

Preview 03:12

Angular 2 is a big change from what viewers have likely encountered before. We'll give them a starting point in order to begin using it. 

Making a UI Out of Components

You must have certain pieces in place in order to get started with developing an Angular 2 application. We'll explain a little bit about why you need some of those pieces (specifically TypeScript) and then do all our required installations in three easy steps. 

Setting Up

Getting started with something as complicated as Angular 2 is always difficult. We did our setup in just a couple of minutes; now we'll build a single, simple component in under five. 

Building Your First Component

Lumping too much into too few files is a common problem in code that we've all encountered (or created). Huge chunks of highly specialized code aren't very reusable, testable, or easy to reason about. We'll use Angular and ES2015 to start splitting up our code into smaller pieces right from the start. 

Using a Model

No more than one component makes a UI; one class doesn't make a program. Large-scale frontend apps require hundreds or thousands of lines of code. Put it together badly and you'll suffer for years. Break your code into meaningful coherent chunks and assemble it using dependency injection. 

Injecting Dependencies
Constructing a Workflow
2 Lectures 08:18

A build workflow for Angular 2 development is dependent on a build tool to do multiple tasks. We need to make the user familiar with what Gulp does for us, how it does it, and what they can use it for in the future.

Preview 04:12

Eventually the viewer is going to want to expand, extend, or change how Gulp is being used. But many would not have had any experience with the tool and won't know where to start. In this video, we'll give a quick overview and offer that starting point.

Looking over gulpfile.js
Focusing on Angular 2
4 Lectures 23:52

"Hello World" examples don't get the viewer much of a sense of what building something real would look like. This video takes an existing admin UI template and quickly converts it into a component that renders the UI. 

Preview 05:16

Most components that deal with dynamic information have to conditionally include/exclude parts, loop to repeat sections, and so on. Angular 2 provides a core set of directives for handling these common needs. 

Using Core Directives

Forms are one of the most common things all developers have to build on websites. You can build them without Angular's form directives but using them will make them easier. 

Handling Forms

Way back in Video 1.6, we made a simple call to an API to get some values. 

Calling APIs
Upgrading Your Components
5 Lectures 27:46

We've seen some of the template syntax that Angular 2 uses in its components off and on through the course, but there's more to it than just the basics. The user needs to get a sense of what else can be done in the template. 

Preview 04:04

Learning about the template syntax is only part of what you need to do to explore components. You also need to make components that take input values for settings and content and emit events so that other code can react to changes in the component's state. 

Learning Advanced Components 2

Sometimes you need to repeat multiple elements in a sequence rather than one element with children. More advanced templating can help with that. Also, it's not uncommon to want repeated filtering or styling of your output and this is where Pipes come to the rescue. 

Advanced Templates and Pipes

If you want to have several different views within your app and yet keep it on a single page, it's good if you can have your app change views based on the current browser location. Angular supports this via the router and understanding this is crucial to be able to build bigger apps. 

Routing in Angular 2

Sometimes we need to switch routes on command within our code or update several components at the same time with a single route change. Finally we should see how we can switch to a different routing mechanism if we don't want to update our server setup to handle the default one. 

Advanced Routing
Building It Bigger
3 Lectures 16:26

Web page after web page showing you how to build a to-do app doesn't help you build a real large application using Angular. What it does is understanding some of the problems that older web technologies had, how a modern single-page app avoids them, and what problems to avoid with Angular apps. 

Preview 05:51

Oddly enough, nobody seems to talk about errors with SPAs. Every app has them and lots of them occur because bad parameters get sent, people close their browsers or lose Internet connections, and users have to authenticate too many apps. We've got to spend a few minutes talking about errors, so you can help the backend produce the best API possible. 

Handling Errors

Many developers (and managers) mistakenly think that you can control what a user sees and does using JavaScript in the browser. That's not true. Real security must lie at the API level in your stack. It's fine to disable buttons and hide data in the frontend to improve the user experience, but you cannot rely on that to protect you from hacking. 

Securing Your Application
Testing Your Work
3 Lectures 16:51

Building complicated applications on the frontend means creating complicated bugs. How do you find them to fix them? Which tools and techniques are available? Knowing your options will help you retain more of your hair over time. 

Preview 04:50

Unit testing helps you know when you broke running code and gives you some confidence to rewrite your code when you need to. In this video, the user will learn how to do unit testing for JavaScript and, specifically, how to use the tools to accommodate the SystemJS module loading and running tests from Gulp. 

Testing the Pieces

Now that the viewer knows how to set up unit testing for JavaScript and the SystemJS module loader, they need to know how to write tests specifically for Angular 2 code. It's also very helpful to know which code you're testing and which code is still untested when you have lots of code and lots of tests. 

Testing the Pieces (Continued)
Deploying and Advanced Topics
5 Lectures 27:28

Multiple developers working together make mistakes that a single developer wouldn't. In order to catch them quickly, it's a good idea to combine the code from multiple developers regularly to build and test it. In this video, I explain why you should care and what you must have in place to be able to use a continuous integration server. 

Preview 04:45

Hopefully completely sold on the idea of automated builds, our viewers are desperate to know how to set up such a thing. In this video, we show all the steps needed to do so (except all of the Git-related stuff). 

Putting CI into Practice

Development operations are error prone because it's complicated and we're human. Automation is the cure. 


The previous video introduced the ideas of Ansible but the user doesn't yet know how to get started. Take the user through using Ansible at the command line, create an initial playbook, review a more sophisticated playbook, and finally create an all-new one. 


The user is paying for servers even if all they are doing is testing playbooks. Use Vagrant and VirtualBox to create servers on the fly, test them, and then destroy them as needed. 

Living Virtually
About the Instructor
Packt Publishing
3.9 Average rating
8,109 Reviews
58,360 Students
686 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.