Académie Angular Ottawa
Académie Angular

La Formation Angular #1 à Ottawa!

SE FORMER À Angular EN FRANÇAIS MAINTENANT!

Formation live avec instructeur, en classe à Ottawa ou virtuelle, soyez prêt pour Angular 17, TypeScript et Signals!


Objectifs

Apprenez comment coder une app complète avec Angular, TypeScript et Signals à Ottawa, avec un expert de l'industrie.

Ateliers

Apportez votre ordinateur portable! Une partie importante de la formation est consacrée à la création d'applications et expérimentations en temps réel (de style bootcamp).

Canada

Canadien francophone!

Si vous êtes au Canada, nous voulons vous rendre visite. Nous donnons la formation Angular à Ottawa et Gatineau, mais aussi à Québec, Montréal, Toronto, Vancouver, ...

Préalables

Vous devriez avoir une expérience significative dans le développement d'applications Web avec HTML5 et JavaScript. Aucune expérience préalable avec AngularJS est nécessaire.

Formations publiques à distance


★★★★★

Score de satisfaction: 5/5

Basé sur 392 notes pour les 6 derniers mois.

Assistez à nos formations à distance !

Contactez nous pour organiser une formation corporative en classe virtuelle.

Si vous ne voyez aucune classes ci-dessus, le widget doit être bloqué par votre navigateur : contactez-nous!
Plus de cours disponibles en anglais.
Cours et horaire typique
Formation Fondamentaux 2 jours 9:00am à 4:00pm
Formation Avancée 2 jours 9:00am à 4:00pm
Tester Angular 0.5 jour 8:30am à 12:00pm
Atelier RxJS 1 jour 9:00am à 4:00pm
Si vous avez un groupe d'environ 6 personnes ou plus, nous vous recommandons une formation privée en entreprise.
Vous pourrez choisir la date qui vous convient et même demander à ajuster le contenu gratuitement.
Contactez-nous

Académie Angular est un centre de formation autorisé Emploi-Québec, notre numéro d'agrément est : 0056463.

Me tenir informé des nouveaux cours et dates!


Nous ne vous contacterons que pour nos ateliers Angular!
Vous pouvez facilement vous désabonner n'importe quand :-)

Organisez des cours sur mesure pour vos groupes en entreprise!
Nous vous proposons d'adapter le contenu en fonction des préférences et des attentes de votre équipe, sans aucun frais additionnel.

2 jours pour bien débuter


Formation Fondamentaux Angular
  • 🔥 2 jours de formation pratique intensive
  • 👨‍💼 Cours en ligne LIVE animé par un instructeur!
  • 🎓 Maîtrisez les concepts Angular pour créer une application d'affaire riche
  • 💼 Disponible en entreprise pour groupes privés
  • >> Voir les dates

Cette formation technique couvre tous les concepts de base et vous guide pour bâtir une application Angular complète, y compris le rôle de TypeScript, le setup et configuration d'un projet, la structure du code, l'utilisation de la CLI Angular, la liaison de données, la connexion HTTP avec le backend (API REST) grâce à des services, les observables de RxJS et le routage. L’Académie Angular est le point de départ idéal pour comprendre et utiliser Angular avec TypeScript efficacement dès maintenant. Vous aurez la chance de découvrir de multitudes démos et activités de type "coder ensemble" dont le code sera fourni tout au long de l'atelier.

Jour 1

  • Fondamentaux TypeScript
    • Le compilateur TypeScript
    • Annotations de types
    • Classes et Interfaces
    • Génériques
  • Setup et Tooling
  • Bien démarrer avec la CLI Angular
    • Commandes populaires et schematics
  • Introduction à Angular
  • Structure d'une application
  • Modèle de Composant
    • Décorateurs, Syntaxe des templates, Data Binding, Directives, Événements, Propriétés Input et Output, Pipes, Encapsulation
  • Services et Injection de dépendence
  • Communication asynchrone avec le backend (API REST)
    • Le service HttpClient
    • Une première requête asynchrone GET
    • Consommer une réponse en Observable
    • Fonction Subscribe()
    • Le pipe async
    • Fonction Pipe()
    • Gérer les erreurs dans le code RxJS
  • Implémenter un cache local avec ShareReplay()
  • Déboguage d’une application
    • Configurer le débuggeur et les breakpoints
    • L'extension Angular DevTools
  • Implémenter pagination, tri et filtrage dans une liste

