The code of this course is fully up to date with the Angular 4 release - meaning that the videos cover the Angular 4 4 release API and the support code is updated to Angular 4.
Important: By enrolling you also get very fast and friendly student assistance. If you have questions please post a question and i'll get back to you ASAP. Remember I'm here (every day) to help you and can answer you also in French and Spanish if you prefer.
> Evgeni Rovinsky 5 stars - Amazing lecturer ! Amazing material explanation. I enjoy every lesson and study with pleasure. Recommended for everyone who wants to dive into Angular 4. Thank you for this course !
> Dave Loeb 5 stars - "Compared to other courses I have taken in the past, this just seems to be more comprehensive while remaining easy to follow. Considering the material and the changes over time, quite an accomplishment."
> James Barlow 5 stars - "Very impressed Great run through of all the little fiddly bits needed to get up and running, and doesn't assume any prior knowledge of Angular 4. A bit of prior experience of ES6 or Typescript will help."
> Venkateswara 5 stars - "This is really a jump start with minimal tools to become an expert. I was a fan of Angular now a die hard fan of Angular."
Why Learn Angular ?
Angular is clearly the next big thing in the software development landscape ! Angular 4 brings frontend development to a new level of simplicity, and will enable companies to work in the way they always wanted : with teams of Full Stack Developers. Its just not practical to divide functional requests across technological borders.
The familiarity of Angular 4 and Typescript to backend developers typically used to object oriented languages like Java or C# will be the killer feature that will enable its adoption: these are new technologies full of powerful features, but still they look so familiar.
If you are a professional software developer working on an enterprise setting, but also in a consumer-driven organization: You simply must learn Angular 4.
What is in this Course?
This is an introduction to Angular 4 and its surrounding Ecosystem - including Typescript and SystemJs.
The course contains an Introduction To Typescript, Components and Directives, Pipes, Services, building the service layer with Observables and RxJs, how to setup a development project and more. As mentioned it will contain as well Forms, Routing and cover the Angular CLI.
How is the course structured?
The goal is to introduce Angular 4 concepts step by step in a sequential way, each concept building on the previous. At the end of each major section is a practical exercise to apply all the concepts learned in the section.
Why should you take the course?
This condensed course will spare you what can easily amount from weeks to months of research, and will give you insights only possible by having used Angular 4 in practice.
The goal of the course is to cover the fundamental aspects of Angular 4 development, establishing some solid ground for getting started using the framework.
Who should take this course ?
The course is designed for beginners, although intermediate and advanced students without prior knowledge of the framework would still learn Angular 4 a lot faster by taking this course.
Show me the Code
All code examples are available under the form of a small, isolated node module (as a zip file installable with npm install).
*Reminder: Like for all Udemy courses, a full 30 day money back guarantee is provided if the training material does not meet your expectations - and that means FULL refund, no questions asked.
This contains the lessons code, instructions on how to install it come on the next lesson
This is step by step guide to create your first Angular 2 application. Its aimed at beginners just starting out with the framework
This lesson will show how to create a component, and how to link the component to a given custom HTML tag. It will show how to give the component a given template.
In this lesson we are going to see how to include a component inside another component. We are going to create a simple search box component and include it in our main application.
In this lesson we are going to learn how to use the Angular 2 template syntax for properties, and learn how we can use it to pass input data to a component. We are going to see also a simplified input syntax for passing constant strings as component inputs.
In this lesson we are going to see how components can emit custom events via EventEmitter and the @Output decorator. We are going to see how we can subscribe to standard browser events, and how the syntax for that is exactly the same as in the case of custom component events. We will also learn how Typescript literals can be used to output variables inside template strings.
In this lesson we are going to learn how a component template can be defined both inline and in an external file. We are going to learn how to configure the component so that Angular can find the template at the correct location, using the module commonjs variable. We are going to learn also some best practices for component naming, from the official Angular 2 Style Guide.
In this lesson we are going to learn how components can be styled using both inline styles and an external css file. We will learn some more best practices on file naming. We will learn how the mechanism for style isolation works in Angular 2.
In this lesson we are going to put together all that we have learned so far about components to create a more complex example. We are going to create two components: a color picker and a color previewer and see how they can interact.
In this video we are going to present an exercise for putting in practice the several concepts that we have learned so far about components.
This video contains the solution for the introduction to components exercise.
Angular 2 Components are actually simply just Directives. All the functionality that we have learned so far about Components also applies to Directives. In this lesson we are going to learn how to Directives can also have inputs and outputs, and how the use of the decorators @Input and @Output also applies to directives.
We are also learn a new functionality for exporting a template reference for the directive itself into the template on which the directive is being used.
This is an overview on the ngFor core directive, how it works and some common use cases on how it should be used to build templates. It demonstrates how ngFor can be used with any iterable and not only arrays, and how to use together with other mechanisms of the framework like @ContentChildren.
This lesson is an overview on how to use the ngClass and ngStyle Directives, when to use which, and alternative syntax in case we only to modify one property/style.
This lesson covers the use of the core directive ngIf, as well as two other alternative way of showing or hiding elements from the DOM: the hidden property and the visibility CSS property.
This lesson is an extended tour on Angular 2 directives. This is an extremely powerful feature of Angular 2 that often remains underused. Its super powerful and and if used correctly can be used to create functionality that is much more reusable than components themselves.
In this video we are going to present the exercise for the Introduction To Directives section. The goal of the exercise is to take the learned functionality about how to build a custom directive and how to use the standard Angular 2 Core directives to build an improved version of the collapse-on-click directive.
In this video we are going to present the exercise solution for the Introduction To Directives section.
This lesson is a deep dive into Angular 2 template syntax properties. It explains not only the syntax, but also what it actually does under the hood. It explains the take of Angular 2 on Properties vs Attributes, and how the property mechanism is really much more generic than it looks - at its heart its simply a mechanism for reading and writing into the DOM.
This is an overview of what is possible with the Angular 2 template syntax for interpolation, common use cases and error scenarios.
This is a deep dive on how Angular 2 handles events, and in general how the framework works under the hood, namely how Zones or Zone.js works, and how its used by Angular to handle events. It covers the template syntax for events and its internal implementation.
This is an introduction to the Angular 2 Standard Pipes. A major pitfall of using them will be presented: they don't work out of the box for certain browsers. We will cover the following pipes: Uppercase, Lowercase, Slice, Replace, Date format, Number format, Percent format and Currency format. We will also learn how to build a custom pipe.
In this lesson we are going to learn how to write a simple Angular 2 injectable service, and see how to inject it anywhere in the app using constructor injection. We are going to see how the service can be configured for injection by passing it to the bootstrap dependencies list.
In this lesson we are going to use the Angular 2 HTTP service for the first time, and we are going to do an HTTP call to a mock backend HTTP server built using ExpressJs. We are going to parse the result of the GET call by mapping it with the Rxjs map operator, and pass the data to a list component.
In this lesson we are going to learn how to use the Angular 2 standard HTTP service to do a POST HTTP request to our development server. We are going to learn a couple of features of Typescript along the way: the object shorthand notation and the use of the private keyword in constructors.
We are going to learn about strategies on how to save data on the backend: we are going to present a simple strategy where the data gets saved first on the frontend and the results immediately presented to the user in an optimistic way. The data is saved in the background and we only present something else to the user if there was an error on the server, which is usually not the case.
In this lesson we are going to learn how to handle HTTP errors in the case when the server throws an error. We are going to learn how to pass an errors handling function to the HTTP service at subscription time, and we are going to learn the important difference between console.log and console.error.
In this lesson we are going to learn how to use the ts-node and express node.js modules to setup a very simple HTTP server, meant for development purposes only. We are going to learn how to serve mock data from the server via a small RESTful by configuring a couple of simple HTTP routes: including a GET, a POST and a DELETE.
In this lesson we are going to present the exercise for the Introduction to Services section, and provide some tips to help solve it.The goal of the exercise is to add a delete button to each entry of out lessons list, and then on button click do an Ajax HTTP DELETE request to the server and apply the modification operation there.
Introduction to Angular 2 NGModule and Feature modules
In this lesson we will learn several ways to debug an Angular 2 application, including by using Augury and the console.
In this tutorial we are going to learn exactly why Angular 2 provides us with a complete framework module to help us build forms. Forms seem deceivingly simple, but the reality is that large forms that span multiple tabs and have complex business validation logic can be some of the most challenging user interfaces to implement. We are going to get an overview of what the Angular 2 Forms module provides us out of the box as developers: what are the features available for data binding and validation. We are going to start this Angular 2 Forms course by introducing the newest version of NgModel, which will be especially familiar to AngularJs developers.
In this tutorial we are going to go deeper into the NgModel Angular 2 Form Driven functionality. We will start by clarifying that ngModel is not only about bi-directional binding. We will show how we can turn that feature off and see how NgModel can still be useful for both form validation and form initialization.
Also in this lesson we are going to see how we can bi-directionally bind a Typescript enum instance into an HTML radio button form field, by using a couple of Typescript features: getters and setters.
In this tutorial we are going to learn how the Angular 2 Forms validation functionality helps us keep track of the current state of each form field. We are going to learn about the 3 separate states that Angular 2 tracks in form fields: is the form field touched or untouched ? is it pristine or dirty ? Valid or Invalid ?
We are also going to introduce the first standard form validator that allows us to mark a form field as mandatory: the required attribute directive. We are going to see exactly how these CSS form field state classes can be used to inform the user when a form field is in error, while ensuring that the user still has a good user experience while filling the form.
In this tutorial we are going to learn how Angular 2 Template Driven Forms really work under the hood. It might seem like a a lot of magic is going on, but in fact we will that its all just a set of form directives that get applied for us transparently. We are going to explain what those directives are and how they interact with each other.
We are also going to learn what the form field validators are already available to us out of the box: we will cover the minlength, maxlength and pattern form field validators and show them in action.
In this Angular 2 tutorial we are going to learn why template driven forms have that name: we are going to learn the available template exports that both the form and the control field directive make available to us. We will cover both the ngForm template variable export and the ngModel export.
We are also going to see the first example of how the form validity information can be used to add dynamic behaviour to a form: we are going to track the validity state of a whole form (and not only an individual field), and use that information to enable or disable a form submit button.
In this tutorial we are going to learn how the Angular 2 NgModel form field template export can be used to help dispay individual form field error messages to the user. We are going to cover common pitfalls that can occur when using the ngModel template export: when to add guards against undefined values using the Elvis operator.
We are also going to learn some best practices for using the NgModel template export to display the error messages in a way that ensures a good user experience. Its important to only display the form field error messages only if the user tried to change something in the form, and not show them initially when the form is first loaded.
In this tutorial we are going to learn how we can use the Angular 2 ngModelGroup template directive to group several controls of a form into a control group that has its own binding and validation status. We are going to give an example on how in a form with multiple sections (for example multiple tabs or fieldsets) we can display to the user that a whole section is in error.
We are going to give a concrete example of a control group: we are going to mark the legend of a fieldset in red if any of the fields inside the fieldset is still in error. This will demonstrate that the form control group has its own separate validity status, which can be different than that of the main form.
In this tutorial we are going to learn what are are model driven or reactive Angular Forms and how can we use them, we will cover the reactive form directives formGroup and formControlName in detail. We are going to learn some of the main differences towards template driven forms, and learn how to create forms and form controls programatically instead of declaratively via the form template.
We are going to cover the FormGroup and FormControl Angular 2 classes, and how can use them to declare a form and its controls, and how to define a form control initial value and validation rules. We are going to see how to bind a control created programatically with a form field by using the reactive form directives formGroup and formControlName.
In this tutorial we are going to learn how to configure form validation programmatically in Angular 2 model driven forms. we are are going to see how we use the standard Angular 2 Validators import to configure the several validators that we previously saw in action: marking mandatory fields with required, minimum field length with minLength, maximum field length with maxLength, and validating against a regular expression using the pattern validator.
In this tutorial we are going to learn how to we can configure model driven forms in a less verbose way by using a standard Angular 2 injectable, the FormBuilder.
We will see how the form builder provides a simplified builder API for configuring forms a bit more easilly than by calling the FormGroup and FormControl constructors.
In this tutorial we are going to learn why Angular 2 model driven forms are also sometimes called reactive forms. We are going to learn why these type of forms are more powerful than template driven forms, and we are going to give a couple of examples of common use cases where certain form functionality can be easily implemented using RxJs and a reactive approach, while doing it in another way would be more complex.
We are going to show how forms and their controls can be represented as streams of values, and we will tap into the valueChanges observable available via the Forms API to filter the form value but ony react to valid form values.
In this tutorial we are going to learn how we mark form fields in error and display error messages to the user in the case of Angular 2 model driven forms. We will see that the approach is similar than what we did while using template driven forms, but in this case we don't have template exports available.
We are going to see how the FormControl api exposes a list of controls each with a separate status and its own list of errors, and how that can be used to display messages to the user.
In this tutorial we are going to learn how we can define a form control using the reactive formControl directive in an Angular 2 model driven form in a programmatic way and how we don't even have to pass it to the FormBuilder or to the FormGroup. We can define the control in a separate variable and then bind it via the the template to the Form by using the formControl reactive form directive.
This functionality is very useful in cases where we would like to configure the form in a more flexible way, for example by dynamically adding a set of validators depending on the data of the form.
In this tutorial we are going to learn how simple it is to create custom form field driven validators while using Angular 2 model driven forms. These type of validators are really just plain functions that follow a set of conventions.
We are going to learn how to write a custom form validator and what the validating function needs to return in order to respect the Angular 2 form field validation contract.
In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best practive to extract the validation function to a separate function, so that it can also be used for model driven validation.
We are going to learn how we can configure the template driven custom validator directive into the Angular 2 Forms mechanism, by plugging the directive into the dependency injection system using NG_VALIDATORS and forwardRef.
In this tutorial we are going to learn when to use template driven vs model driven Angular 2 Forms. We are going to learn how template driven and model driven are just simplifications of two ways of thinking about forms that can actually be combined in many cases, and we are going to see exacly how.
Congratulations, you have reached the end of our Angular 2 Forms course. Its now exercise time ! We are going to present in this lesson a simple problem that will give us a chance to practice most of what we have learned to far.
We are going to create a signup form, where the user needs to enter its credentials namelly the password twice in order to sign up. The goal is to build the form using NgModel and template driven forms first. Then use Ngcontrol and model driven forms to implement the mult field validation that ensures that both the password and the confirmation field have the same value.
In this tutorial we are going to learn how we can implement a sign up form using Angular 2 template driven forms and NgModel. Then we are going to use model driven forms to implement a multiple field form validation: the password that the user types and the confirmation field need to be identical.
We are going to throw in some functional programming and see how we can pass extra arguments to the model driven validation function by making it a partially applied function using Object.bind.
About the Angular University:
The Angular University aims to be the one place that you go in order to learn and keep up with the Angular ecosystem. We provide premium quality video tutorials, screencast style.
About the course instructor:
Hello, my name is Vasco and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.
I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations.
I also love to teach, write and talk about technology. I am looking forward to be your Angular instructor,