{"id":21372266,"url":"https://github.com/rxlabz/ngx-intro","last_synced_at":"2025-03-16T08:44:07.704Z","repository":{"id":66351578,"uuid":"79998884","full_name":"rxlabz/ngx-intro","owner":"rxlabz","description":null,"archived":false,"fork":false,"pushed_at":"2017-01-27T10:40:47.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-09T15:08:49.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rxlabz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-25T09:09:59.000Z","updated_at":"2018-02-01T22:40:55.000Z","dependencies_parsed_at":"2023-02-24T18:01:02.829Z","dependency_job_id":null,"html_url":"https://github.com/rxlabz/ngx-intro","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fngx-intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fngx-intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fngx-intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fngx-intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rxlabz","download_url":"https://codeload.github.com/rxlabz/ngx-intro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846979,"owners_count":20357297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T08:18:47.345Z","updated_at":"2025-03-16T08:44:07.680Z","avatar_url":"https://github.com/rxlabz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction à Angular2\n\n## Modern JS\n\n### ES5 =\u003e ES2015/ ES2016/ ES2017 / ...\n\n- classes\n\n```javascript\nclass User{\n    \n    get mail(){\n        return this._mail;\n    }\n    \n    set mail( value ){\n        return this._mail;\n    }\n\n    constructor(firstName, lastName, mail){\n        this.firstName = firstName; \n        this.lastName = lastName; \n        this._mail = mail; \n    }\n}\n```\ncf. [:memo: les classes](http://putaindecode.io/fr/articles/js/es2015/classes/)\n\n- string interpolation\n\n```javascript\nlet prenom = \"Jack\";\nlet salutation = `Salut ${prenom}!`; \n```\ncf. [string templates](http://putaindecode.io/fr/articles/js/es2015/template-strings/)\n\n+ [var, let et const](http://putaindecode.io/fr/articles/js/es2015/const-let-var/)\n+ [les fonctions fléchées](http://putaindecode.io/fr/articles/js/es2015/arrow-functions/)\n+ [paramètres rest et opérateur spread](http://putaindecode.io/fr/articles/js/es2015/rest-spread/) \n+ [nouvelles méthodes d'array](http://putaindecode.io/fr/articles/js/es2015/array-methods-addition/)\n+ [objet literals](http://putaindecode.io/fr/articles/js/es2015/object-literals/)\n- modules\n- ...\n\n### Lectures\n\n- [Putain de code](http://putaindecode.io/) » articles :fr: sur es6\n- [ES6 Essentials :us:](http://www.2ality.com/2015/08/getting-started-es6.html)\n\n### Outils\n\n- node / npm : Node Package Manager \n=\u003e [intro](http://maxlab.fr/javascript/comprendre-et-maitriser-npm-introduction/)\n\n```bash\nnpm init # ajouter -y pour skip le paramètrage\n\nnpm install --save underscore # ou npm i -S underscore\nnpm install --save-dev babel-cli babel-preset-es2015 # ou npm i -D babel-cli\necho '{ \"presets\": [\"es2015\"] }' \u003e .babelrc\n```\n \n- [babelJS](https://babeljs.io)\n  - [babel CLI](https://babeljs.io/docs/usage/cli/)\n\n```bash\nbabel script.es --out-file script.js --watch # ou babel script.es -o script.js -w\n```\n  \n  - [plugins](https://babeljs.io/docs/plugins/) : ES2015/2016/2017/React...\n\n- [Webpack : module bundler](https://webpack.js.org/)\n\n```js\n\nmodule.exports = {\n  entry: './src/user.js',\n  output: {\n    filename: 'bundle.js'\n  }\n};\n```\n\n=\u003e [Exemple](https://github.com/rxlabz/ngx-intro/tree/master/es6-wbpk)\n\n\n## [Typescript](https://www.typescriptlang.org)\n\n- typage, classes, interfaces, ...\n\n- [Playground](http://www.typescriptlang.org/play/index.html)\n\n- [Basic types](http://www.typescriptlang.org/docs/handbook/basic-types.html)\n- [var declarations](http://www.typescriptlang.org/docs/handbook/variable-declarations.html)\n- [Interfaces](http://www.typescriptlang.org/docs/handbook/interfaces.html)\n- [Classes](http://www.typescriptlang.org/docs/handbook/classes.html)\n- [Fonctions](http://www.typescriptlang.org/docs/handbook/functions.html)\n\n=\u003e :tv: [ Typescript 2016 : what's new](https://www.youtube.com/watch?v=6wEVu_mkJjM)\n\n## Installation\n\n```bash\nnpm install -g typescript\n```\n\n### Usage\n\nDans le dossier du projet :\n\n```bash\n# génération du fichier tsconfig.json\ntsc --init\n\n# compilation\ntsc fichier.ts\n\n# compilation avec watcher \ntsc -w fichier.ts\n```\n\n### [Typings](https://github.com/typings/typings) : typescript definition manager\n\n```bash\n\nnpm -y init\n\n# npm i -S ...\nnpm i -D @types/es6-promise\n# npm i -D ...\n\ntsc --init\n\ntypings search --name libname\ntypings install dt~libname --global --save\n\n```\n\n## Angular(2+)\n\n### Principes\n\n- arbre de composants\n\n![component_tree](https://simplyon2.github.io/support/img/ng_component_tree.jpg)\n\nChaque composant est une classe TS, marquée de l'annotation @Component().\n\nChaque composant est constitué :\n- de la classe,\n- d'un template html intégré dans le fichier TS ou dans un fichier HTML distinct\n- et éventuellement d'une ou des feuilles de styles.\n\nL'annotation @Component permet de configurer ces aspects :\n\n- selector : nom du tag personnalisé\n- template ou templaterl pour définir le contenu visuel du composant\n- style ou styleUrls\n\nPar exemple : \n\n![component_tree2](https://simplyon2.github.io/support/img/component_tree_demo.jpg)\n\n### Tooling\n \n- [configuration manuelle]() : tsc, typings, systemJS... [exemple](https://plnkr.co/edit/xAmFhH2fiuqj5OFCaQmw?p=preview)\n\n- ou **[angular-cli](http://cli.angular.io)**\n\n```bash\nng new ng-demo\n```\n\n### Structure d'un projet\n\n- src/\n  - app : composants, classes et services de l'application\n  - environments : variable d'environnements pour configuration de la compilation\n  - index.html, main.ts, tsconfig.json...\n- les configs : / package.json, angular-cli.json, [karma.conf.js](http://karma-runner.github.io/1.0/index.html),\n[tslint.json](https://palantir.github.io/tslint/), [protractor.conf.js](https://github.com/angular/protractor)\n\n\n### App.module\n\n```typescript\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n@NgModule({\n  imports:      [ BrowserModule ],\n  declarations: [ AppComponent ],\n  providers:    [ AppModel ]\n  bootstrap:    [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n### Définition d'un composant\n\n#### app.component\n\n```typescript\n@Component({\n  selector:    'topbar',\n  templateUrl: 'topbar.component.html',\n  directives : [ AutreComposantNecessaire ],\n  providers:  [ LoginService ]\n})\nexport class HeroListComponent implements OnInit {\n/* . . . */\n}\n```\n\n```typescript\n@Component({\n  selector:    'topbar',\n  template: `\u003cheader\u003e\n  \u003ch1\u003eUne app\u003c/h1\u003e\n  \u003cspan\u003e Bienvenue {{user}}\u003c/span\u003e\n\u003c/header\u003e`,\n  providers:  [ LoginService ]\n})\nexport class HeroListComponent implements OnInit {\n    \n    currentUser:User;\n}\n```\n\n### [Expressions de templates](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions)\n\n- **innerText**\n\n```\n\u003ch1\u003e{{title}}\u003c/h1\u003e\n```\n\n- **attribut** \n\n```\n\u003cimg [attr.src]=\"user.avatar\"\n```\n\n  - styles `[style.color]=\"#f00\"`\n  - classes `[class.selected]=\"isSelected\"`\n- **directives** `*ngIf`, `*ngFor`\n\n### [Communication entre composants]()\n\n- parent / enfant\n  - `@Input()`\n\n- enfant / parent\n  - `@Output`\n  - intro aux [observables]()\n  \n=\u003e [Exemple](https://github.com/rxlabz/ng2_compocom)\n\n\n#### Annexes : Programmation réactive\n\nAngular 2 utilise la librairie RxJs dans plusieurs API. Cette librairie offre une implémentation \ndu concept d'Observable pour le web. Le principe d'observable RX est proche du principe de Stream \nd'autres languages ( Java, Dart). \n\n- [:fire: - Introduction Reactive Extension](http://reactivex.io/intro.html)\n- [:tv: - Intro to reactive programming](https://egghead.io/series/introduction-to-reactive-programming)\n- [Learn RX](http://github.com/jhusain/learnrxjava/) : exercices de préparation au \"paradigme fonctionnel réactif\" \n- [RxJs : Reactive Extension pour le web](https://github.com/ReactiveX/rxjs)\n  \n- composants sans liaison directe\n  - services\n\n### Injection de dépendances\n\nLe principe / design pattern d'injection de dépendances invite à déléguer la création des dépendances d'une classe.\n\nSi la classe A doit utiliser la classe B ce n'est pas à elle de l'instancier, elle doit lui être fourni.\n\nLa DI permet entre autre de simplifier la rédaction de test unitaires, en simplifiant notamment l'utilisation de mocks.\n \nAngular offre plusieurs options pour injecter \n\n### Forms\n\n- [template based](https://angular.io/docs/ts/latest/guide/forms.html)\n- [reactive forms](https://toddmotto.com/angular-2-forms-reactive)\n- [dynamic forms](https://angular.io/docs/ts/latest/cookbook/dynamic-form.html)\n- [Form validation](https://angular.io/docs/ts/latest/cookbook/form-validation.html)\n\n### Communication client-server\n\n- [Http et observables]()\n\n### Router\n\n- routes simples\n- routes enfants\n- routes auxiliaires\n\n### [Material design](http://material.angular.io)\n\n### Animation\n\n### Mobile\n\n- PWA : progressive web app\n- Ionic 2\n- Nativescript\n\n### Avancé\n\n- SSR : Server Side rendering\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxlabz%2Fngx-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frxlabz%2Fngx-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxlabz%2Fngx-intro/lists"}