Jour 2

  • Déploiement
    • Optimiser pour la production
    • Commandes ng build et ng deploy
  • Navigation et Routage
    • Utiliser le routeur
    • Directive routerLink
    • Le router-outlet
    • Service Router
    • Routes imbriquées
    • Paramètres de route
    • Gérer les erreurs du routeur
  • Lazy Loading
  • Formulaires et Validation
    • Créer des formulaires
    • API de validation
    • Requêtes Http POST
  • Utiliser Http pour mettre à jour et supprimer des données du serveur
    • Requêtes Http PUT et DELETE
  • Authentification et sécurité
    • Ecran de Login
    • Service d’authentification
    • Sécurité avec JSON Web Tokens (JWT)
    • Http Intercept0rs
    • Protéger l’accès à une route avec les Guards
  • Les meilleures pratiques (Linting, Style Guide, …)
  • QnA final
Remarque: nous pouvons également travailler avec vous pour personnaliser le contenu de la formation dans votre entreprise (sur site ou en ligne) en fonction des préférences et des attentes de votre équipe. Les sujets optionnels peuvent être: Bootstrap, Material Design, Firebase, Tests unitaires, Ionic, NgRx, Application Web Progressive (PWA), Internationalisation et localisation, Server-side rendering, ...

CSS essentials for Angular developers! (english only)


Angular Styling Workshop
  • 🎓 Learn ALL you need to know about CSS Styling in Angular!
  • 🔥 13 hours of technical hands-on training
  • 👨‍💼 Instructor-led LIVE online course!
  • 🧪 Theory phases alternated with live coding and exercises
  • 🙋 Ask questions and discuss with the instructor
  • >> View schedules

Note: Cette formation se donne en Anglais uniquement

CSS essentials for Angular developers!

Part 1: CSS Tools

  • Dev Tools
  • IDE
  • Linter
  • Frontend Frameworks

Part 2: CSS Fundamentals

  • Including Styles
  • Specificity
  • Combinators
  • Classes vs. IDs
  • Not important

Part 3: Essential CSS

  • Box Model
  • Box Sizing
  • Size & Units
  • Text & Fonts
  • Forms

Part 4: Advanced CSS

  • Custom Properties
  • Display
  • Position
  • Flexbox
  • Grid

Part 5: Responsive CSS

  • Media Queries
  • Mobile First

Part 6: Modern CSS

  • Transform
  • Transitions
  • SCSS
    • Introduction & Usage
    • Nesting Selectors
    • Variables & Mixins
  • Tailwind
    • Introduction & Usage
    • Fundamentals

Part 7: Styling in Angular

  • (S)CSS Architecture
  • View Encapsulation
  • Angular Transitions
  • Component Frameworks
  • Design Systems

2 jours de contenu avancé!


Formation Angular Avancé
  • 🔥 2 jours de formation pratique intensive
  • 👨‍💼 Cours en ligne LIVE animé par un instructeur!
  • 🎓 Maîtrisez les concepts Angular avancés pour créer une application complexe centrée sur les données
  • 💼 Disponible en entreprise pour groupes privés
  • >> Voir les dates

Cet atelier intense animé par un instructeur couvre des sujets avancés destinés aux personnes déjà familiarisées avec Angular et TypeScript! Cette formation très orientée sur la pratique vous donne la chance de travailler sur une application Angular d'entreprise avec beaucoup d'interactivité avec l'instructeur dans la salle.

Jour 1

  • Routage Avancé
    • Chargement à la demande de module (Lazy Loading)
    • Préchargement de module et stratégies personnalisées
    • Diagnostic du routeur avec les traces
    • Routes auxiliaires (multi router-outlet)
    • Transitions entre routes (Animations)
    • Sécuriser une route avec les gardes
    • Route resolver (pré-chargement de données avant navigation)
    • Service de metadata pour le SEO
    • Événements du routeur
  • Gestion sophistiquée des erreurs
    • Global Error Handler
    • Gérer les erreurs: applicative, navigation, http
    • Service d’erreurs, mode offline et log vers le serveur
    • Http Errors Intercept0r: centralisation des erreurs de requêtes Http et retry automatique en cas d'échec
    • Composant et service de notification: expose un observable de messages et toast de notification
  • Optimiser les performances
    • Exploration de différentes techniques pour améliorer vos applications et les faire fonctionner plus rapidement:
    • Bundling, Minification, dead code elimination
    • Chargement différé avec @defer
    • Performance du Data Binding avec OnPush
    • Profiling des performances au runtime
    • Web Workers
    • Virtual Scrolling
    • Améliorer ngFor avec trackBy
    • Cache avec Service Worker, Progressive Web App (PWA)

