[Angular2] tutoriel

Salut à tous,

Je sais pas si je suis au bon endroit je tenais a vous faire partager mes connaissances autour d'une suite de tutoriels.
Cette idée s'appuie sur deux points majeurs : l’absence totale de tutoriel francophone sur Angular 2 mais aussi plus largement que les tutoriels anglophones survolent pour la plupart les nouveaux concepts clés émergeant de ce nouveau framework.

Proposer un format vidéo semble être la meilleure approche pour moi il me permet de transmettre au mieux le raisonnement de façon chronologique.

Chaque vidéo va présenter en détail une partie essentielle composant ce nouveau framework, des points-clés détaillés toutes les deux semaines.

Mon but ici est uniquement de transmettre en toute humilité mes connaissances et surtout vous faire partager ma passion du web.

Trèves de bavardarge voici les vidéos

Angular2 tutoriel

Merci d'avance de me faire des retours aussi bien sur le fond que la forme histoire que je puisse corriger le tire

le sujet est vaste et de haut niveau ( très instructif) ......

je ne pense pas que tout le monde va comprendre ce genre de phrase parmis les vidéos :

"emacscript est la nouvelle norme javascript 2015 ...et qui va complétement révolutionne le monde javascript ....... let plutôt que var let globalement va permettre de le borner dans son bloc de déclaration alors que var n était pas le cas il etait disponible sur tout l arborescence du this en amont et en aval et la cela va être plus indépendant du contexte tout entier
"
"fonction fléché donne acces à this "

Il faut bien comprendre javascript pour passer à angular / typescript !
certains post sur alsa tourne autour de ça : scope , target ,this , event ....
Modifié par 75lionel (11 Jun 2016 - 17:25)

Salut,

Echyzen a écrit :
Cette idée s'appuie sur deux points majeurs : l’absence totale de tutoriel francophone sur Angular 2 mais aussi plus largement que les tutoriels anglophones survolent pour la plupart les nouveaux concepts clés émergeant de ce nouveau framework.

Il y a quand même l'excellent bouquin de NinjaSquad ^^ https://books.ninja-squad.com/angular2

Mais merci pour ton partage je vais me jeter dessus

Ouah c'est super ces retours! Tant mieux que cela intéresse en effet, cela s'adresse à des personnes de niveaux intermédiaires et avertis.

Alors je poursuis avec deux nouveaux tutoriaux venant faire un tour complet de l'utilisation des services d'Angular 2 avec :

Angular 2 Service : Système de Dépendance d'injection, et les metadatas @Host & @Optional

Angular2 module HTTP & programmation réactive : Explication et mise en pratique avec un exemple basique de connexion utilisant JWT au passage

Bon visionnage
Modifié par Echyzen (11 Jul 2016 - 00:18)

Bonjour beaucoups de questions :

Dans la première vidéo :
1 un concept de loader et instanciation et donc les notions suivantes : accessible , initialisation , affectation ... il faut vraiment connaitre javascript !!
2 création d'un component : un composant a pour but d'ajouter à notre code html un nouveau tag html ? Angular utilise pour javascript un préprocessseur pour *.ts-> *.js mais aussi pour la création de nouveau tag. il aurait été bien de visualiser dans la vidéo le code html généré par angular ! Pourquoi le fichier dans la démo s appelle app.component.html !!! . l'extension ne devrait pas être html car le contenu n est pas valide html . Angular utilise donc un parseur compatible angular et html !! Est ce que le mot directive et component signifient la même chose : un nouveau tag qui se comporte comme un tag HTML mais gérer par angular ?

Dans la 2ème video , j'apprécie fortement l introduction qui donne une vue d'ensemble et regrette qu il n y est pas un petit mot sur jquery ou certaines librairies . Dans un sens ce que l on peut faire avec angular ( Framework) on peut le faire avec jquery et certaines librairies ( des noms ? ) .
La vidéo montre l'utilisation d'une librairie javascript de de cryptage jwt en javascript avec typescript !! Comment est possible d avoir la complétion dans ce cas là ? il n 'y a pas de librairie typescript de jwt ?
Quel outil utilisez vous pour gérer la partie serveur ? une extension visualcode ? L'outil dont je parle se trouve dans la capture d'écran ci dessous dans laquelle la fenêtre window n 'a pas de nom !


Le curseur de la souris semble montrer l icone d'une souris lors de chque clic . Une façon de voir ce que l utilisateur fait au niveau de la souris . Quel est le nom de cette outil ? Est ce livré avec le logiciel de capture ?

