DokuWiki angularjs_2_essential_training

angularjs_2_essential_training:basics_of_typescript

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T16:35:55+00:00

<- Using the exercise filesCourse overview -> Typescript : superset de JavaScript -> compilé vers JavaScript. Écrire du Javascript en lieu et place de typeScript est tout à fait possible et valide. Avantages : * ES2015 class * Modules * Strong typing * Variables * Signatures

angularjs_2_essential_training:component_metadata

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:50:08+00:00

<- RoutingThe component selector -> Decorator -> Expression that evaluate to a function allowing annotation classes at design time syntaxe : () exemple : @Component() ... -> app.component.ts import {Component} from 'angular2/core'; // import du component @Component({ selector: 'app', template: '

My App

' }) export class AppComponent {} // on exporte pour pouvoir importer ailleurs

angularjs_2_essential_training:components_bootstrap_and_the_dom

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T16:51:21+00:00

<- Course overviewDirectives and pipes -> Angular est basé sur l'assemblage de composants (components), avec comme point de départ le 'initial parent component'. De manière similaire au DOM et à son élément racine, cet élément parent est la racine de la structure. Dans angular, un component est utilisé pour rendre une portion de

angularjs_2_essential_training:course_overview

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T16:40:34+00:00

<- Basics of TypeScriptComponents, Bootstrap, and the DOM -> * Directives * Pipes * Services * HTTP * Routing * Components

angularjs_2_essential_training:data_binding

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:10:18+00:00

<- Directives and pipesDependency injection -> * templates expressions and statements * value binding * event binding

angularjs_2_essential_training:data_persistence

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:25:02+00:00

<- Services and other business logicRouting -> * in-memory data-store * local storage * XHR * JSONP * -> Angular HTTP

angularjs_2_essential_training:dependency_injection

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:14:38+00:00

<- Data bindingServices and other business logic -> DI = Dependencies Injection Plus facile à réutiliser et à unit-tester. Lieu le plus commun d'usage : contructeurs. Constructor(formBuilder: FormBuilder) {} aussi utilisable au bootstrap (component racine) : bootstrap( App, [DataService, FormulaService]);

angularjs_2_essential_training:directives_and_pipes

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:00:53+00:00

<- Components, Bootstrap, and the DOMData binding -> Directives Pour Angular, un component est une directive avec un template. Les directives fournissent des fonctionnalités et peuvent transformer le DOM. Il existe deux types de Directives : * Structural : modifient le layout via le DOM *

angularjs_2_essential_training:index

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T16:01:00+00:00

- Introduction * Welcome * Why use AngularJS 2 * What you should know before watching this course * Using the exercise files * Basics of TypeScript * Course overview - Architecture Overview * Components, Bootstrap, and the DOM * Directives and pipes * Data binding * Dependency injection * Services and other business logic * Data persistence * Routing - Components * Component metadata * The component selector * The component template * Styling a component *…

angularjs_2_essential_training:routing

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:34:16+00:00

<- Data persistenceComponent metadata -> Angular Router Module Route configuration -> Routing Links -> Routing outlets -> Routing events handles url

angularjs_2_essential_training:services_and_other_business_logic

Anonymous (anonymous@undisclosed.example.com) — 2016-06-03T17:20:53+00:00

<- Dependency injectionData persistence -> Component <--> view Services (inside component) = application logic. Non liés à angular.

angularjs_2_essential_training:styling_a_component

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T19:13:40+00:00

<- The component templateUsing other components in a component -> // inline template @Component ({ selector: 'media-tracker-app', template: '

My app

', }) // ou template: `

My App

now width multiline HTML

`, Ou mettre dans du html séparé (la propriété devient templateUrl) :

angularjs_2_essential_training:the_component_selector

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T18:40:01+00:00

<- Component metadataThe component template -> -> app.component.ts (...) @Component({ selector: 'my-app', (...) }) (...) Cible la première instance trouvée seulement, ici : index.html (...) Loading... (...) ...

angularjs_2_essential_training:the_component_template

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T18:43:12+00:00

<- The component selectorStyling a component -> Concernant le component racine, angular va chercher le premier match dans le dom, pas plusieurs. Donc si on indique le sélecteur app, s'assurer qu'il n'y a bien qu'un seul dans la page ! -> utiliser des dash dans le sélecteur genre media-app

angularjs_2_essential_training:using_other_components_in_a_component

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T19:22:39+00:00

<- Styling a componentInterpolation and the expression context -> (…) import {MediaItemComponent} from './media-item.component'; @Component({ (…) directives: ['MediaItemComponent'], // si angular trouve dans le component DOM un objet qui match le sélecteur de MediaItemComponent, ??? (Compoditize ???) le component (…) })