Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • 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
    • 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
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • 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
        • 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
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • Angular est un framework
  • 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
  • A propos d'AngularJS

Was this helpful?

Pourquoi Angular ?

PreviousLe Guide Angular par WishtackNextECMAScript 6+

Last updated 5 years ago

Was this helpful?

Angular est un framework

Contrairement à d'autres alternatives intéressantes telles que , Angular n'est pas une librairie 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

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)

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.

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.

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

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 [] ).

React
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
https://developers.google.com/web/progressive-web-apps/
https://docs.nativescript.org/angular/start/introduction
https://universal.angular.io/
https://ionicframework.com/docs/
BrowserStack
SauceLabs
NgConf
Angular Connect
https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md