Est ce que les fonctions de capture d 'évènement pour empêcher leur propagation sont des fonctions angular ou javascript ? Dans le second cas on peu mixer fonction typescript et javascript ? Le nom de la fonction est identique quelque soit le navigateur ? ( getpreventdefault et ... )
Pour comprendre l API if faut comprendre les données ( structure , protocole , extension) voir ici ( même auteur) et la sécurité .

Sinon
1 qu'elle est le but du projet http://lonnygomes.github.io/vjs-video/ ? j'aurais aimé lire le code source et comprendre mais bon ...... ?
2 y a t il dans angular un projet , une partie de la librairie qui permet de styler un component /directive facilement ( à la jquery ui) ? Il semble que se sera pour une prochaine vidéo ..... ( je suis impatient )

sinon merci pour les vidéos ....
Modifié par 75lionel (22 Jul 2016 - 09:59)

Salut à toi,

Ouah vraiment beaucoup de questions merci pour tous ces retours.

Première vidéo:
1. Je suppose que c'est une appréciation. En effet, il faut avoir des connaissances JS mais beaucoup de tutos d'initiation sont disponibles sur ce site et bien d'autres

2.C'est bien du html pour l'extension bien qu'en effet les balises Angular non pas de sens HTML du W3C. Le fichier généré par Angular en JS reste assez difficile à lire car le compilateur ne rend pas forcément le code lisible pour nous mais uniquement pour le moteur JS. Après, en effet, cela peut être intéressant de le regarder pour voir les grandes lignes
Cependant, le mot "Directive" et "Component" sont, en effet, des tags compris par Angular mais dont la finalité n'est pas la même. Comme décrit dans la vidéo un Component est vraiment un Component au sens W3C bout de code assez hermétique proposant une entrée en point d'entrée, ainsi, un Component est censé être conçu pour être portable d'une application à l'autre. La Directive quant à elle permet des opérations affectant le DOM comme décrit dans la vidéo.

Deuxième vidéo :
Je ne sais pas quelle vidéo vous parlez mais il me semble que c'est la toute dernière.
La complétion pour le Typescript peut être obtenu à l'aide de Typescript Definition File à inclure dans le projet. Pour cela vous pouvez utiliser le module node typings qui est le TypeScript Definition Manager a utiliser pour inclure automatiquement ces fichiers d'extention d.ts. Je l'abordrai sûrement dans les prochaines vidéos.

Concernant l'outil utilisé dans la capture c'est Postman le lien pour l'installer est dans la description de la dernière vidéo : Ici

Concernant le logiciel de capture c'est "Debut" logiciel qui en effet, montre les actions utilisateurs.

On peut mixer JS et TypeScript, en effet, je le rappel TypeScript est un sur-ensemble de JS donc quand on utilise TypeScript on utilise JS par contre la réciproque est fausse

Sinon :
1.Alors ton premier lien est un module Angular 1 pour le coup donc pas utilisable en Angular 2 permettant d'utiliser le player HTML5 pour display des vidéos. Je n'ai pas regardé plus que cela en détails...

2.Alors, pour la stylisation, le CSS est directement applicable à un Component. Néanmoins, des librairies comme JQuery-UI émergent notamment Angular Material 2. Des vidéos viendront sûrement.

J'espère avoir fourni quelques éléments de réponse. Sinon encore merci de ton intérêt. J'ai noté donc deux thèmes que tu aimerais que j'aborde, UI-CSS avec Angular ainsi que l'autocompletion TypeScript.

Je vous dis à bientôt pour le prochain numéro qui portera sur la mise en place de formulaire. Cela reste un classique à aborder l'élaboration de formulaire et des prises en compte des erreurs etc...

bonjour
j ai commencé internet a l'époque de gopher et mosaic et Hot metal pro. Je n'ai jamais voulu me mettre à javascript ( écrire des librairies) et le peu de vidéo sur youtube des développeurs front End permettait de constater que développer en javascript coté client était difficile ( un vrai cauchemar ) par manque de fonctionnalité de debug.

