Créez une application avec ASPNET Core et Angular à partir de zéro
Un exemple pratique de création d'une application avec l'API ASP.NET Core (.Net 5.0) et Angular 10 du début à la fin
Apprenez à créer une application Web du début à la publication en utilisant ASPNET Core (v2.1), Entity Framework Core et Angular (v6)
Les étudiants qui terminent ce cours auront une compréhension pratique d'Angular et d'ASPNET Core
Comprendre comment structurer une application Angular en utilisant les meilleures pratiques
Apprenez à intégrer des composants tiers dans l'application Angular
Utilisez efficacement le code Visual Studio pour améliorer le flux de travail
Utiliser AutoMapper
Implémenter le téléchargement de photos par glisser-déposer en s'intégrant dans une plate-forme cloud
Mettre en place une messagerie privée
Mettre en place le filtrage, le tri et la pagination des données
Afficher les notifications en Angular
Implémenter l'authentification à l'aide de jetons d'authentification JWT
Gestion des erreurs dans l'API et le SPA
Persistance des données à l'aide d'Entity Framework Core
Notifications en temps réel et présence à l'aide de SignalR
Ce cours a été entièrement réenregistré et réécrit pour .Net 5.0 et Angular 10.
Avez-vous appris les bases d’ASP.NET Core et Angular ? Vous ne savez pas où aller ? Ce cours devrait pouvoir vous aider. Dans ce cours, nous partons de rien et développons progressivement notre API et notre frontal Angular jusqu’à ce que nous ayons une application Web entièrement fonctionnelle que nous publions ensuite sur IIS et un serveur Linux.
Ce sont 2 des frameworks les plus populaires actuellement pour le ‘back-end’ (ASP.NET Core de Microsoft) et le ‘front-end’ (Angular de Google) et valent bien le temps d’apprendre.
Dans ce cours, nous construisons une application complète du début à la fin et chaque ligne de code est démontrée et expliquée.
Ce cours est à jour en septembre 2020 en utilisant ASP.NET 5.0 et Angular v10 et à mesure que ces frameworks évoluent, ce cours évoluera avec lui.
Lisez quelques-unes des excellentes critiques du cours :
Jim dit “Le meilleur cours absolu pour créer une API dans le noyau .Net et travailler avec Angular !”
Daniyal dit : “C’est un cours complet basé sur un projet du début à la fin avec de vrais expérience mondiale en utilisant des technologies actuellement demandées sur le marché. Les personnes intéressées par l’apprentissage des dernières technologies devraient envisager ce cours.”
Voici certaines des choses que vous apprendrez dans ce cours :
- Configuration de l’environnement de développement
- Création de l’API Web ASP.NET Core et de l’application Angular à l’aide de la CLI DotNet et de la CLI Angular
- Ajout d’une fonction de connexion et d’enregistrement côté client à notre application angulaire
- Ajout de composants tiers pour ajouter du piquant à l’application
- Ajout de routage à l’application Angular et sécurisation des routes.
- Utilisation d’Automapper dans ASP.NET Core
- Création une superbe interface utilisateur utilisant Bootstrap
- Ajout de la fonctionnalité de téléchargement de photos ainsi qu’une galerie sympa en Angular
- Formulaires de modèles angulaires et formulaires réactifs et validation
- Paging, tri et filtrage
- Ajout d’un système de messagerie privée à l’application
- Publication gratuite de l’application sur Heroku o f charge
- Utilisation de SignalR pour la présence en temps réel et la messagerie en direct entre les utilisateurs
- Beaucoup plus de choses aussi
Outils dont vous avez besoin pour ce cours
Dans ce cours, toutes les leçons sont illustrées à l’aide de Visual Studio Code, un logiciel gratuit (et fantastique) éditeur de code multiplateforme. Vous pouvez bien sûr utiliser n’importe quel éditeur de code et n’importe quel système d’exploitation que vous aimez… tant qu’il s’agit de Windows, Linux ou Mac
Ce cours est-il pour vous ?
Ce cours est très pratique, environ 90%+ des leçons vous impliqueront de coder avec moi sur ce projet. Si vous êtes le genre de personne qui tire le meilleur parti de l’apprentissage par la pratique, alors ce cours est fait pour vous.
Sur ce cours, nous allons créer un exemple d’application de rencontre , entièrement à partir de à l’aide de la CLI DotNet et de la CLI Angular pour nous aider à démarrer. Tout ce dont vous avez besoin pour commencer est un ordinateur avec votre système d’exploitation préféré et une passion pour apprendre à créer une application à l’aide d’ASP.NET Core et d’Angular.
Introduction
1
Introduction to the course
2
Setting up the developer environment
3
Getting help
4
Course assets and source code
Building a walking skeleton Part One - API
1
Introduction
2
Creating the .Net API Project using the dotnet CLI
3
Setting up VS code to work with C#
4
Getting to know the API project files
5
Creating our first Entity
6
Introduction to Entity Framework
7
Adding Entity Framework to our project
8
Adding a DbContext class
9
Creating the Connection string
10
Creating the database using Entity Framework Code first migrations
11
Adding a new API Controller
12
Making our code Asynchronous
13
Saving our code into Source control
14
Section 2 Summary
Building a walking skeleton Part Two - Angular
1
Introduction
2
Creating the Angular application
3
Running the angular project and reviewing the bootstrap of the app
4
Adding VS Code extensions to work with Angular
5
Making HTTP requests in Angular
6
Adding CORS support in the API
7
Displaying the fetched users in the browser
8
Adding bootstrap and font-awesome
9
Using HTTPS in angular - MAC
10
Using HTTPS in angular - WINDOWS
11
Saving into source control
12
Section 3 summary
Authentication basics
1
Introduction
2
Safe storage of passwords
3
Updating the user entity
4
Creating a base API controller
5
Creating an Account Controller with a register endpoint
6
Using the debugger
7
Using DTOs
8
Adding validation
9
Adding a login endpoint
10
JSON web tokens
11
Adding a token service
12
Adding the create token logic
13
Creating a User DTO and returning the token
14
Adding the authentication middleware
15
Adding extension methods
16
Section 4 summary
Client login and register
1
Introduction
2
Creating a nav bar
3
Introduction to Angular template forms
4
Introduction to Angular services
5
Injecting services into components
6
Using conditionals to show and remove content
7
Using the angular bootstrap components - dropdown
8
Introduction to observables
9
Persisting the login
10
Using the async pipe
11
Adding a home page
12
Adding a register form
13
Parent to child communication
14
Child to parent communication
15
Hooking up the register method to the service
16
Section 5 summary
Routing in Angular
1
Introduction
2
Creating some more components
3
Adding the nav links
4
Routing in code
5
Adding a toast service for notifications
6
Adding an Angular route guard
7
Adding a dummy route
8
Adding a new theme
9
Tidying up the app module by using a shared module
10
Section 6 summary
Error handling
1
Introduction
2
Creating an error controller for testing errors
3
Handling server errors
4
Exception handling middleware
5
Testing errors in the client
6
Adding an error interceptor
7
Validation errors
8
Handling not found
9
Adding a server error page
10
Section 7 summary
Extending the API
1
Introduction
2
Extending the user entity
3
Adding a DateTime extension to calculate age
4
Entity Framework relationships
5
Generating seed data
6
Seeding data part one
7
Seeding data part two
8
The repository pattern
9
Creating a repository
10
Updating the users controller
11
Adding a DTO for Members
12
Adding AutoMapper
13
Using AutoMapper
14
Configuring AutoMapper
15
Using AutoMapper queryable extensions
16
Section 8 summary
Building the User Interface
1
Introduction
2
Using TypeScript
3
Creating the member interface
4
Adding a member service
5
Retrieving the list of members
6
Creating member cards
7
Adding some style to the cards
8
Adding animated buttons
9
Using an interceptor to send the token
10
Routing to the detailed page
11
Styling the member detailed page
12
Styling the member detailed page part two
13
Adding a photo gallery
14
Section 9 summary
Updating resources
1
Introduction
2
Creating a member edit component
3
Creating the edit template form
4
Adding the update functionality
5
Adding a Can Deactivate route guard
6
Persisting the changes in the API
7
Updating the user in the client app
8
Adding loading indicators
9
Using the service to store state
10
Section 10 summary
Adding photo upload functionality
1
Introduction
2
Cloudinary Account
3
Configuring cloudinary in the API
4
Adding a photo service
5
Updating the users controller
6
Testing the photo upload
7
Using the Created At Route method
8
Adding a photo editor component
9
Adding a photo uploader
10
Adding a photo uploader part two
11
Setting the main photo in the API
12
Adding the main photo image to the nav bar
13
Setting the main photo in the client
14
Deleting photos - API
15
Deleting photos - Client
16
Section 11 summary
Reactive forms
1
Introduction
2
Reactive forms introduction
3
Client side validation
4
Adding custom validators
5
Validation feedback
6
Creating a reusable text input
7
Using the form builder service
8
Expanding the register form
9
Adding a reusable date input
10
Updating the API register method
11
Client side registration
12
Section 12 summary
Paging, Sorting and Filtering
1
Introduction
2
Adding a paged list class
3
Adding helper classes for pagination
4
Using the pagination classes
5
Setting up client pagination
6
Using the angular bootstrap pagination component
7
Adding filtering to the API
8
Adding additional filters
9
Cleaning up the member service
10
Adding filter buttons to the client
11
Adding sorting functionality
12
Adding an action filter
13
Making the Last Active action filter more optimal
14
Sorting on the client
15
Formatting dates
16
Restoring the caching for members
17
Restoring caching for member detailed
18
Remembering the filters for a user in the service
19
Section 13 summary
Adding the Like User feature
1
Introduction
2
Adding a likes entity
3
Adding a likes repository
4
Implementing the likes repository
5
Controller methods for the likes feature
6
Setting up the likes functions in the Angular app
7
Adding the likes component
8
Adding pagination for the likes
9
Paginating the likes on the client
10
Section 14 summary
Adding the messaging feature
1
Introduction
2
Setting up the entities for messaging
3
Setting up the message repository
4
Setting up the automapper profiles
5
Adding a message controller
6
Getting the messages from the Repo
7
Getting the message thread for 2 users
8
Setting up the Angular app for messaging
9
Designing the inbox
10
Adding the message thread in the client
11
Styling the message thread
12
Activating the message tab
13
Using query params
14
Using route resolvers
15
Sending messages
16
Fixing the photo weirdness
17
Deleting messages on the API
18
Deleting messages on the client
19
Section 15 summary
Identity and role management
1
Introduction
2
Setting up the entities
3
Configuring the DbContext
4
Configuring the startup class
5
Refactoring and adding a new migration
6
Updating the seed method
7
Updating the account controller
8
Adding roles to the app
9
Adding the roles to the JWT token
10
Adding policy based authorisation
11
Getting the users with roles
12
Editing user roles
13
Adding an admin component
14
Adding an admin guard
15
Adding a custom directive
16
Adding the edit roles component
17
Setting up modals
18
Editing roles in the client
19
Editing roles part two
20
Section 16 summary
SignalR
1
Introduction
2
Adding a presence hub
3
Authenticating to SignalR
4
Client side SignalR
5
Adding a presence tracker
6
Displaying online presence
7
Creating a message hub
8
Adding the send message method to the hub
9
Adding the hub connection to the message service
10
Refactoring the message components to use the hub
11
Sending messages via the hub
12
Tracking the message groups
13
Updating the message hub with group tracking
14
Dealing with UTC date formats
15
Notifying users when they receive a message
16
Optimizing the presence
17
Optimizing the messages
18
Section 17 summary
Unit of work pattern and finishing touches
1
Introduction
2
Implementing the unit of work
3
Refactoring the controllers to use the unit of work
4
Optimizing queries part one
5
Fixing UTC dates again
6
Optimizing queries part two
7
Adding a confirmation service to the angular app
8
Getting the data from the confirmation modal
9
Tidying up the member message component
10
Section 18 summary
11
Photo management challenge
Publishing
1
Introduction
2
Preparing the angular app and serving this from the API server
3
Adding a fallback controller
4
Creating an angular production build
5
Switching the DB Server to PostGres
6
Changing the DB Server in our app
7
Setting up Heroku
8
Deploying the app to Heroku
9
Using branches in git and connecting Heroku to GitHub
10
Merging changes and redeploying
11
End of course summary
Bonus - Legacy Content
1
Where to access the legacy content (previous version of the course)
Vous pouvez afficher et revoir les supports de cours indu00e9finiment, comme une chau00eene u00e0 la demande.
Absolumentu00a0! Si vous disposez d'une connexion Internet, les cours sur WeCours sont disponibles u00e0 tout moment sur n'importe quel appareil. Si vous n'avez pas de connexion Internet, certains instructeurs permettent u00e9galement u00e0 leurs u00e9tudiants de tu00e9lu00e9charger les cours. instructeur cependant, alors assurez-vous d'u00eatre de leur bon cu00f4tu00e9u00a0!
