DDorch
commented
8 years ago Pour construire l'architecture de l'interface utilisateur de notre application, on devrait pouvoir se baser sur la structuration proposée dans la doc officielle (https://angular.io/docs/ts/latest/guide/router.html#router-links).
Ils ont un template qui se présente comme cela :
<h1>Component Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>Dans <nav></nav>, il y aurait pour nous la liste des calculettes et dans <router-outlet></router-outlet> la calculette choisie.
Pour mettre en oeuvre le router, il suffit de suivre les instructions de la doc :
- Ajouter
<base href="/">entre les balises<head></head>de index.html - Importer le router dans un nouveau fichier app/app.component.ts
- Définir les composants qui seront routés dans un fichier app/app.routes.ts
- Et enfin, lier tout ça à app/main.ts.
Ici la liste des calculettes est définie statiquement dans le code et pas dynamiquement à partir d'un fichier json comme on souhaite le faire. Je te propose de procéder par étape en se basant sur l'exemple de la documentation pour maîtriser les routers et réussir à faire marcher deux calculettes dans notre application. On creusera la question de comment rendre ça dynamique une fois qu'on aura une première version à deux calculettes qui marche. Une chose est sûr, rendre la liste des calculettes dynamique sera sûrement un peu complexe étant donné que la requête json est asynchrone...
manalaf
La bibliothèque va prendre la forme d'une barre de navigation à gauche de l'écran qui permette de choisir avec quelle calculette travailler.
La barre de navigation peut être créée avec sidenav de Angular-material https://github.com/angular/material2/tree/master/src/demo-app/sidenav. On pourra s'inspirer du projet de démonstration d'utilisation de angular-material https://github.com/jelbourn/material2-app.
Pour lister les calculettes disponibles, on lira les informations dans le fichier jacase.config.json (cf. #10).
Ensuite pour charger les calculettes, je suppose qu'il faudra s'intéresser aux routers (https://angular.io/docs/ts/latest/guide/router.html).