Learning Path:Angular:Fundamentals of Angular 2 -2nd Edition
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.
12 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path:Angular:Fundamentals of Angular 2 -2nd Edition to your Wishlist.

Add to Wishlist

Learning Path:Angular:Fundamentals of Angular 2 -2nd Edition

Stay ahead of the curve with this updated and all-included Angular 2 Learning Path
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.
12 students enrolled
Created by Packt Publishing
Last updated 4/2017
English
Current price: $12 Original price: $200 Discount: 94% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand TypeScript’s type system and how to use it more effectively
  • Familiarize yourself with Angular 2’s new syntax and its change detection mechanism
  • Plan and migrate code incrementally and avoid bulk migration
  • Debug Angular 2 components and write automated unit and end-to-end tests
  • Run Angular 2 components on mobile devices and on the server
  • Customize an Ionic 2 application using the power of SASS variables
View Curriculum
Requirements
  • Requires basic knowledge of JS and experience with legacy Angular.
Description

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

New technologies and new patterns are emerging on a daily basis. Coding for the front end is extremely demanding, but at the same time more interesting and challenging than ever before. This highly dynamic ecosystem provides huge possibilities to create awesome webpages. Angular 2 is at the forefront of this ecosystem.

Angular 2 is a technical and conceptual overhaul of its hugely popular predecessor, AngularJS. Keeping your skills relevant and up-to-date will do you a world of good; get started with this comprehensive introduction to Google’s popular community project.

This Learning Path covers the fundamentals of Angular 2 including how to migrate to Angular 2 and Angular 2 directives and components. We will also look at how TypeScript complements Angular 2 and build a mobile app using Ionic 2 and Angular 2.

The goal of this Learning Path is to help you efficiently plan a migration from AngularJS to Angular 2. We will also teach you how to complement Angular 2 development with TypeScript and build a hybrid employing the best of Angular 2 with Ionic 2.

This Learning Path is authored by some of the best in their fields.

David Sherret

David Sherret is a software developer in the healthcare industry. Within that, he leads several projects including one that supports the logistics behind specialty pharmaceuticals and maintains a patented technology for reducing health insurance fraud.

You can find him answering questions on the TypeScript tag on Stack Overflow.

Alain Chautard

Alain Chautard started using Angular in 2011, back when it was a very young technology and wasn’t widely used yet. He has used AngularJS on a daily basis since then. He also teaches AngularJS in California, where he is the organizer (and main speaker) of an AngularJS meetup group.

Alain is an expert AngularJS consultant at Interstate 21, where he develops beautiful web applications for clients located all over the world.

Juri Strumpflohner

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, tweets at @juristr, and writes technical articles on DZone or his blog.

Mathieu Chauvinc

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. 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.

Who is the target audience?
  • If you've built an application with Angular 1.x and need direction on how to efficiently migrate that application across to Angular 2, then this Learning Path is for you. If you've spent time with TypeScript and know how things work on a basic level, this Learning Path will allow you to graduate to a level of mastery. Anyone looking to get started with app development can also use the introduction to Ionic 2 section to get their feet wet with hybrid app development.
Compare to Other Angular Courses
Curriculum For This Course
125 Lectures
11:05:33
+
Mastering TypeScript
41 Lectures 03:13:31

This video will offer the overview of the course.

Preview 03:23

What does the sample application look like?

Sample Application Overview
04:13

We need to add TypeScript to the sample application. This video will review some of the ways of compiling Typescript, and then show you how we are going to compile the sample application in this case.

Compiling TypeScript in the Sample Application
04:31

When should implicit types be used and when should explicit types be used?

Preview 06:53

The “any” type should be avoided. This video will explain why.

Avoiding the any Type
03:36

Not many developers know that TypeScript uses a structural type of system instead of a nominal one.

Being Aware of Structural Typing
02:42

What are some troubles that people experience with the type system?

Type System Troubles
04:07

What compiler options can we use to make the compiler stricter?

Compiler Options for Added Support
02:23

What is a linter and what benefit does it bring?

Enforcing Rules and Coding Standards
04:23

