Le Guide Angular | Marmicode
  • Le Guide Angular par Marmicode
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Clavier mécanique
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
      • Talks
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • State Management
      • Quelques Liens
      • Talks
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • 📺Introduction au Test-Driven Development
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
      • Talks
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
    • Remplacement Dynamique de Composants
    • Lazy Loading without Router
    • Project Structure
    • SCAM Modules
    • Setup a Mock ReSTful API
  • Autres Ressources
  • Stay Tuned
    • 🎁-20% sur nos workshops avec le code GUIDEANGULAR
    • 🐦Suivez-moi !
    • 📺Cours Vidéo
    • 📬Newsletter
    • 📝Blog
  • Nos Services
    • Formation Angular
    • Atelier Unit-Testing Angular
    • Atelier Architecture Angular
    • Consultation à Distance & Code Review
  • Nos Guides
    • Guide Agile
    • Guide API ReST
    • Guide NodeJS
Propulsé par GitBook
Sur cette page
  • Angular est un framework
  • Point de vue de Vue.js concernant Angular
  • TypeScript
  • Single-Page App & Progressive Web App
  • Abstraction
  • Mobile
  • Separation of concerns
  • Ecosystème très riche et large communauté
  • Testabilité comme priorité
  • Architecture et maintenabilité
  • Performance
  • Angular Release Schedule & Long-Term Support
  • Guide de mise à jour
  • A propos d'AngularJS

Pourquoi Angular ?

PrécédentLe Guide Angular par MarmicodeSuivantECMAScript 6+

Dernière mise à jour il y a 3 ans

Angular est un framework

Contrairement à d'autres alternatives intéressantes telles que , Angular n'est pas une "library" mais bien un framework avec une approche "batteries included".

Angular fournit donc nativement tout le nécessaire pour produire une application entière avec une configuration standard :

  • Configuration de build et d'optimisation complète.

  • Module d'animations.

  • Module de "routing".

  • Module de formulaires.

  • Debug.

  • Tests unitaires et e2e.

  • ...

Il n'est donc pas nécessaire d'hésiter et de débattre le choix des modules de routing, de formulaires etc...

Avec Angular, la majorité des applications ont la même structure de projet et la même "stack" d'outils. Les applications Angular sont donc homogènes et vous tomberez donc plus rarement sur des "cas particuliers".

Dans la plupart des cas, vous éviterez les problèmes de compatibilité de dépendances en laissant l'équipe Angular s'en charger pour vous.

En contrepartie, voici un exemple de mise en place d'un "preprocessor" sass sur une app React:

Point de vue de Vue.js concernant Angular

TypeScript

Angular profite de la rigueur et flexibilité du langage TypeScript.

Single-Page App & Progressive Web App

Angular fournit nativement le nécessaire pour produire des Progressive Web Apps.

On peut donc rapidement produire des applications webs donnant l'illusion d'une application native tout en restant résilient aux problèmes de connexion.

L'idée est de voir le web comme des applications interreliées plutôt que des sites web contenant des pages.

Abstraction

Angular fournit des couches d'abstraction à tous les niveaux. Cela évite par exemple de manipuler directement le DOM.

Mobile

Par défaut, Angular repose sur la couche PlatformBrowser pour communiquer avec le DOM.

D'autres alternatives de cette couche existent pour utiliser Angular dans d'autres contextes :

Separation of concerns

Angular permet de mieux séparer les responsabilités avec une approche MVC (Model / View / Controller) et l'injection de dépendances.

Ecosystème très riche et large communauté

Exploitation des 5 ans d'existence d'AngularJS et des retours de la communauté pour rectifier les erreurs de conception, faciliter le développement et gagner en performance et stabilité.

Testabilité comme priorité

Angular fournit tous les outils nécessaires pour faciliter l'implémentation des tests unitaires et de tests e2e.

  • Configuration clé en main des outils de test, du reporting, du coverage etc...

  • Mocks des modules http et routing.

Architecture et maintenabilité

AngularJS était très flexible. Sans bonnes pratiques, les applications perdent très rapidement en stabilité et en maintenabilité.

Angular impose une approche mieux structurée à base de composants et une façon plus clair d'échanger les données entre les composants.

Angular encourage une implémentation générique ("framework agnostic") permettant de réutiliser plus facilement du code Angular dans d'autres contextes.

Performance

Angular est un framework très déclaratif. Cela peut sembler fastidieux au départ mais cette approche permet à Angular de mieux comprendre le fonctionnement de l'application avant son exécution permettant alors d'optimiser la construction de l'application, par exemple en éliminant automatiquement le code inutile.

Au fil des mises à jour d'Angular, vous obtiendrez donc des applications de plus en plus performantes sans changer votre code ou à la rigueur en éliminant les usages dépréciés.

Angular Release Schedule & Long-Term Support

  • Angular 2 : Septembre 2016

  • Angular 4 : Mars 2017

  • Angular 5 : Novembre 2017

  • Angular 6 : 3 mai 2018 (Angular CLI, Angular Material, Flex Layout etc... synchronisent leurs versions également)

  • Angular 7 : 18 octobre 2018

  • Angular 8 : 28 mai 2019

  • Angular 9 : 2 février 2020

  • Angular 10 : 24 juin 2020

  • Angular 11 : 11-11-2020

  • Angular 12 : 12 mai 2021

  • Angular 13 : 4 novemre 2021

Chaque version est maintenue pendant 18 mois et reste compatible avec les fonctionnalités de la version précédente qui deviennent dépréciées.

Guide de mise à jour

A propos d'AngularJS

AngularJS correspond à la version 1.x Il ne faut pas confondre AngularJS et Angular. Bien que le numéro de version 2.x semblerait indiquer une continuité avec la version 1.x de Angular, il s'agit d'une refonte intégrale du Framework.

La dernière version de AngularJS, AngularJS 1.7, la dernière version de AngularJS est sortie en Mai 2018 et rentre en Long-Term Support (LTS) à partir du 1er Juillet 2018 jusqu'au 30 juin 2021.

Heureusement, les choses ont évolué depuis grâce à & react-scripts.

Source:

PlatformNativeScript : Utilisation de Native Script pour faire le bridge entre le code Angular et le code natif Android ou IOS.

PlatformServer : Pour générer le rendu HTML côté serveur (Server Rendering).

Ionic qui permet de produire des applications natives contenant des "web views" Angular

Terminal

Protractor : surcouche de Selenium adaptée pour faciliter les tests end-to-end Angular avec intégration native de la parallélisation et d'outils tels que et .

L'équipe Angular s'engage à publier une nouvelle version majeure tous les 6 mois (correspondant aux deux grandes conférences mondiales en Mai [], et en Novembre [] ).

create-react-app
https://vuejs.org/v2/guide/comparison.html#Flexibility
https://docs.nativescript.org/angular/start/introduction
https://universal.angular.io/
https://ionicframework.com/docs/
https://medium.com/angular-in-depth/angular-platforms-in-depth-part-3-rendering-angular-applications-in-terminal-117e4da9c0cc
BrowserStack
SauceLabs
NgConf
Angular Connect
https://angular.io/guide/releases
https://update.angular.io/
React
LogoProgressive Web Appsweb.dev
LogoAngular Platforms in depth. Part 3. Rendering Angular applications in TerminalMedium
Angular Terminal
LogoAngular Update Guide
source: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
Opinionated Frameworks vs. Flexibility
Angular Platform
How angular loses weight