Apprendre à programmer avec le framework Angular [Tutoriel]

**wkoza** · 06/12/2016, 20h05

Bonjour à tous,

Je vous propose une série de tutoriels pour vous apprendre à programmer avec le framework Angular.

Dans cette première partie, nous allons apprendre à créer et utiliser un Component.

Le Component est issu de la mouvance « Web components » comme vous pouvez vous en douter. Les Components reposent sur un certain nombre de règles :

Un component ne gère que sa vue et ses données. Il n'a pas à modifier les données ou le DOM qui est en dehors de son scope.

Chaque component a son propre cycle de vie.

Les components communiquent entre eux via les évènements, il n'y a pas d'interactions directes.

Bonne lecture

Retrouvez les meilleurs cours et tutoriels pour apprendre le JavaScript.

**Marco46** · 07/12/2016, 11h38

C'est un peu court mais c'est clair.

Tu devrais préciser que quand tu parles de AngularJS tu parles en fait de angular 1.x et quand tu parles de angular tu parles en fait de angular 2. Ca ne sera pas forcément implicite pour les lecteurs vu que ça s'adresse à "Tout public".

J'ai compris qu'il s'agissait d'un tuto sur angular 2 à la lecture de la dernière ligne de l'intro du chapitre II. Et encore il y a une confusion possible parce que les components existent également en angular 1.x, angular 2 n'introduit donc pas ce concept. Il est au coeur de angular 1.x depuis le début puisque les directives sont en réalité des components qui ne disent pas leur nom.

**wkoza** · 07/12/2016, 11h57

Le framework se nomme Angular et non Angular 2. De plus j'ai indiqué :

Dans la suite des tutoriels, nous ne parlons plus d'Angular 2, mais d'Angular. La version d'Angular devrait changer deux fois par an et suivre le « semantic versionning ». Il ne faut donc par confondre AngularJS (le premier) et Angular (anciennement Angular 2).

Pour info, en mars 2017, nous passerons à Angular 3

On ne peux pas dire qu'AngularJS introduit ce concept, il a toujours été question de Directive. Le component AngularJS est/était juste là pour aider à migrer vers le fwk Angular. On ne peut pas dire qu'AnguarJS a apporté les web component :

Les dernières releases d'AngularJS ont introduit ce concept dans le framework et cela n'a finalement pas été trop dur puisqu'un component n'est autre qu'un fragment HTML et un controller pour interagir avec. Mais ce « Component » est loin d'être aussi poussé que chez son successeur. Point de shadow DOM à l'horizon.

**dukoid** · 07/12/2016, 15h41

c'est un bon début, j'espère qu'il y aura des suites...

**wkoza** · 07/12/2016, 19h57

Bonjour à tous,

Dans ce tutoriel, nous allons apprendre à utiliser le client Angular-CLI qui est d'une grande aide pour commencer un projet.

Google nous propose un outil clé en main pour réaliser les tâches de développement les plus courantes. Ce projet est basé sur le projet Open Source ember CLI, qui a maintenant plus de trois ans. Grâce à notre Angular Cli, il est possible de :

créer une application from scratch via un scaffolding ;

Générer des squelettes des composants type Components… ;

Builder un projet ;

Lancer des tests de type « End-to-End » ou « unitaire » ;

Proxyfier le back end ;

Et beaucoup d'autres choses…

Bonne lecture.

Retrouvez les meilleurs cours et tutoriels pour apprendre Javascript.

**ABCIWEB** · 07/12/2016, 21h05

Bonne initiative, c'est bien expliqué, continues comme ça

**Doksuri** · 08/12/2016, 08h56

cette bande annonce donne envie de voire la suite

simple, clair et concis

**Jarodd** · 12/12/2016, 14h53

Bonjour,