This video will introduce the viewer to moving towards ES6 classes.

Preview 03:54

How can we convert some JavaScript patterns to ES6 classes?

Class-like JavaScript Patterns to TypeScript (Part 1)
05:52

How can we convert some JavaScript patterns to ES6 classes?

Class-like JavaScript Patterns to TypeScript (Part 2)
04:24

What do static class-like patterns look like in TypeScript?

Static Class-like Patterns in TypeScript
03:17

How do we reduce code written using parameter properties?

Shortening a Class with Parameter Properties
01:40

When should we use arrow methods on a class?

When to Use Arrow Function Properties
06:01

What is type assertion and type guarding and how can we use them appropriately?

Preview 05:24

How can we use type guarding in situations where type guarding doesn't work?

Making the Most of Type Guarding
05:05

When should we use function overloading, optional, and default parameters?

Multiple Function Signatures
06:04

What are some other features we can use with functions?

Rest and Spread
02:19

How can we extend built-in types without modifying an object we don't own?

Extending Built-in Types
04:00

What is code refactoring and how do we use it in TypeScript?

Code Refactoring
03:21

What are definition files?

Preview 04:35

How can we write a definition file?

Writing a Definition File
07:46

How can we use a JavaScript library when we don’t have time to write a full definition file?

Strong Typing JavaScript Libraries on the Run
05:24

What’s the best way to manage definition files?

Downloading and Managing Definition Files
05:43

What are some of the definition files included by default in TypeScript?

Included Definition Files
04:17

What is let and const? How do they differ from 'var'?

Preview 05:18

What’s a better way we can work with strings in TypeScript?

Working with Strings
06:00

How can we use enums to write better code?

enums
05:21

What are const enums and how do they differ from enums?

const enums Versus enums
03:23

How can we use ES6 modules to write better code?

Moving to ES6 Modules
07:45

What is destructuring and how can it help us write better code?

Destructuring
05:12

What are generators? How do they work?

Preview 06:27

How do generators help improve performance and efficiency in our application?

Improving Performance and Efficiency with Generators
03:59

How does async and await work? 

Easier Asynchronous Code with async/await
03:53

How can decorators help us in our code? In this video, we’ll step through an example in our sample app.

Harnessing the Power of Decorators
07:36

How can we have a decorator with parameters?

Advanced Decorators
03:34

How can we share code across multiple applications?

Preview 05:23

What’s one way that we can help bridge the type gap?

Bridging with Interfaces
05:48

How can we bridge the server/client strongly typed gap?

Bridging with Code Generation
03:24

How can we bridge the gap between our View and client-side TypeScript code?

Using TSX Files
05:11
+
Migrating to Angular 2 – Second Edition
22 Lectures 01:33:39

This video will provide an overview of the course.

Preview 02:06

Angular 2 is completely new and was entirely rewritten. Developers have to learn a new syntax, vocabulary, and way to work with Angular 2.

Looking at What's New in Angular 2
03:44

In this video, you will get to know why it is important to upgrade your code.

Keeping Up with the Latest Angular 1.x Is Important
02:33

Have a look at the presentation of the sample project, where we are going to migrate from Angular 1 to Angular 2 in order to illustrate the migration process.

Presenting Our Sample Project
03:39

In this video, we will plan whether the migration to Angular 2 should be done all at once or incrementally.

Preview 03:39

The Angular team wants to make our migration to Angular 2 easy by making Angular 1.x as close as possible to Angular 2.

Let's Use the Latest Angular 1.x First
04:00

Angular 2 comes with ES6 and TypeScript support, and most Angular 2 examples on the web are written with TypeScript. What is it exactly?

What Are TypeScript and ES6?
04:04

Using Angular 2 with TypeScript requires some specific development environment configuration. We will discuss what exactly we need.

Preparing Our Development Environment
05:49

Angular 2 handles scopes differently compared to Angular 1. That change of philosophy was already introduced in Angular 1 with the "controllerAs" syntax. 

Preview 06:11

Angular 2 introduces components, which are the new way of building Angular applications. Most of the code that we are going to write in Angular 2 will be components, so it makes sense to create as many components as possible right now.

