Angular

Présentation

• Développeur web freelance depuis 10 ans

• http://www.boxydev.com

• Expérience en agence web, E-Commerce (annonceur)

• Formation Informatique et Autodidacte

• Formateur et fan des OSS, contributeur à mes heures perdues

• Solutions phares : Wordpress, Symfony, Magento, Prestashop, Angular

• Langages : PHP, MySQL, HTML, CSS, JS

• Outils : Git, Docker, Vagrant, Trello
• Stack: ArchLinux, Gentoo, Mac OS (Unix addict)

Qu'est-ce qu'Angular ?

• Angular ? AngularJS 2 ? Angular 17 ?
• https://github.com/angular/quickstart
• Angular !== AngularJS. Deux projets avec une vision et un concept différents.
• Framework JavaScript permettant de créer facilement des SPA (Single Page Application), des applications web réactives, et mêmes des applications mobiles !

Caractéristiques d'Angular

• Permet de créer un site web complet. Routeur, Formulaires, Requêtes HTTP (Ajax), Internationalisation
• Possibilité de développer avec JavaScript (ES5, ES6) mais surtout avec TypeScript ou Dart (Fort typage)
• Performant, beaucoup plus performant qu'AngularJS

Composants

• Tout est composant avec Angular
• Chaque composant est autonome
• Code encore plus modulaire grâce aux modules
• Très forte réutilisabilité

App

Pizzas

Pizza

Services & composants

• Un composant s'occupe d'une logique et d'afficher la vue, il peut utiliser un service
• Un service a également un métier, celui d'avoir une logique et par exemple de récupérer des données

Schema

Plateforme > Langage

• Angular peut être vu comme une plateforme (Tooling)
• Angular.io (https://angular.io/)
• Angular Universal (https://universal.angular.io/) -> Rendu serveur
• Angular Dev Tools
• Angular CLI
• Ionic, Electron, Native Script...

Comment démarrer ?

• Formation
• NodeJS et NPM
• ES6/ES2015
• TypeScript

NodeJS et NPM

• NodeJS est une plateforme basée sur le moteur V8 JavaScript.
• Permet d'écrire du JavaScript côté serveur au même titre que PHP, Ruby, etc...
• Concept de séparation du code en module
• Conséquence : NPM -> Gestionnaire de paquet/modules pour Node

Nouveautés ES6

• let au lieu de var (éviter le "hoisting")
• const pour les constantes
• objet avec clé et valeur identique
• Affectation déstructurées ({name, age} = {name: "Matthieu", age: 25})
• Rest Operator ... (Arguments infinis)
• for...of : Valeur et non index
• Les classes
• Promise
• Arrow functions

TypeScript

• Créé par Microsoft et soutenu par Google
• Microsoft ? Oui le BON Microsoft qui fait de l'open source avec TypeScript et VSC
• Typage, interface, injection de dépendances
• Décorateurs

Apprendre à apprendre