Gmail est pour moi une prouesse technologique même si écrit en java ( même si pas de réponse claire de google sur l'utilisation de gwt ) avec un trans compiler java -> javascript. Google a depuis le début de gmail racheté /tué les concurrents et dernièrement sparrow ( conflit acheteur "facebook/ google " / investisseur xavier niels ) ... une autre histoire .Récemment , google a mis de coté son language atxscript ( pas DART et son navigateur dartium ? ) au profit de microsoft le temps que ES 6 arrive...? .

Avec Angular et typescript ( "créé" par anders hejlsberg créateur de C#, delphi/borland / J++ ) ; c'est le monde du web ouvert au développeur C , java , C# et delphi qui ont des outils de production ( productivité) avec les outils taillés pour ça ( Visualstudio / windev / "borland" /eclipse, team foundation ) avec tous les termes associés au développement SSII : scrum, debug ,CI, test , automation que l'on va retrouver rapidement dans le monde web (js et php) . Angular un "MFC" consommant des Webservices un "COM/CORBA " ? . Après la mode java/actionscript on est en 2016 dans la mode javascript/node . Mais grunt gulp va t il suvivre face aux Ant, Maven, Gradle , kotlin ... non non pas makefile ? et pourquoi pas ? : atom /bracket sont des enfants de vi et emacs !

En abordant ce sujet sur le site d'alsacréation, vous ouvrez la porte vers le futur et c'est pourquoi j'apprécie fortement vos vidéos ... ou vous abordez aussi les patterns ( pas photoshop ) du gang of four ( singleton ...) . Deux remarques pour les lecteurs
1 le stockage javascript doit être compris
2 il n y a pas de github des projets abordés dans les videos
3 vous devez avoir un environnement de travail ( un IDE et pas un editeur notepad) pour testé tout ça .
( NB j utilise gulp ,sourcemap, typescript , ATOM , phpstorm mais j ai un peu de mal avec requirejs et le type de module loader Amd/umd/commonjs ... et les chemins relatifs /absolus ....( un peu comme dans votre video )
4 compiler en temps réel un fichier *.ts en *.js ok mais je n'ai pas encore trouvé un plug in gulp pour compiler ce même fichier *.ts vers Mainproject/typings/*.d.ts ( pour empêcher des "erreurs" de compilation)
5 comment reconnaitre un code angular 1 d'un code angular 2

sinon voici les liens pour les IDE qui me semble intéressant
- -VisualStudio Code ( j'évite les outils MS non car pas de qualité mais à un moment ou un autre le produit / support s arrête ( sharepoint , Frontpage , Microsoft expression ) ... un peu comme ADOBE /MACROMEDIA .
-- cats
-- phpstorm/webstorm basé sur intelliJ idea

Ai visualisé récemment une vidéo avec un commentaire très très négatif sur angular en relation avec la guerre des standards web ( en gros des web component avec spécifications google coté client vous êtes fou ! vous n'y pensez pas .......!! Messieurs du w3c et whatwg .. réveillez vous , montrez vous! ) . Un membre ancien de l 'équipe de angular donne son avis su angular d'un point de vue historique ici .

Faire des vidéos cela prend du temps ..ne seriez vous pas un "evangelist" google ? . Pour des questions fairplay / d'équités : allez sur durandal/aurelia .attention angular est un framework (FW) , knockoutjs et autres ( d3.js, zepto ) des librairies ( algo / gui) à combiner pour faire ou compléter ce que fait angular à lui ( FW) tout seul !

les component angular ne serait il pas une façon d 'ecrire en une seule fois un plugin compatible multi navigateurs alors qu'avant il fallait écrire un plug in pour chaque navigateur ? Au lieu d installer flash , applet , silverlight , quicktime ? ..avec angular vous êtes obligé de le télécharger à chaque fois si le site en a besoin. Sinon un wrapper pour les animations babylon.js porté en typescript ...que va devenir unity3DScript ?

cordialement
Modifié par 75lionel (14 Oct 2016 - 23:23)

je donne ici quelles informations sur angular et typescript . Il faut distinguer plusieurs niveaux/aspects dans javascript et typescript .
--1 concept de module n'existe pas vraiement actuellement en javascript ( namespace pseudoclass, windows.jquery ) sauf à utiliser une syntaxe/organisation spécifique serveur (nodejs commonjs ) ou client (requirejs) . La syntaxe umd et les outils compatibles éviteront la génération du code selon le contexte (systemsjs , es6 loader, web client/server)
--2 les transpiler comme babel (google) ou traceur ( react) convertissent la syntaxe es6 en syntaxe es5 .
--3 typescript permet à partir d 'un même code de générer aux choix des modules commonjs ou requirejs . typescript a sa propre syntaxe pour gérer les modules et la versin 1.5 de typescript supporte en plus la syntaxe des module ES6 .
--4 browserify permet de convertir du code serveur commmonjs en code executable sur le client web.
--5 webpack supporte comme browserify la syntaxe commonjs ( npm nodejs) coté serveur mais aussi requirejs avec syntaxe AMD coté client web.
--6 un librairie loader est caractérisée par
-------fonctionne coté serveur web ( nodejs) ou client web ( requirejs) ou les 2 ( webpack)
-------syntaxe commonjs , amd ou umd ......
=> par exemple ; le loader nodejs ne sait chargé que les modules coté serveur au format commonjs

la différence syntaxique entre commonjs et amd
Modifié par 75lionel (08 Sep 2016 - 09:07)

Super de faire vivre le topic! Merci @75lionel

Cette semaine, j'aborde les formulaires en Angular 2. Les personnes issues d'AngularJS 1 ne devraient pas être perdues ! En effet, c'est quasi similaire !
Je m'excuse pour le son je l'ai enregistré dans des conditions assez particulières déménagement oblige :s

Bonne vidéo https://youtu.be/nfkh7RMVakA

Github Correspondant : https://github.com/GuillaumeUnice/Angular2Tutorial/tree/FORMSTemplateDrivenForms

bonjour
Angular est vraiment un SPA (databinding et dependency injection DI) et donc une application dans une page web un peu comme JQuery UI mais pas comme jquery (DI) . On est dans le contexte d'un développeur et plus dans le monde de l'intégrateur ! Quels outils et choix techniques faut il utiliser pour gérer dans un projet angular ? un début de réponse : 1 . Est ce que typescript propose les même outils et donc peut remplacer webpack ? .

IL semble que Angular est vraiment un framework et qu'il utilise massivement HTML5 (svg) et aucune librairie graphique ou thèmes par défaut ! Si on est dans le monde du développeur ; ceux ci peuvent ils vraiment coder dans un IDE sans éditeur d'interface graphique ( component / widget editor ) ?
quelques pistes
bootstrap compatible material design ( angular ? et 2 ) .
boostrap compatible angular ui ( bootstrap team official for angular v1.x )
ng-bootstrap compatible angular v2 - angular team official)
web component compatible angular ( intro sur webcomponent)
wijmo compatible angular 2
angular-ui/bootstrap un wrapper de bootsrap
polymer web component es tune approche web de angular
muicss compatible angular , react , HTML email , Web component
mobileangularui propose des widget supplementaire a bootstrap 3 pour le monde mobile

sinon comme d 'habitude la documentation angular de google est excellente
Modifié par 75lionel (08 Sep 2016 - 23:28)

L'auteur ne donne pas la configuration ( versions) qu'il utilise pour générer le code final . A lire l historique et les versions des outils disponibles sur divers tutoriels on comprend mieux pourquoi certains utilisent *.ts--typescript--> es6.js --babel->es5.js ou encore webpack . Je me demande si avec la version 2 de typescript ; webpack est encore utile ? Webpack semble être une alternative a nodejs --browserify/tsfi-->requirejs voir grunt ou gulp .

Sinon , Jquery typescript babel supportent pour certains les promises , les generators , les notions de module ( cjs amd umd ...) async ou non mais pour certains sans être compatible avec les spécifications à venir ..... Donc beaucoups de sujets ( version) à connaitre avant d'aborder le workflow angular .

A noter que typescript n 'est pas obligatoire comme le montre les tutoriels todolist qui un peu comme helloworld a pour principe de montrer comment obtenir le même résultat en utilisant des librairies ou Framework javascripts différents . Le tutoriel vidéo pour Angular est ici et très instructif car il y a synchronisation ( browsersync ? ) entre le code et la page HTML et donc la console de debug ( F12 avec console ) .
Modifié par 75lionel (09 Sep 2016 - 23:33)

A force de parler d'angular on associe souvent typescript mais il existe aussi flow . En gros typescript et flow essaient de résoudre le problème de vérification des types mettant en jeux type ducking et inférence ( 1 , 2 ,3, 4, inférence typescript, check type with flow ) ! . donc en 2016 il existe 2 grandes solutions :
Facebook d'un coté avec React et flow , react utilise le concept de fichier javascript contenant le code html

Google avec angular qui utilise typescript de microsoft : angular utilise le concept d 'attribut ng-* ,de module View ( directive) et controller ( value factory ...)


En abordant angular on parle de web components qui sont implémentés de différentes façon par angular , react , navigateur.

React se différencie de angular par
-éxécution coté client et serveur
-gère les états en se basant sur virtual DOM ( utilisé par atom ) et pas les webcomponent ( w3C)
-gestion des évènement bind
-beaucoups de code pour vérifier le type
-template javascript : *.jsx avec code HTML formater XML
-template d'attribut possible comme angular ( rt-*=" ....")
-nécessite l'utilisation de om ,
-composant graphique réutilisable React ui
-webpack compatible comme angular avec typescript et gulp

React nécessite des librairies tierces pour avoir un framework comme angular :
-routing : react router
-data state architecture: flux -> redux
-data ->ui only : reactlink




---------------------------------------
official roadmap , changelog
----------------------------------------
...angularjs est le nom pour nommé angular 1.x , angular est le nom pour nommé angular 2.0
...angular 2 roadmap-> 24 septembre 2016
..typescript [url=https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript]2.0[/url] roadmap -> 22 septembre 2016 ( 2 jour avant la version angular 2 ! ... 2.1 pour nov 2016)

sinon réunion ng-europe le 25 26 octobre 2016 sur paris ( 500 €)
sinon pour moi ( me contredire si inexacte )
... angular directive avec View ( MVC) = component
.... angular Component= gestion des évènements interne externe ( input /output)
....MVC JoomlaAPI( Joomla) /symphony(drupal) (server php ) est un peu MVC angular ( client js)



"bUg": il est exacte d'affirmer que dans le texte ci dessus ; le lien ( href) de nom 2.0 situé après typescript qui contient un apostrope ( "...What's-new-in-TypeScript..." ) n'est pas pris en compte par la bibliothèque de convertion bbcode vers html . ici est le lien avec une url sans apostrophe et le rendu est correcte. Je ne connais pas la librairie et le code utilisé coté serveur donc je ne sais pas si erreur dev php , CMS , librairie php .....
Modifié par 75lionel (14 Oct 2016 - 23:20)

Merci @75lionel pour ta contribution, essaye de te focaliser que sur Angular pour la doc car on aborde React en plus je pense que le topic va devenir incompréhensible.

Mais encore une fois merci à toi c'est super

Alors j'ai fait une petite pause car depuis la RC5 ils ont introduit de nouveau concept, néanmoins toutes les précédentes vidéos restent d'actualité, la seule différence c'est au niveau des imports d'ailleurs je mets à jour le projet dans cette nouvelle vidéo et vous pourriez remarquer que je ne modifie rien à part les imports.

La nouvelle vidéo porte sur les NgModules!

Bonne vidéo https://youtu.be/AHn_erbqJac

Github Correspondant : https://github.com/GuillaumeUnice/Angular2Tutorial/tree/ngModule

Mes interventions sur React et typescript etait la pour replacer angular dans son contexte . Aucun ajout ne sera fait par la suite. Ceci a fait l objet d'un autre post Webdesigner et css modulaire ou je m'excuse d'avoir un peu polluer ce post .
Je suis content de voir la nouvelle vidéo .....

Tu n'as pas à t'excuser c'est un super travail que tu as réalisé. Cela enrichit le poste et merci pour le lien vers l'autre topic

Encore merci pour ta contribution

hors sujet
Modifié par 75lionel (11 Dec 2016 - 21:39)

Je pense vraiment que pour que les vidéos d'ANGULAR soient utiles aux membres de alsacréation il faut aborder les sujets qui fassent le lien entre javascript - jquery - requirejs / bootstrap --ET-- typescript - jquery - webpack et angular. Et donc il faudrait abordé l'apport de typescript et webpack par rapport a javascript et requirejs. Vaste sujet sur async , callback , loader , promise et les format de modules ( commonjs/amd/umd/es6) .
Sur alsa ; l'audience est orienté WEB ( en gros jquery /boostrap) tandis que angular est plus par le concept SPA orienté développeurs desktop comme .NET .
La meilleur façon d 'apprendre est de comprendre les limitations et les solutions au cours de l' histoire . Il existe un article qui compare angular et .NET avec un tableau de comparaison synthétique ( tableau plus difficile à trouver pour une comparaison entre angular et ".WEB" ( Webview et phonegap compliquent la synthèse des choses ....) .



Enfin une documentation officiel existe sur la façon de styler angular pour revenir au sujet principal du forum alsa : l'intégration css .
Modifié par 75lionel (11 Dec 2016 - 21:36)

Salut à tous,

Allez cette semaine on triture un peu notre framework favori
On va booster drastiquement ces performances de rendu rien que çà et en moins de 14 min bah oui nous aussi on est efficace pardi!

Bonne vidéo
Angular Performance

Github Correspondant : Github

salut a tous ,
j'ai besoin d'aide svp , je début sur angularjs et je dois realiser un dashboard en angularjs es6 .
Pouvez vous m'aider avec de bon tutoriels de préférence en français .

merci bien.

Salut @yannick1 malheureusement sur ce topic on aborde uniquement Angular (et non AngularJS qui est la version 1 du framework avec un cycle de vie atypique).

Néanmoins, le site Grafikart donne une bonne base d’apprentissage en français