Making Components, Not Controllers
04:32

Angular 2 introduces a new router based on components, which, as we've seen before, are similar to controllers.

Using the Latest UI Router
02:45

Angular 2 comes with TypeScript support, which allows us to write reusable code more easily. We will discuss how to use TypeScript in our services.

Using TypeScript Classes for Our Services
04:20

Angular 2 comes with TypeScript support, which allows us to write reusable code more easily. How to use TypeScript in our controllers, and especially how to achieve dependency injection?

Using TypeScript in Our Controllers
03:16

Angular 2 handles services differently than Angular 1. We already made most of the required changes to our code. Let's see what's left to be done.

Preview 06:11

Angular 2 uses components where we used to have directives. We already migrated our directives to components. Now is the time to turn our Angular 1 components into Angular 2 components.

Switching Our 1.x Components to Angular 2 Components
05:05

Angular 2 does not have controllers anymore. Now is the time to turn our Angular 1 controllers into Angular 2 components.

Switching Our 1.x Controllers to Angular 2 Components
05:58

Angular 2 has a new router based on components. Using this router is the final step before migrating our app fully to Angular 2.

Using the New Angular 2 Component Router
04:48

Every application is different, so your app may have code that cannot be migrated using the content of that course. Let's go through additional resources to get you covered.

Solving Complex Migration Cases
04:04

Angular 2 has a list of best practices to make our code aligned with the vision of the Angular team. What are those best practices?

Preview 03:12

Angular 2 was designed to work with TypeScript, which is a superset of ES6. In this video, we will explore what will happen in the future when those languages evolve.

The Future of TypeScript and ES6
02:32

Angular 2 is still very new to everybody. In this video, we will discover where we can find help and support to develop our apps. .

Taking Angular 2 Further
03:27

The aim of this video is to learn more about TypeScript and components. 

Learning TypeScript and Components
07:44
+
Learning Angular 2 Directives
20 Lectures 02:22:49

This video will provide an overview of the entire course.

Preview 03:41

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
06:38

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 such as WebComponents and Angular aim at tackling them.

All about Components
06:13

How do we write Angular 2 components? In this video, we’ll get a first grasp of it.

Preview 05:37

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
06:16

Many people 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
10:55

We identify components on a static HTML page representing our app layout.

Preview 07:29

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

Scanning for New Sensors
07:59

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

Creating a General Purpose Filter
06:16

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

Preview 07:01

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

Making the Modal Generally Reusable
05:13

Learn about the difference between components and directives.

Attribute Directives to the Help
06:18

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

Preview 07:16

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

Integrating an External Library – Data Visualization with D3
05:06

Minify, bundle, and deploy an app in production.

Ready for production – Bundling and Minification
10:16

Writing a unit test for our Angular 2 component.

Preview 09:07

Learn how to debug the current state of our application to gain better insight.

Debugging (with Batarangle)
06:10

Learn how to automate the detection of malfunctioning software.

e2e Testing Angular 2 Components
08:22

Learn how to build hybrid mobile apps with Angular 2.

Preview 07:28

Pre-rendering Angular 2 applications on the server.

Going Universal with Angular 2
09:28
+
Learning Angular components - Second Edition
20 Lectures 02:37:35

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
06:38

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
06:13

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
05:35

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
18:56

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
08:06

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

Creating a General-Purpose Filter
06:08

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
05:27

Learn about the difference between components and directives.

Attribute Directives to the Help
06:19

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
05:18

Minify, bundle and deploy an app in production.

Ready for Production – Bundling and Minification
10:16

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)
04:30

How to automate the detection of malfunctioning software.

e2e Testing of Angular 2 Components
07:21

Build hybrid mobile apps with Angular 2.

Preview 09:43

Pre-rendering Angular 2 applications on the server.

Going Universal with Angular 2
10:18
+
Introducing Ionic 2
22 Lectures 01:17:59

This video will provide an overview of the course.

Preview 03:33

Starting a project can sometimes mean installing tons of things and can be quite a lengthy process before everything is up and running. However, this is not the case with Ionic 2, which offers a great CLI and a "start" command to bootstrap code, including a side menu, several pages, and so on.

