| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| slam4:richclient:angularjs:boards [2016/03/22 01:17] – [2.5- Url /story/:code (5 points)] jcheron | slam4:richclient:angularjs:boards [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| |
| ====== Boards ====== | ====== Boards ====== |
| | |
| | Remise Zippée du projet sur http://foad2.unicaen.fr/moodle/course/view.php?id=20911 |
| | |
| | <wrap important>Attention au nommage **prenom.nom** !</wrap> |
| | |
| ===== -- Contexte ===== | ===== -- Contexte ===== |
| Dans le cadre de l'évaluation du potentiel d'Angular pour les projets de votre entreprise, vous travaillez sur un projet Exemple permettant de gérer les User stories de projets Scrum. | Dans le cadre de l'évaluation du potentiel d'Angular pour les projets de votre entreprise, vous travaillez sur un projet Exemple permettant de gérer les User stories de projets Scrum. |
| Il faudra ensuite injecter **dataService** aux 2 contrôleurs **storiesController** et **StoryController** | Il faudra ensuite injecter **dataService** aux 2 contrôleurs **storiesController** et **StoryController** |
| |
| ==== -- Url /stories (3 points) ==== | ==== -- Url /stories ou / (3 points) ==== |
| |
| <wrap mytodo>**<nowiki>//</nowiki>TODO 2.3**</wrap> | <wrap mytodo>**<nowiki>//</nowiki>TODO 2.3**</wrap> |
| ^Variables privées | <html><span class="variable">stories</span></html>\\ Tableau des user stories | | ^Variables privées | <html><span class="variable">stories</span></html>\\ Tableau des user stories | |
| ^Méthodes publiques | <html><span class="method">goto(story)</span></html>\\ Accède à l'url **story/:code** en utilisant le service **$location** | | ^Méthodes publiques | <html><span class="method">goto(story)</span></html>\\ Accède à l'url **story/:code** en utilisant le service **$location** | |
| | |
| | **Remarque :** |
| | |
| | Une **story** est marquée **Done** si son avancement est égal à 1 (100%) |
| |
| ==== -- Directive storyHeader (2 points) ==== | ==== -- Directive storyHeader (2 points) ==== |
| * Permettre l'ajout/modification/suppression de nouveaux tags (2 points) | * Permettre l'ajout/modification/suppression de nouveaux tags (2 points) |
| |
| **Dans la page story :** | **Dans la page /stories ou / :** |
| * Filter les stories à afficher par sélection de devs, par la présence de tags, par la mention **done** (2 points) | * Filtrer les stories à afficher par sélection de devs et/ou par la présence de tags et/ou par la mention **done** (2 points) |
| |
| ===== -- Ressources ===== | ===== -- Ressources ===== |
| |
| ==== HTML ==== | ==== HTML/CSS ==== |
| <sxh html;title:index.html skeleton> | <sxh html;title:index.html skeleton> |
| <!DOCTYPE html> | <!DOCTYPE html> |
| <base href="http://127.0.0.1/yoursite/"> | <base href="http://127.0.0.1/yoursite/"> |
| <meta charset="UTF-8"> | <meta charset="UTF-8"> |
| <link rel="icon" type="image/png" href="https://docs.angularjs.org/favicon.ico" /> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> |
| |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
| <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> | <script async type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
| |
| |
| </sxh> | </sxh> |
| |
| | <sxh css;title:css/styles.css> |
| | body{ |
| | font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif; |
| | } |
| | .story-panel{ |
| | float: left; |
| | width: 300px; |
| | } |
| | .story{ |
| | padding: 10px; |
| | cursor: pointer; |
| | } |
| | .story-code{ |
| | font-weight: bold; |
| | color: crimson; |
| | } |
| | |
| | .story-panel span{ |
| | vertical-align: inherit; |
| | } |
| | .assign-to{ |
| | font-weight: bold; |
| | } |
| | </sxh> |
| ==== Bootstrap ==== | ==== Bootstrap ==== |
| |
| | {{:slam4:richclient:angularjs:boards:glyphicon.png?|}} |
| <sxh html;title:GlyphIcon> | <sxh html;title:GlyphIcon> |
| <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> | <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Done |
| </sxh> | </sxh> |
| | |
| | {{:slam4:richclient:angularjs:boards:badge.png?|}} |
| | <sxh html;title:badge> |
| | <span class="badge">3 tâches </span> |
| | </sxh> |
| | |
| | {{:slam4:richclient:angularjs:boards:label.png?|}} |
| | <sxh html;title:label> |
| | <span class="label" style="color: orange">Admin</span> |
| | </sxh> |
| | |
| |
| {{:slam4:richclient:angularjs:boards:glyphbutton.png?|}} | {{:slam4:richclient:angularjs:boards:glyphbutton.png?|}} |
| <sxh html;title:Glyphbutton> | <sxh html;title:Glyphbutton> |
| <button type="button" class="btn btn-default" aria-label="Left Align"> | <button type="button" class="btn btn-default" aria-label="Left Align"> |
| <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> | <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Texte du bouton |
| </button> | </button> |
| </sxh> | </sxh> |