Merci pour ce tuto, mais je trouve qu'il n'est pas très clair.
Par exemple, on ne sait pas comment nommer le fichier typescript (ni s'il faut le mettre dans un répertoire précis). Idem pour index.html, avec le code indiqué on ne charge jamais le fichier js, donc on n'a jamais le résultat attendu (avec le logo), on a juste "Loading...".

J'ai du aller sur le quickstart de la doc officielle pour comprendre ce qu'il me manquait.

**wkoza** · 12/12/2016, 16h25

Bonjour Jarodd,

Ce premier tuto n'est pas fait pour être testé. C'est juste une mise en bouche. Effectivement, il est compliqué de vouloir le tester

.
Les tutos suivant permettent de s'exercer grace notamment à angular-cli. Le premier tuto avec des exercices doit arrivé en ligne d'ici la fin de semaine.

A bientôt

**Jarodd** · 12/12/2016, 16h35

Ok. Moi quand je vois du code j'essaye de le tester, c'est plus fort que moi

Vivement la suite alors !

**wkoza** · 13/12/2016, 22h31

Bonjour,

Voici un premier tutoriel avec mise en œuvre dans cette série. Dans ce cours nous allons apprendre à manipuler vos premiers components.

Suite au tutoriel présentant l'outil en ligne de commande Angular-CLI, vous allez apprendre dans ce cours à manipuler vos premiers components et entrevoir les liens qui peuvent exister entre eux.

Bonne lecture et bon codage !

Retrouvez les meilleurs cours et tutoriels pour apprendre le Javascript.

**ascito** · 14/12/2016, 02h55

pourquoi les "`"?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';
 
@Component({
    selector: 'mon-premier-component',
    template: `
        <h2>Mon premier Component</h2>
        <img src="http://gabarit.developpez.be/images/logo.png" />
    `
})
export class MonPremierComponent  {
}

**Watilin** · 14/12/2016, 12h54

Envoyé par ascito

pourquoi les "`"?

Parce que ES6 : https://developer.mozilla.org/fr/doc...9raux_gabarits
C’est plus pratique pour les sauts de ligne. Les chaînes traditionnelles ne les supportent pas (SyntaxError: unterminated string literal) et on est obligé de recourir à des astuces moches :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
"Panda\
Poney\
Paprika"

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
"Panda\n" +
"Poney\n" +
"Paprika"

Invité · 14/12/2016, 21h48

C'est pas mal, j'attends le reste pour me convaincre de passer de angularjs à angular 2.0 (Ce qui risque d'être très difficile... Pas fan des syntaxes relouds dans le html... AngularJs, c'est de la balle, c'est magique et "cil-fa", c'est le rêve de tout informaticien ...

Suffit de voir un débutant s'extasier devant le 2 way binding, un truc génial de chez génial, trop souvent dénigré par les aigris !

Angular 2 par contre... hem

cac*... , les génies de microsoft sont passés par là pour dire "Angularjs ? c'est trop facile, on veut du truc style java ou symphony, avec des classes et une syntaxe incompréhensible et alambiquée, pour que les gens mettent 3 plombes à réaliser leurs projets, comme dans l'ancien temps, avec 30 % de réussite de projets....")

Allez je reste avec mon angularJS pour encore 5 ans et bye bye, et bientôt j'engrangerais le fric, avec le brave et vaillant format MVC qui lui est compréhensible de tous, et les modèles de données JSON qui sont clairs, eux !

Signé : Un réfractaire, amateur d'angularJS, JS comme JAVASCRIPT 5.0, et fan du MODELE VUE CONTROLEUR en JS ! vive le ng-repeat et les controleurs et les vues ,non merci aux nouveaux trucs que l'on ne comprends pas. Le typage de variables,

: heeerk pas question !

Si c'est pour faire du "java-like", alors autant faire du Primefaces, ça ca déchire oui, et c'est logique et pas de syntaxe trop lourde avec de bons exemples !

Quand à react... Peuh, regarder ça 2 minutes c'est déjà se faire mal aux yeux ! On ne comprends rien, ce n'est pas logique. AngularJS, lui est structuré, logique, et "the best" !

-> Vous êtes un génie, un développeur de ouf, un crack, un "padawan"

: go angular 2 ou react ou full php : je vous en prie codez des trucs incompréhensibles et géniaux encore et encore, mais pour vous et seulement pour vous même, ne venez pas pleurer .... avec vos trucs ensuite pour collaborer .

->Vous êtes un honnête homme, dans la moyenne du peuple, avec une intelligence normale, mais inventif, go ANGULARJS

, et là on vous comprendra, parce que c'est facile, et votre productivité sera +200% et votre taux de collaboration pourra grimper en flêche ! Et encore, sans parler de l'incroyable 3 ways binding de firebase avec la lib angularfire qui révolutionne tout (malheureusement la bdd est chez google heeeerk!!!)

**dukoid** · 15/12/2016, 13h01

devDePassage, certes AngularJS a de grande qualité comme tu le soulignes si bien : la simplicité

MAIS parceque il y a toujours un mais. quand il s'agit de concevoir une grosse application, AngularJS est à la peine, c'est le bordel. ça se complique.
le tout objet permet une meilleure gestion de l'ensemble de la grosse application(qui a un volume et une multitude de services et de données différentes...)
oui Angular est du coup plus complexe.

comme je dis toujours, chaque framework à ses avantages et inconvénients... et réponds à des besoins différents.

**NoSmoking** · 17/12/2016, 09h57

Bonjour,
<hs>
@devDePassage

que tu sois de passage ou autre, chasse le naturel il revient au galop ! (mais il boite toujours autant !!)

</hs>

Invité · 19/12/2016, 20h29

Envoyé par dukoid

devDePassage
le tout objet permet une meilleure gestion de l'ensemble de la grosse application(qui a un volume et une multitude de services et de données différentes...)
.

AngularJs c'est déjà du tout objet, sauf que ce sont des objets JSON faciles à gérer, pas de lourds objets PHP on l'on ne comprends pas la syntaxe et ou l'on se perds, et qu'on ne peux pas visionner dans Firebug . Php est très bon pour une chose : requêter les bases de données avec PDO, renvoyer des objets JSON à AngularJs avec json_encode, point ...

, en un mot, une bonne mule qui rends les requêtes SQL bien claires et le CRUD clair à gérer. Mais je suis d'accord que faire une appli en full php avec un bon framework php doit être bien pour ceux qui maitrisent... Moi j'aime angularJs parce que c'est plus simple pour moi, c'est bien structuré et la syntaxe est claire (sauf les directives, je ne comprends toujours pas trop) ! Dans ma petite carrière, c'est la structure la plus flexible et ordonnée que je n'ai jamais vu, la seule structure qui me permet de partir relativement confiant sur un projet humble bureautique.
Sans compter les tas d'exemples de code sur internet, et les nombreux modules additionels...

Quel autre langage permet il de récupérer l'intégralité des valeurs d'un formulaire, y compris des valeurs provenant de sliders, de graphiques et tous les champs imaginables dans UN SEUL OBJET : en écrivant $scope.monFormulaire ={}; j'ai déjà setté mon formulaire, puis c'est ma vue qui va le remplir AUTOMATIQUEMENT grace à un ng-model="monFormulaire.nom" affecté à un champs input par exemple! https://docs.angularjs.org/api/ng/directive/input

je peux même le recharger à loisir à partir du back end en 2 temps trois mouvements HI HI HI, tout automatique avec une requête $http ou un service !

Je peux même rajouter des truc dans l'objet à loisir, on s'en fout ça marche encore ca déchire mec, le back end s'en fout si il y a trop de données dans le JSON, ça marche encore mecton !!!! Le JSON ! Le code est incroyablement clair ! Et non, pas besoin de getters, pas besoin de setters, pas besoin de classes, pas besoin de typer les variables, tout marche comme ça, c'est juste magiiiique !

Pendant ce temps, ou voit les javascriptiens se galérer avec des tonnes de document.shit.get.value(bigshit) je sais pas quoi trop lourds sur chaque variable, c'est même pas dynamique, c'est statique hi hi hi! HI HI HI le temps qu'ils perdent HI HI HI! Et nous on place tout dans un seul objet et hop c'est fini, direction le back end hi hi hi, rien à faire good bye, on se fait une cigarette electronique pendant que les autres mulent encore pendant 5 heures avec leurs technos ! AngularJs is the best framewoooooork !!

Dont trust latests things !!!

**Heliogabale** · 23/12/2016, 11h22

Ce qui m'énerve du plus en dans les article c'est ce genre de choses : "Proxyfier le back end" (personnellement je ne comprend pas ce langage

) ou encore "Builder un projet" (là, j'ai compris mais ..... il existe déjà un mot en français).

Tout ça dans quel but, se faire passer pour un développeur au fait des nouveautés ?

Moi je zappe directement à l'article suivant.

**wkoza** · 23/12/2016, 12h12

Bonjour Heliogabale,

Je comprends ta remarque. Ce n'est pas pour "se faire passer pour un développeur au fait des nouveautés", non. C'est juste une deformation de langage car ces termes sont très teintés de sens et parfois plus parlant. J'avoue que je ne suis pas fan du tout français mais je vais faire un effort. Pour le terme proxifier le back end, il faut comprendre mettre en place un système de proxy entre le front-end et le back-end afin de "rediriger" les requêtes vers un autre serveur. Cela permet notamment d'éviter les erreurs de cross-domain.

**Heliogabale** · 23/12/2016, 16h08

Merci de ta réponse, je comprend très bien.
Mais tu n'étais pas visé personnellement, ni le contenu de l'article.

Mais beaucoup d'articles deviennent souvent incompréhensibles à force de "compulsions syntaxiques".

A +

Apprendre à programmer avec le framework Angular [Tutoriel]

AngularJS

Discussions similaires

Partager

Partager