Bootstrapping an Ionic App
02:45

It is important for developers to be familiar and comfortable with the structure of the project. We'll take a look at the location of some of the different elements of the project, configurations, dependencies, hooks, and actual app components.

Exploring the Project Structure
02:49

The app needs to be served, but this depends on its status. Let's take a look at which way of serving is better. The live reload server is an obvious winner for ease of use and debugging, while the new lab view helps us think about the experience on both Android and iOS. Emulators give a better idea as to the real experience that users will have; finally, the device can be used when the app is close to finalized.

Lab, Device, and Emulator
02:56

Apps always contain several pages. We need to create them and ensure that they are navigable.

Preview 03:05

Ionic2's navigation system is very different from the previous version. We will take a look at how the stack is used and the difference between the root and the other pages.

Navigation Concepts in Ionic 2
01:38

Navigation concepts are acquired; it is time to apply them to our application.

Navigating to Pages
04:15

We need to present the list of search results in a visually attractive list. Ionic makes this easy with the ion-list and ion-icon components, and Angular allows us to repeat the items using ngFor as well as bind the values of attributes to the DOM elements' properties.

Preview 05:15

The app executes a search on the iTunes API. This requires a search bar that will react when the user presses "enter". We'll use the search bar component to present the query input and bind to the keyup as well as cancel events.

Adding a Search Bar
03:27

The search should be targeted to a specific country's iTunes API. So, we will create a settings page in which we'll use a radio to select the country.

Using a Radio Buttons List
04:39

We need to load real data from an API. For this, we need HTTP_PROVIDERS to be provided and the HTTP service to be dependency injected.

Preview 04:07

Some APIs do not allow cross-origin calls. Also, having logic coded inside the component itself isn't a good practice. So, we'll create our own service and make use of Jsonp to get around the cross-origin restrictions

Creating Your Own Service
05:43

Filtering and other calls for actions are vital in any app but not easy to present smartly in a mobile application. Action sheet is a great solution to this issue; it displays a nice overlay, and we can code what happens when we click on each button.

Preview 03:39

Temporary or intermediary pages are often necessary in applications. Although we know we can navigate to a page with a Back button, a modal makes more sense sometimes from a user-experience perspective. We will create such a modal and pass the track we clicked on as part of the navigation to display a preview of this track.

Creating a Modal Preview
04:11

Cell phones often face a shortage of space. So relying on a bulky button is rather outdated. Pull-to-refresh is an amazing user experience tool that allows you to pull a list of items and refresh it with new ones.

Adding a Pull-to-refresh
03:06

The application needs to communicate with the user. Through the use of various dialogs, an alert, a confirm box, and a prompt, we will make the app clearer and more interactive with the user.

Preview 05:32

Tasks run in the background can be confusing to the user; they can't see that something is happening. Loaders or progress indicators take care of this issue and give users a clear statement that their request is being processed.

Adding a Loader
02:45

Forms are one of the most common type of interaction with users. They can be tedious to build and validate, though. We will use the FormBuilder service to create a form focused on its inputs and leverage the validation framework to display error messages when needed.

Building a Form
04:03

Though the app looks really nice, it is rare that your corporate colors match the out-of-the-box Ionic feel. Ionic uses a large number of SASS variables, which you can override in order to make the app feel more like your own.

Preview 03:06

We need to be able to navigate to the artist view and to pass along the artist we are looking at. Extra information can be passed during navigation to either root pages or intermediary pages. On the destination page, NavParams can be used to retrieve said information.

Navigation with params
02:01

Carousels or sliders are a very common type of display for limited lists where visuals are important. The built-in ion-slides allow us to very quickly come up with such a carousel and takes care of touch events, such as sliding.

ion-slides
01:40

It is sometimes troublesome and also less declarative to work on data only within the controller. Pipes allow us to modify data from within the template. They are typically used to filter arrays or format content (dates, pluralization, and currency)

Using a Pipe
03:44
About the Instructor
Packt Publishing
3.9 Average rating
8,274 Reviews
59,271 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.