Giter VIP home page Giter VIP logo

angular-heroes's Introduction

Angular Tour Of Heroes

TL:DR Ce projet est recommandé par la documentation d'Angular pour apprendre les bases de ce framework. L'application permet de :

  • consommer une liste de héros et l'afficher à l'utilisateur
  • afficher / modifier les détails d'un héros
  • permettre la navigation entre deux vues grâce au module de routing
  • accéder à un service de messagerie qui affiche les derniers héros sélectionnés

Les trucs que j'ai bien compris

  • utiliser la CLI pour créer des composants / la structure des composants avec un fichier ts qui définit la classe, un fichier html qui définit le template, un fichier de style et un fichier de test
  • les décorateurs qui permettent de spécifier de la metadata pour un composant/service.
  • les directives qui permettent de dynamiser le templating (ngIf, ngFor, ngModel).
  • la directive ngModel et son two-way binding pour lier une variable stateful à un input.
  • le hook onInit qui permet d'initialiser le composant après sa création.
  • l'utilisation de module dans le fichier AppModule, plus globalement, le découpage rigoureux de l'application.
  • La séparation des préoccupations entre les composants et les services : les composants sont responsables de l'affichage et de la logique de l'UI, les services sont responsables de la logique métier et de la communication avec les API.
  • Venant de l'univers de React, c'est un très grand changement de séparer les composants et les services. Avec React il faut connaître une librairie de création de formulaire, un client http, un router... Avec Angular tout immédiatement disponible sous forme de module.
  • Par exemple le data fetching semble bien plus cadré sur Angular : avec React on utilise un hook useEffect directement dans le composant, ensuite il faut connaitre un client http comme Axios, puis gérer les erreurs, ou bien apprendre une librairie qui fait tout ca comme react-query.
  • Avec Angular, on crée un service qui va gérer le data fetching, puis on injecte ce service dans le composant qui va l'utiliser.

Les trucs que j'ai moins bien compris

  • Il y a une grande utilisation qui est faite de certains design pattern : le singleton, l'observable, le décorateur.
  • La notion d'injection de dépendance.
  • L'idée d'injecter un service dans un service puis dans un composant.
  • la libraire RxJS et la gestion des observables.

angular-heroes's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.