Jour 2

  • RxJS avancé
    • RxJS et Programmation Réactive
    • Composition de données avec les Observables
    • Les opérateurs les plus importants
    • Maîtriser les différents Subjects (BehaviorSubject, ReplaySubject)
    • Introduction aux opérateurs de "Higher-order Mapping" (switchMap, flatMap, ...)
  • Introduction aux Signals
    • Signals API
    • Computed Signal
    • Effects
    • Interop avec RxJS
  • Modern State Management avec Redux et NgRx
    • Pourquoi Redux ?
    • Introduction à la plateforme NgRx
    • Comprendre et mettre en place NgRx Store
    • Composants Smart/Dumb
    • Immutabilité et performance
    • Gestion des erreurs
    • Ajouter le routeur dans le store
    • Actions asynchrones avec NgRx Effects
    • Collections avec NgRx Entity
    • Débogage live et "time travelling" avec NgRx DevTools
  • Server-side rendering
    • Amélioration des performances et du SEO
    • Hydration
    • Génération de site statique
  • QnA final

Tester Angular comme un pro!


Tester Angular
  • 🔥 3.5 heures de formation technique intensive
  • 👨‍💼 Cours en ligne LIVE animé par un instructeur!
  • 🎓 Apprenez à écrire des tests unitaires
  • 💼 Disponible en entreprise pour groupes privés
  • >> Voir les dates

Apprenez à concevoir les tests unitaires pour vos projets Angular! Tester les services, composants, formulaires, le code asynchrone, etc.

Sujets abordés

  • Introduction aux tests Angular
  • Setup, outils et technologies
  • Tests Unitaires
    • Organisation et Conventions
    • Jasmine
      • Les "Matchers" disponibles
      • "Setup" et "Teardown"
      • Tests "Disabled" et "Focused"
    • Karma
    • Les paramètres en ligne de commande
    • Tester les Pipes
    • Tester les Composants
    • Tester la Détection de Changement
    • Tester les Services
    • Tester le Code Asynchrone
    • Tester Http
    • Tester les Formulaires
    • Tester les Routes
    • Angular Test Bed
    • Run your tests in a headless browser for automated tests environments (Continuous Integration)
    • Couverture de tests et vérifications du pourcentage atteint
    • Mocks & Spies
      • Mock avec fake class
      • Mock avec spy
      • La librairie Auto Spies
  • QnA

1 jour pour maîtriser RxJS!


Formation Angular RxJS Workshop
  • 🔥 6 heures de formation pratique intensive
  • 👨‍💼 Cours en ligne LIVE animé par un instructeur!
  • 🎓 Maîtrisez RxJS pour créer une application Angular complexe centrée sur les données
  • 💼 Disponible en entreprise pour groupes privés
  • >> Voir les dates

"Pour maîtriser Angular, vous devez maîtriser RxJS". Mais... RxJS a une courbe d'apprentissage plutôt difficile, et nous avons vu tellement d'équipes avoir du mal à l'utiliser correctement dans Angular. Cette formation propose une approche très pratique pour enfin comprendre la programmation réactive et vous permettre d'utiliser RxJS et les Observables dans vos projets Angular à travers de nombreux ateliers pratiques. Nous vous montrerons comment implémenter la composition de données basé sur les Observables afin d'avoir une app complètement réactive!

Matin

  • RxJS et Programmation Réactive
  • Composition de données avec des Observables
  • Explorer les opérateurs RxJS populaires et les implémenter dans une réelle application d'affaire Angular
    • map
    • tap
    • filter
    • shareReplay
    • startWith
    • debounceTime
    • distinctUntilChanged
    • combineLatest
    • fromEvent
    • exhaustMap
    • ... et plus!
  • Déboguer RxJS

Après midi

  • Utiliser les Subjects RxJS
    • Subject
    • Behavior Subject
    • Replay Subject
    • Créer un service de données Observable basé sur un RxJs Subject
  • Gestion des erreurs dans le code RxJS
    • Opérateur catchError
    • Utiliser un Pipe personnalisé dans le template des composants
    • Ajout d'un HttpIntercept0r pour les requêtes Http en échec
  • Créer un opérateur personnalisé
  • Comparaison et meilleur usage des opérateurs "Higher order mapping"
    • SwitchMap, ConcatMap, MergeMap
  • Les meilleures pratiques
  • Pièges courants à éviter
  • QnA Final

