https://www.wiki.leomartin.net/ 2026-04-07T16:37:06+00:00 https://www.wiki.leomartin.net/ https://www.wiki.leomartin.net/lib/tpl/dokuwiki/images/favicon.ico text/html 2016-06-14T18:30:22+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:adding_css_to_our_component&rev=1465921822&do=diff <- Using two-way data bindingUsing more complex data -> Attacher des styles css -> inline/multiline (styles) ou external (StyleUrls) // app.component.ts @component({ styles: 'selecteur { propriété: valeur }', }) // app.component.ts @component({ styleUrls: ['path/to.css'], }) text/html 2016-06-15T12:04:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:cleaning_up_components&rev=1465985071&do=diff <- Using multiple subcomponentsFiltering content through data pipes -> Mettre une interface dans un fichier externe plutôt que de la répéter. Dans <nom>.ts avec le préfixe export, et import dans les autres fichiers export interface <nom> { (…) } import {<nom>} from 'path/to/file'; styles consistents text/html 2016-06-14T14:17:50+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:creating_a_simple_component&rev=1465906670&do=diff <- Setting up our templateUsing multiple modules -> Tout tourne autour du concept de component. Tous les components ont au moins trois parties : * le decorator qui handles information about the controller * une vue qui est le template de ce que l'on veut montrer * la partie controller qui est le javascript qui va ajouter des fonctionnalités à la vue text/html 2016-06-15T11:13:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:creating_a_subcomponent&rev=1465981995&do=diff <- Using more complex dataUsing multiple subcomponents -> Lorsque l'on conçoit une application complexe, ce peut être un bonne idée de diviser un component en plusieurs subcomponents. property-binding <ul> <li *ngFor="#item of objets"> <custom-element [element]=item></custom-element> // à l'intérieur de ce loop item devient element comme spécifié </li> </ul> text/html 2016-06-14T16:26:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:displaying_data_in_our_templates&rev=1465914399&do=diff <- Understanding template typesWorking with events -> Les templates deviennent plus puissantes lorsque connectés aux Components.La manière la plus simple d'attacher (tie) une template à un component est à travers quelque chose appelé interpolation. On utilise des {{}} pour binder une propriété de la classe de votre component dans votre template. text/html 2016-06-15T12:24:09+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:filtering_content_through_data_pipes&rev=1465986249&do=diff <- Cleaning up componentsNext steps -> Pipes (filters dans NG1) input -> pipe -> output [ <pipe> ] ici on applique le pipe <pipe> à <valeur> voir angular.io/docs.ts/latest/api -> taper pipe dans le moteur DatePipe === fabriquer un pipe === exemple_de_pipe.pipe.ts <code> import {Pipe} from 'angular2/core'; @Pipe({ name: 'exemple_de_pipe', text/html 2016-06-14T11:36:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:index&rev=1465896962&do=diff * Introduction * Welcome * What you should know before watching this course * Using the exercises for this course * Getting Started * What is AngularJS 2 * Working with our build tool * Setting up our template * Introduction to the basics * Creating a simple component * Using multiple modules * Understanding template types * Displaying data in our templates * Working with events * Using properties * Using two-way data binding * Adding CSS to our c… text/html 2016-06-15T12:26:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:next_steps&rev=1465986401&do=diff <- Filtering content through data pipes -> -> angular.io -> Docs , tuto, developper guides, api text/html 2016-06-14T13:00:37+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:setting_up_our_template&rev=1465902037&do=diff <- Working with our build toolCreating a simple component -> // index.html (…) /* polyfill & shims */ <script src="js/lib/angular2/es6-shim.min.js"></script> <script src="js/lib/angular2/system-polyfills.js"></script> <script src="js/lib/angular2/angular2-polyfills.js"></script> /* Librairie de chargement de modules */ <script src="js/lib/angular2/system.src.js"></script> /* Librairie pour handle reactive programming */ <script src="js/lib/angular2/Rx.js"></script> /* framework générique Angu… text/html 2016-06-14T15:33:25+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:understanding_template_types&rev=1465911205&do=diff <- Using multiple modulesDisplaying data in our templates -> 3 types de templates utilisables avec angular JS 2 * inline * multiline avec des backticks `` * via fichier externe template inline @Component({ selector:'my-app', template: '<h1>Bonjour</h1>', }) template multiline @Component({ selector:'my-app', template: ` <section> <h1>Bonjour</h1> <p>Ça roule ?</p> </section> `, }) text/html 2016-06-14T19:16:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:using_more_complex_data&rev=1465924562&do=diff <- Adding CSS to our componentCreating a subcomponent -> Types + ES6 + TS Interface : version simplifiée d'une classe, qui n'aurait pas de méthodes. // app.component.ts import {Component} from 'angular2/core'; interface Type_de_donnees { nom: String; identifiant: string; } @component ({ (...) }) export class appComponent { objets = DATA; // constantes en capitales } var DATA: Type_de_donnees[] = [ {"nom":"chaise", numero:"ch0"}, {"nom":"table", numero:"t800"}, {"nom":"radio", … text/html 2016-06-14T15:18:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:using_multiple_modules&rev=1465910283&do=diff <- Creating a simple componentUnderstanding template types -> Séparation entre un module boot et un module app + import/export. // app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', // on cible <my-app> template: '<h1>Bonjour</1>', // template pour <my-app> }) /* on exporte pour que boot.js puisse avoir la main dessus */ export class AppComponent { } text/html 2016-06-15T11:40:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:using_multiple_subcomponents&rev=1465983640&do=diff <- Creating a subcomponentCleaning up components -> Créer encore un nouveau subcomponent. // autrecomponent.html <section> <ul> <li>{{objet.nom}}</li> <ul> </section> // autre-component.component.ts //on réutilise l'interface, dans les faits il serait donc justifié de le mettre dans un fichier à part interface Type_de_donnees { nom: String; identifiant: string; } @component ({ selector: 'autre-component', templateUrl: 'partials/autrecomponent.html', input: ['sometext'], }… text/html 2016-06-14T17:48:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:using_properties&rev=1465919332&do=diff <- Working with eventsUsing two-way data binding -> Angular dispose de moyens pour lier les propriétés de vos templates aux component l'aide de []. //app.html <h1 [innerHTML]="titre"></h1> // manière la plus populaire <h1>{{name}}</h1> // équivalent par interpolation <h1 bind-innerHTML="titre"></h1> // idem text/html 2016-06-14T18:08:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:using_two-way_data_binding&rev=1465920495&do=diff <- Using propertiesAdding CSS to our component -> Il peut être pratique d'avoir un élément qui répond à un événement et modifie un propriété en même temps. -> Two-way data binding. <input [value]="titre"> // on set la valeur de l'input à la propriété 'titre' du Component Et si on veut que ça change quand l'user tape quelque chose ? text/html 2016-06-14T12:19:05+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:what_is_angularjs_2&rev=1465899545&do=diff <- Using the exercises for this courseWorking with our build tool -> Qu'est Angular JS 2 ? * un framework (une structure) pour le développement d'applications * fournissant un ensemble d'objets et structures qui rendent ce développement plus facile et rapide * une mise à jour majeure ! Réécriture complète ! text/html 2016-06-14T17:01:16+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:working_with_events&rev=1465916476&do=diff <- Displaying data in our templatesUsing properties -> Angular à une notation spéciale d'attributs pour gérer les événements, les parenthèses : (<event>)=“<méthode du Component>()” //template <h1>{{objet_actuel}}</h1> <ul> <li (click)="ma_methode($event)" *ngFor="#item of objets"><p>{{item.nom}}</p></li> </ul> text/html 2016-06-14T12:30:49+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=learn_angularjs_2_-_the_basics:working_with_our_build_tool&rev=1465900249&do=diff <- What is AngularJS 2Setting up our template -> -> gulpjs.com * gulpfile.js (équivaut au gruntfile.js) * tsconfig.json : paramètres TypeScript pour le build (ex: target: es5) doc : github.com/Microsoft/TypeScript/wiki/tsconfig.json