Apprendre � programmer avec le framework Angular

Version imprimable

Voir 40 message(s) de cette discussion en une page

06/12/2016, 20h05
wkoza

Apprendre � programmer avec le framework Angular
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.
Citation:
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 ;)

:fleche: Retrouvez les meilleurs cours et tutoriels pour apprendre le JavaScript.
07/12/2016, 11h38
Marco46

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.
07/12/2016, 11h57
wkoza

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

Citation:

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 :

Citation:

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.
07/12/2016, 15h41
dukoid

c'est un bon d�but, j'esp�re qu'il y aura des suites...
07/12/2016, 19h57
wkoza

Apprendre � programmer avec le framework Angular - D�marrer avec Angular-CLI
Bonjour � tous,

Dans ce tutoriel, nous allons apprendre � utiliser le client Angular-CLI qui est d'une grande aide pour commencer un projet.
Citation:
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.

:fleche: Retrouvez les meilleurs cours et tutoriels pour apprendre Javascript.
07/12/2016, 21h05
ABCIWEB

Bonne initiative, c'est bien expliqu�, continues comme �a :ccool:
08/12/2016, 08h56
Doksuri

cette bande annonce donne envie de voire la suite ;) simple, clair et concis
12/12/2016, 14h53
Jarodd

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.
12/12/2016, 16h25
wkoza

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 :mrgreen: .
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
12/12/2016, 16h35
Jarodd

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

Vivement la suite alors !
13/12/2016, 22h31
wkoza

Apprendre � programmer avec le framework Angular - Vos premiers Components

Bonjour,

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

Citation:

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 !

:fleche: Retrouvez les meilleurs cours et tutoriels pour apprendre le Javascript.

pourquoi les "`"?

Code:

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  {
}

14/12/2016, 12h54
Watilin
Citation:

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:

1 2 3 "Panda\ Poney\ Paprika"
ou
Code:

1 2 3 "Panda\n" + "Poney\n" + "Paprika"
14/12/2016, 21h48
Invit�

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 ...:mrgreen: 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:weird: 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, :weird: : 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":boulet: : 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 :mouarf: , 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!!!)
15/12/2016, 13h01
dukoid

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.
17/12/2016, 09h57
NoSmoking

Bonjour,
<hs>
@devDePassage

que tu sois de passage ou autre, chasse le naturel il revient au galop ! (mais il boite toujours autant !!)
</hs>
:dehors:
19/12/2016, 20h29
Invit�

Citation:

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 ...:lol:, 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 !:D 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 !!! ;):aie:
23/12/2016, 11h22
Heliogabale

Mouais

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 :weird:) 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.
23/12/2016, 12h12
wkoza

Entendu !

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.
23/12/2016, 16h08
Heliogabale

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 +

Voir 40 message(s) de cette discussion en une page