Deep dive into Angular Performance Optimization! (english only)


Angular Performance Optimization Workshop
  • 🎓 Learn ALL you need to know about optimizing Angular performance!
  • 🔥 13 hours of technical hands-on training
  • 👨‍💼 Instructor-led LIVE online course!
  • 🧪 Theory phases alternated with live coding and exercises
  • 🙋 Ask questions and discuss with the instructor
  • >> View schedules

Note: Cette formation se donne en Anglais uniquement

Develop fast & successful Angular solutions!

Part 1: Professional Performance Audit & Tools

  • Performance Audit Framework
  • Performance Audit Tools
  • Google PageSpeed & Google Chrome Lighthouse
  • WebPageTest & Perfume.js
  • Google Chrome DevTools & Angular DevTools
  • Source Map Explorer & Webpack Bundle Analyzer
  • Import Graph Visualizer

PART 2: Optimizing load times for Angular apps

  • Web Performance Best Practices
  • NgOptimizedImage Directive
  • Build Optimization & Tree Shaking
  • 3rd party libs / CSS frameworks
  • Lazy Loading & Defer
  • Server Side Rendering & Static Site Generation
  • Hydration in Angular 16+
  • Caching Best Practices

PART 3: Optimizing Angular runtime performance

  • Angular ChangeDetection Optimization
  • Change Detection und Signals
  • ChangeDetectorRef Usage
  • Angular Templates: Pipes, Flags
  • @for track & Virtual Scrolling
  • API Communication Best Practices

BONUS

  • Angular Resolver & Alternatives
  • Smart vs Dumb Components
  • RxJS & State Management (NgRx)
  • Web Workers & Service Workers
  • Scheduling

Architectures for Enterprise Applications (english only)


Angular Architecture Workshop
  • 🎓 Design large-scale maintainable enterprise Angular applications
  • 🔥 18 hours of intensive hands-on training
  • 👨‍💼 Instructor-led LIVE online course!
  • 🧪 Theory phases alternated with live coding and exercises
  • 🙋 Ask questions and discuss with the instructors
  • >> View schedules

Note: Cette formation se donne en Anglais uniquement

In this interactive workshop, you will learn from Manfred Steyer (Angular GDE and Trusted Collaborator in the Angular team) and/or one of his expert co-trainer, how large-scale enterprise Angular applications can be designed and developed. The exercises will gradually result in an application that you can use for your own projects at the end of the workshop.
Bonus: Now covers the latest Angular features, such as Reactivity with Signals, Lightweight architectures with standalone components, Functional guards, resolvers.

Jour 1 & 2

  • Structure for Large Applications: Monorepos, Nx and Strategic Design
    • Plan architectures with Domain Driven Design (DDD)
    • CLI workspaces and monorepos with Nx (Nrwl Extensions)
    • Lightweight architectures with standalone components and APIs
    • Develop and distribute reusable npm packages
    • Categorization for libraries, modules and components
    • Enforce architecture constraints with access restrictions
    • Build performance: Incremental builds and tests with the Build Cache
    • Integration into the CI process
    • Customizable libraries with advanced DI patterns and content projection
    • The open/close principle in Angular with its own standalone APIs
  • Scalable architectures: micro Frontends with Module Federation and Angular Elements
    • From strategic design to micro frontends
    • Pros and cons of Micro Frontends
    • Monorepos vs. multiple repos
    • Leverage Webpack Module Federation to load separately compiled and deployed micro frontends
    • Dynamic Module Federation
    • Module Federation and Standalone Components
    • Sharing dependencies
    • Dealing with different versions and version mismatches
    • Communication between Micro Frontends
    • Cross-framework development with Angular Elements and Web Components
  • Modern solutions with 🚥 Signals
    • Concepts and Building Blocks: Signals, Computed and Effects
    • Reactivity with Signals
    • Signals and change detection
    • Interop with RxJS
  • State management with the new NGRX Signal Store
    • The state layer and DDD
    • The different operating modes of the Signal Store
    • Selectors and View Models
    • Normalized state
    • Dealing with side effects
    • Managing entities
    • Custom features for recurring requirements
    • External Updaters: Separating intention and execution
    • Signal Store and lazy loading
    • Interop with RxJS
    • Life Cycle Hooks
    • Facades as the linchpin
    • Differences and similarities to Redux

