Angular – Le guide complet
Ce cours part de zéro, vous n’avez pas besoin de connaître Angular 1 ni Angular 2 !
Angular 12 est simplement la dernière version d’Angular 2, vous apprendrez ce cadre incroyable à partir de zéro dans ce cours !
De la Configuration au Déploiement, ce cours couvre tout ! Vous saurez tout sur les Composants, les Directives, les Services, les Formulaires, Http Accès, authentification, optimisation d’une application angulaire avec modules et compilation hors ligne et bien plus – et à la fin : vous apprendrez à déployer une application !
Mais ce n’est pas tout ! Ce cours vous montrera également comment utiliser la Angular CLI et présenter un projet complet, ce qui permet de mettre en pratique les choses apprises tout au long du cours !
Angular est l’un des frameworks frontend les plus modernes, les plus performants et les plus puissants que vous puissiez apprendre à ce jour. Il vous permet de créer d’excellentes applications Web qui offrent des expériences utilisateur exceptionnelles ! Apprenez tous les principes fondamentaux que vous devez connaître pour commencer immédiatement à développer des applications Angular.
Entendre ce que mes élèves ont à dire
Ce cours utilise TypeScript
TypeScript est le langage principal utilisé par l’équipe officielle Angular et le langage que vous verrez principalement dans les didacticiels Angular. C’est un sur-ensemble de JavaScript et rend l’écriture d’applications angulaires vraiment facile. Son utilisation garantit que vous aurez la meilleure préparation possible pour créer des applications angulaires. Consultez les vidéos gratuites pour plus d’informations.
Pourquoi Angular ?
Angular est la prochaine grosse affaire. Étant le successeur du framework Angular.js au succès retentissant, il est destiné à façonner l’avenir du développement frontend de la même manière. Les puissantes fonctionnalités et capacités d’Angular vous permettent de créer des applications Web complexes, personnalisables, modernes, réactives et conviviales.
Angular 12 est simplement la dernière version du framework Angular et simplement une mise à jour d’Angular 2.
Angular est plus rapide que Angular 1 et offre une approche de développement beaucoup plus flexible et modulaire. Après avoir suivi ce cours, vous serez en mesure de tirer pleinement parti de toutes ces fonctionnalités et de commencer immédiatement à développer des applications géniales.
Obtenez une compréhension approfondie de la création d’applications angulaires
Ce cours vous apprendra toutes les bases des modules, des directives, des composants, de la liaison de données, du routage, de l’accès HTTP et bien plus encore ! Nous allons faire beaucoup de plongées profondes et chaque section est soutenue par un vrai projet. Tous les exemples présentent les fonctionnalités offertes par Angular et comment les appliquer correctement.
Plus précisément, vous apprendrez :
- Quelle architecture Angular utilise
- Comment utiliser TypeScript pour écrire des applications Angular
- Tout sur les directives et les composants, y compris la création de directives/composants personnalisés
- Comment fonctionne la liaison de données
- Tout sur le routage et la gestion de la navigation
- Ce que sont les Pipes et comment les utiliser
- Comment accéder au Web (par exemple, les serveurs RESTful)
- Qu’est-ce que l’injection de dépendances et comment l’utiliser
- Comment utiliser les modules dans Angular
- Comment optimiser votre (plus grande) application angulaire
- Une introduction à NgRx et à la gestion d’état complexe
- Nous allons construire un projet majeur dans ce cours afin que vous puissiez pratiquer tous les concepts
- et bien plus encore !
Getting Started
Welcome to this course! Let me introduce myself and explain what the course is about!
First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question.
Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
So many Angular versions! What's up with them and which version does this course cover?
Got issues using the CLI, setting up a project or simply want to learn more about it? Check out this lecture.
Enough of the talking, let's create our first Angular project and view our first app in the browser.
Let's edit our first app!
How is this course structured? This lecture answers the question and explains what you're going to learn!
Of course you can simply go through all the lectures, but to get the most out of the course, you should consider the advises given in this lecture.
Angular uses TypeScript. What does that mean for you?
A lot of sections of this course will start with a basic setup - this lecture explains how that basic setup is created with the CLI.
Do you get some strange error? Are you stuck? Have a look at the source code of this course.
The Basics
Let me introduce you to the module and explain what you're going to learn.
We saw our first App run in the browser but do you really know how it got there? This lecture answers the question.
Angular is all about Components! This lectures takes a closer look and explains what Components really are.
Thus far, we worked with the AppComponent. Time to change this and create our first own component.
Did you recognize that AppModule file? It's super important - this lecture explains what it's about!
Now that we learned how to create and register our own components, let's now dive into using them.
We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.
A Component needs to have a Template. It's an absolute must. This lectures dives deeper into templates.
Whilst a Component is required to have a template, Styles are optional. This lectures explains how you may add styling.
The Selector of a Component is important if you want to include it in another template. This lecture explains how that selector actually works and what to watch out for.
Enough about Components for now - let's finally output more dynamic content now. Databinding is super important when it comes to that. This lectures explains what Databinding is.
One of the simplest forms of Databinding is String Interpolation which allows you to output text in your template. This lecture takes a closer look.
Property Binding is another form of Databinding - also related to outputting content. Learn more about it in this lecture.
Since both Property Binding and String Interpolation are related to outputting content, which one should you use? This lecture helps you with that decision!
So far, we only passed data to the template. What if we want to react to (User) Events? Event Binding to the rescue!
To which Properties and Events can you bind? This article should be helpful.
When we're talking about Events, we have to consider passing data. This lecture explains how that works.
You can also combine event and property binding - with Two-Way-Databinding. Learn more about it in this lecture.
We learned about the different forms of Databinding, let's now combine them!
Directives are another important building block in Angular apps. Learn more about it in this lecture.
ngIf is one of the built-in directives - it's super helpful if you want to output data dynamically.
ngIf is not limited to the usage you learned in the last lecture. Learn how to use it together with an else condition in this lecture.
Want to change some styles dynamically? ngStyle is what you're looking for.
Kind of related to the dynamic styling - you can also apply CSS classes dynamically with ngClass.
What if you wanted to output lists (e.g. an array)? ngFor is there for you.
ngFor also allows you to get the Index of the current iteration - this lecture explains how that works.
Course Project - The Basics
Time to get started with the Course Project.
How should the Angular app we're building look like? Let's plan which features and components we need.
This is an important one - make sure to not skip this lecture!
Let's get our hands dirty and set the app up.
Time to create the components we planned to create. Try doing it on your own first!
With the components created in the last lecture, it's now time to use them so that we can see something.
Later in this course, we want to switch pages - setting up a navigation bar sounds like a great idea for that.
Our navbar collapses and we don't offer a hamburger menu. Feel free to implement one on your own or change the code as outlined here.
We're also going to use some data in this project - time to create a model for that data.
With the model and the component created, we can now add some content to our component template.
In the end, we want to have more than one recipe, so let's prepare our template to output such a list.
We also want to display some detailed information about selected recipes, so let's add the appropriate code.
We worked on the Recipe Components, let's now do the same for the shopping list.
As with the Recipe, we're also going to use some Ingredients in our app - let's add the respective model.
With the model added, we can work on outputting some ingredients.
We also want to be able to add new Ingredients to the Shopping List, so let's add the respective feature.
Part one of the app is finished. We achieved a lot but a lot of features are also still missing - time to move on and learn more about Angular.
Debugging
Things don't always go the way you want them to go. Learn how to read Angular's error messages.
It can be incredibly useful to debug your app in the browser - learn more in this lecture.
Components & Databinding Deep Dive
We already learned some things about components but now it's time to dive deeper into them!
This lecture explains how you may split an existing app into multiple new components.
You already learned about property and event binding - but you didn't learn everything about it. Time to do so now.
You're not limited to binding to built-in properties. Indeed, binding to custom property is a key feature of Angular apps. Time to learn more about it.
Sometimes, you want to use a different property name outside of a component than inside of it. This lecture explains how to do that.
As with property binding, you can also bind to custom events.
You may also assign an alias to your custom events.
Let me summarize the things you learned about property and event binding.
Angular allows you to apply different styles to different components - this lecture explains how that works.
Let's dive deeper into View Encapsulation.
Sometimes, you want to get access to some of your HTML elements. Local references allow you to do just that.
You got the local references in the templates, but you can also access your elements directly from the TypeScript file - this lecture explains how that works.
Want to pass structured content (e.g. HTML code) into another component? Learn more about it in this lecture.
Components follow a certain lifecycle - this lecture dives deeper into this topic.
Let's see those lifecycle hooks in action.
How can we access template elements in different lifecycle hooks? Let's find out ...
You may also get access to the content projected into a component - let's also see how that works in lifecycle hooks.
Let me wrap up this section about Components & Databinding
Course Project - Components & Databinding
Now that we learned how to pass data to components, let's enhance our app.
Let's use the new features to add a first version of our app navigation - using custom events and ngIf.
We can not only listen to our own events, we can also pass data to components now, so let's do so.
Let's build a more complex chain of custom property and event binding to pass data around.
The user should also be able to add ingredients to the shopping list, so let's add such a feature.
Directives Deep Dive
Let me explain what this module is about!
We already learned about them, let's quickly recap ngIf and ngFor.
We already know ngStyle and ngClass but let me quickly refresh our knowledge on them.
The directive we built is okay but can be enhanced. Let's do so now in this lecture.
This lecture allows you to dive deeper into the Renderer.
When using directives, you have an easy way of reacting to events on your hosting element. Learn more about it in this lecture.
You're not limited to reacting to events, you can also bind to properties of the hosting element. This lecture explains how that works.
Property binding is of course not limited to components - let's bind to some directive properties!
We not only have attribute directives, we also use structural directives. What's that strange "*" all about though?
Let's build our own structural directive!
There's another nice built-in structural directive: ngSwitch. Learn more about it in this lecture.
Course Project - Directives
Time to add a custom directive to the course project - let's enable the dropdowns by building a DropdownDirective!
Using Services & Dependency Injection
Services are a core concept of Angular - let me explain what you may expect from this section.
Services are important - but why? This lecture explores this question.
Now that we understood what services are, let's create a Logging service.
We got a service but how can we use it now? Angular will help us - this lecture explains how.
We got the basics set now. Time to build another service and ramp up our game!
We learned a lot about services - time to make the next step. Angular actually allows us to control how many instances of a service get created. Learn more about this in this lecture.
How many services should it be?
You're not limited to using Services in components or directives. This lecture explains how you may use services in services, too.
Besides the usecases already covered in this module, services can also be very useful when it comes to allowing cross component communication. This lecture dives deeper.
Are you using Angular 6? Don't miss this new way of providing services.
Course Project - Services & Dependency Injection
Time to practice services and add some to our project!
Let's create some service files for the services we're actually going to use in this section.
A great candidate for a service is the management of our recipes - let's build a service for that!
We learned, that services may be used for cross component communication. Let's add this feature to our app.
Let's add the the shopping list service to our app!
Besides setting up services which may be queried by other "parts" of our app, we can also actively send out messages. Let's take a closer look in this lecture.
Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List. For that, we need Ingredients on Recipes - let's add them now.
Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List.
Changing Pages with Routing
Thus far, we didn't really hide that we're building a single page application. Let's give the user the feeling of switching pages - with the Angular router!
Why would you need a router? Let's take a closer look.
In this section, we're going to use an example project - let's quickly go over it.
Time to get started. Before we can view any routes, we need to set some up. We'll do this now.
We got routes and we saw that we can load them. But providing some links to the user would be nice. Let's do that now.
When using links, we can choose between different paths we set up there. Let's learn more about them in this lecture.
Wouldn't it be nice to signal to the user which route is active? It would - so let's do that.
Besides using links, you can also navigate programmatically - learn more about this option in this lecture.
Just like with links, you can also use different "path styles" when using programmatic navigation. There's something important to consider though!
Basic routing is working, but a common use case is that you encode some params in the URL. Learn how to do that in your Angular app in this lecture.
We got params in the URL, now we need to retrieve them. This lecture teaches the simplest way of doing so.
Retrieving params as shown in the last lecture can work fine but can also lead to unexpected behavior. Learn more about that in this lecture.
Important: When using route observables like params, there's something you should definitely keep in mind.
We passed normal params, but you're not limited to that. This lecture explains how you may also pass Query Parameters and a Fragment.
Just like normal Params, you can of course also retrieve Query Params and the Fragment with two different approaches.
Time to practice some things and identify some common gotchas.
We learned a lot about routing, now it's time to also understand how you can create nested routes in your app.
Let's practice the usage of query params.
Sometimes, you don't want to lose your query params when navigating again - this lecture helps!
What if you simply want to redirect the user on specific paths? Nothing easier than that!
There's something you should watch out for when redirecting users!
The AppModule file is growing quickly - time to outsource the routing logic.
Some navigation actions should be controlled before they are executed - Route Guards can help you with that!
Let's protect routes with canActivate
canActivate is nice but what if you want to protect the child routes of a route only? canActivateChild to the rescue!
Not directly connected to routing but really helpful for testing your auth guard - a fake auth service.
You may not only control access to a route but also whether a page may be left or not - learn more about this in this lecture.
Sometimes, you want to pass some static data to a specific route - this lecture explains how that could be achieved.
You learned how to pass static data - let's now pass dynamic one. With the resolve guard.
The Angular router supports a couple of different routing strategies. This lecture explains what that means.
Let me wrap up this module.
Course Project - Routing
Time to add some routing to our project!
Let's set up our project routes in this lecture.
We got routes, but it would be nice to be able to (comfortably) reach them, too. This lecture explains how that works.
Let's give the user some indication on which route currently is loaded.
Right now, the page is sometimes reloading - let's fix this.
Here's a little challenge for you: Implement the nested routes required in this project.
Were you successful? Let's now add child routing together.
We also want to pass some data through our routes - time to configure some parameters.
We got the parameters configured, let's now pass the data.
Time to indicate which recipe was selected.
We need more routes! Let's add routes to allow the creation of new recipes and the editing of existing ones.
Remember the route id? Let's fetch it now!
Thus far, we only used routerLinks for navigation. Let's also navigate programmatically now.
Don't forget the thing about route observables!
Time to clean some things up in our project.
Understanding Observables
Let me introduce to this module and why it's important!
Course Project - Observables
Handling Forms in Angular Apps
Let me introduce you this course module.
Why do we actually need Angular when it comes to handling forms?
Angular offers two approaches of handling forms - we'll have a look at both here.
Let's get started by creating an example form.
Let's understand how the form is created and how we may register controls on it.
We got the form configured, time to allow the submission.
Angular does so much more than just submitting the value. Let's dive into the form state.
We're not limited to accessing the form in the template. Learn how to pass it to the template in this lecture.
An important part of configuring forms is adding validation. This lecture explores your options.
Which validators may you use? This article helps!
Let's use the state of our form.
Let's also display some appropriate error messages to the user!
You can also adjust the values of your form - learn more about it in this lecture.
ngModel may also still be used with two-way-binding - learn more in this lecture.
Bigger forms require structure - you can add this structure by grouping controls.
Are Radio Buttons difficult to handle? Not at all as this lecture shows.
You can also adjust form values after it has been initialized - this lecture dives into the two alternatives you have.
We learned so much about forms - let's use the form data now.
What if you want to reset a form? Well, you simply call reset().
Enough about the template-driven approach - let's dive into the reactive one now.
Time to set up a template for the form.
Let's create our form - in TS code since we use the reactive approach. It's going to be real easy.
We got the form, we got the HTML - let's sync it now!
Everything's set - let's submit the form now.
Just like in the template-driven approach, you of course also may validate your forms. Learn how that works in this lecture.
Want to get control of your controls? No problem at all!
You may also group your controls as this lecture shows.
Sometimes, you want to add controls to your form dynamically. Using an array of controls might be an interesting option then.
What if you want to add some validation which isn't supported by the built-in validators? You simply add your own one.
Let's use the error codes we got!
You're not limited to synchronous validators - let's build an asynchronous one in this lecture.
Learn more about using the reactive features of your forms in this lecture (sidenote: not limited to the reactive form approach!)
Want to set or patch form values? Of course you may do that here, too!
Course Project - Forms
Let me introduce you to this module.
We want to handle the addition (and updating) of shopping list items with a template-driven form - let's add it.
Time to add some validation!
Would be nice if we could select items from the list - let's add such a feature!
We can select items, let's now add them into the form!
Loading items is nice, let's now allow the user to edit them.
We're done - let's reset the form!
We know how to reset the form but what about clearing it? Let's add the respective functionality!
We can create, read and update items on the list - time to allow the deletion!
Editing and creating Recipes would also be a nice feature - let's add the respective (reactive) form to the app.
We create the HTML code for our form, time to create the form itself in TypeScript.
We got the form - time to sync it with the HTML code.
With the FormArray added, let's add the functionality to add new controls.
We don't want invalid recipes - time to add some validation.
The user is able to edit the control values - let's now take care about the submission of the form.
Let's add functions to delete recipes or clear the form.
Once a user deleted a recipe, he still stays on the detail page. Time to change that and redirect the user.
Let's preview the image we're about to add.
We already do provide the Recipe service but it behaves strangely. Time to change that.
Let's finish this part by allowing the user to delete Recipes and by fixing some other minor things.
Using Pipes to Transform Output
Let me introduce you to this module and to pipes.
This module explains how to use pipes.
Some pipes can be configured and this lecture teaches how that then works.
There are quite some built-in pipes (shipping with Angular). This lecture explains where to learn more about them.
You're not limited to one pipe at a time - instead, you can chain them!
Didn't find the pipe you were looking for? Build your own one!
Of course you may also configure your own pipe.
Let's practice the creation of pipes by building a filter pipe.
The Filter Pipe is not working as expected - let's "fix" it.
Let's have a look at a "special" built-in pipe: The "async" pipe.
Making Http Requests
Course Project - Http
Authentication & Route Protection in Angular
Dynamic Components
Angular Modules & Optimizing Angular Apps
Deploying an Angular App
Bonus: Working with NgRx in our Project
Bonus: Angular Universal
Angular Animations
Have a look at this lecture to learn how to make animations work with the latest version of Angular!
Let me introduce you to this course module.
To be able to animate anything, we need to have a project with which we may start. So let's take care about that in this lecture.
Key Concepts of Angular 2 Animations are "Triggers" and "State". Let's explore both concepts in this lecture.
So we got "States" but how do we use them? Well for a start, we can switch between them, so let's do that in this lecture.
Would be nice to be able to transition between two states, wouldn't it? This is what this lecture is about.
We learned the basics about transitions, now let's ramp it up and see what else we can do with them.
And more on Transitions! Let's have a closer look at the different phases Transitions may have.
If our goal is to animate the appearance of an element which wasn't attached to the DOM before, we need some help to be able to find a fitting initial state. Turns out, Angular 2 has us covered.
Sometimes you need the highest degree of control you can get - Keyframes can help you with that!
What if you want to play multiple Transitions simultaneously? Transition Groups to the rescue!
We know a lot about Animations, but what if you want to execute code right after an Animation finished? We got Callbacks for that! Learn more about them in this video!
Adding Offline Capabilities with Service Workers
A Basic Introduction to Unit Testing in Angular Apps
Let me introduce you to this module about Unit Testing.
Why might you want to use Unit Tests - this lecture takes a closer look!
Let's analyze how an Angular 2 Unit Testing Setup looks like.
We analyzed our setup - let's now try it out and run some tests!
Let's write our own tests and practice this when adding a new Component.
Often times you don't want to test a Unit standalone - instead you also want to test a dependency. Let's take a closer look!
What if you have an asynchronous task? Normally you don't want to execute it and still test it. That's possible as this lecture explains.
Regarding async tests, Angular 2 also has an additional Tool in its pocket - let's learn more about.
Some Tests can be run totally isolated from Angular 2. Others can't. Let's see when each of the two cases might be relevant.
Angular as a Platform & Closer Look at the CLI
Angular Changes & New Features
Angular Elements is an exciting new feature introduced with Angular 6. Time for a first look!
Course Roundup
Wow, we achieved a lot in this Course! Let me give you a brief round-up :)