Jour 3 & 4

  • State Management with the Classic NGRX Store and Redux
    • The Redux pattern
    • Actions and Reducers
    • Selectors
    • Effects
    • @ngrx/entities
    • The classic NGRX Store and 🚥 Signals
  • Reactive architectures with RxJS
    • Reactive thinking and reactive design
    • Chaining/piping of operators
    • Combination operators
    • Higher order observables
    • Implicit and Explicit Closing
    • Cold and hot observables, and multicasting
    • Using subjects
    • Error handling
    • Debugging
  • Bonus: Performance tuning
    • Lazy loading with and without a router
    • Data binding performance with OnPush, RxJS and Signals
    • AOT and Tree Shaking
    • Analyze bundles
    • Build performance with the build cache and incremental compilation
  • Bonus: modern security architectures and single sign-on
    • Connect existing identity solutions such as Active Directory
    • Social login (login with Facebook, etc.)
    • OAuth 2 as well as 2.1 and OpenId Connect
    • JSON Web Tokens (JWT)
    • Token refresh
    • Single sign out
    • Current recommendations of the OAuth 2 Working Group and consequences
    • Tokens in the browser vs. security gateways (backend for frontends)

Deep dive into Angular Testing! (english only)


Advanced Angular Testing Workshop
  • 🎓 Learn ALL you need to know about testing in Angular!
  • 🔥 13 hours of technical hands-on training
  • 👨‍💼 Instructor-led LIVE online course!
  • 🧪 Theory phases alternated with live coding and exercises
  • 🙋 Ask questions and discuss with the instructor
  • >> View schedules

Note: Cette formation se donne en Anglais uniquement

Quality assurance with modern tools: Playwright, Jest, and Storybook.

Part 1: End-to-End Tests with Playwright

  • Playwright Basics
    • Technological Approach: CDP vs. Webdriver
    • Inside-Browser vs. Outside-Browser Testing
    • Playwright compared to Webdriver and Cypress
    • Installation & Setup
    • Boosting Execution with Parallelisation
    • Code Generator for a Quick Start
    • Debugging Capabilities in VSCode
    • Improve your Productivity with the UI Mode
    • Analyse and find Bugs with the Trace Viewer
    • Basic Selecting with page.locator
    • Different Selector Engines
    • Chained, Nested and Relative Selecting
    • data-testid vs. a11y-based Selectors
    • Actions
    • Verify with Web Assertions
  • Playwright Advanced
    • Miscellaneous: test steps, soft assertions, sequential mode
    • Clean Code with Page Objects
    • Playwrights “Dependency Injection”: Test Fixtures
    • Controlling the Network with page.route, page.on(‘request’), and request
    • Sharing localStorage and Cookies with Session Storage
    • Global Setup and TearDown with Project Dependencies

PART 2: Unit Tests

  • Jest
    • Jest vs Jasmine
    • Jest setup
  • Asynchrony
    • fakeAsync vs waitForAsync
    • Mocking: jest.mock, jest.fn, jest.spyOn
    • Testing with the inject() function or TestBed
  • Testing reactivity
    • RxJS Marbles for pipe operators
    • Testing NgRx

PART 3: Component & Integration Tests

  • Basics
    • TestBed and Dependency Injection
    • Differences between Standalone and NgModule-based Tests
    • Mocking of components, directives and pipes with ng-mocks
    • Pros / Cons of HttpTestingController
    • RouterTestingHarness
  • Component Tests
    • Mounting components
    • Wrapper components
    • Setting @@Input properties
    • Direct access to Angular’s DI
  • “Fallback” Technologies
    • Angular Harnesses
    • Spectator
    • Testing library

PART 4: Test strategies; How to test correctly?

  • Two contrasting approaches: London & Detroit
  • Testing strategies: When should I use what test type?
  • TDD in the frontend?
  • Testing Trophy vs. Testing Pyramid
  • Testable Architecture

Bonus: Visual Regression with Storybook

  • Screenshottests with Playwright
  • Storybook
  • Visual Regression & CI

Programme de rabais exclusif!


Nous avons plusieurs options de rabais dont vous pourriez bénéficier.

Contactez-nous


Pour plus d'informations ou pour organiser votre formation en entreprise.