add-movie-link.html

<button class="btn btn-primary">Ajouter un film</button>

add-movie.compoent.ts

import { Component, OnInit, ViewChild, Renderer } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-add-movie',
  templateUrl: 'add-movie.component.html',
  styleUrls: ['add-movie.component.css']
})
export class AddMovieComponent implements OnInit {

  private isOpen: boolean = false;

  // access local child DOM element
  @ViewChild('modal') modal;

  constructor(
    private renderer: Renderer
  ) {}

  ngOnInit() {
  }

  openModal() {
    this.isOpen = true;
  }
  closeModal() {
    this.isOpen = false;
  }

}

add-movie.html

<div class="modal hide fade" [ngClass]="{ 'in':isOpen, 'hide': !isOpen }" >
  <header class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Ajouter un film</h3>
  </header>
  <section class="modal-body">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label">Titre :</label>
        <input type="text">
      </div>
      <div class="control-group">
        <label class="control-label">Année de sortie :</label>
        <input type="text">
      </div>
      <div class="control-group">
        <label class="control-label">Réalisateur :
        </label>
        <input type="text">
      </div>
      <div class="control-group">
        <label class="control-label">Acteurs :</label>
        <input type="text">
      </div>
      <div class="control-group">
        <label class="control-label">Note :</label>
        <input type="number" placeholder="entre 1 et 5">
      </div>
    </form>
  </section>
  <footer class="modal-footer">
    <button class="btn btn-danger btn-small">Annuler</button>
    <button class="btn btn-success">Ajouter</button>
  </footer>
</div>

delete-movie-link.html

<button class="btn btn-danger"><i class="icon-trash icon-white"></i></button>

edit-movie-link.component.html

<a class="btn btn-info"><i class="icon-edit icon-white"></i></a>

edit-movie.component.html

<div>
   <header class="modal-header">
     <h3>Modifier le film</h3>
   </header>
   <section class="modal-body">
     <form class="form-horizontal">
       <div class="control-group">
         <label class="control-label">Titre :</label>
         <input type="text" name="title">
       </div>
       <div class="control-group">
         <label class="control-label">Année de sortie :</label>
         <input type="text" name="releaseYear">
       </div>
       <div class="control-group">
         <label class="control-label">Réalisateur :
         </label>
         <input type="text" name="directors">
       </div>
       <div class="control-group">
         <label class="control-label">Acteurs :</label>
         <input type="text" name="actors">
       </div>
       <div class="control-group">
         <label class="control-label">Note :</label>
         <input type="number" name="rate" placeholder="entre 1 et 5">
       </div>
     </form>
   </section>
   <footer>
     <a class="btn btn-danger btn-small">Annuler</a>
     <button class="btn btn-success">Modifier</button>
   </footer>
 
 </div>

edit-movie.component.ts

import { Component, OnInit } from '@angular/core';
import { Http,Headers } from '@angular/http';
import { ActivatedRoute, Router, ROUTER_DIRECTIVES } from '@angular/router';
 
@Component({
 moduleId: module.id,
 selector: 'app-edit-movie',
 templateUrl: 'edit-movie.component.html',
 styleUrls: ['edit-movie.component.css'],
 directives: [ROUTER_DIRECTIVES]
})
export class EditMovieComponent implements OnInit {

 private id: number = 0;
 movie: any = {};

 constructor(
   private route: ActivatedRoute,
   private router: Router
 ) { }

 ngOnInit() {
   this.route.params.subscribe(params => {
     this.id = params['id'];
   });
 }
}

form-valition.html

<div class="control-group error">
   <label class="control-label">
       <input>
       <div><span class="help-block">...</span></div>
   </label>
</div>

movies-list.html

<!-- partie principale -->
 <section class="container">

  <header class="page-header">
    <h1>Ma vidéothèque
      <small>4 films</small>
    </h1>
  </header>

  <ul class="thumbnails">

    <li class="movieResult" class="span12">
      <img src="img/avatar.jpg" class="span2">
      <div class="caption">
        <h3>Avatar</h3>
        <p>
          <b>Année de sortie :
          </b>2010-09-01</p>
        <p>
          <b>Réalisateur :
          </b>James Cameron</p>
        <p>
          <b>Acteurs :
          </b>Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang, Michelle Rodriguez</p>
        <p>
          <b>Synopsis :
          </b>Sur la lointaine planète de Pandora, Jake Sully, un héros malgré lui, se lance dans une quête de rédemption, de découverte, d'amour inattendu, dont l'issue sera un combat héroïque pour sauver toute une civilisation.</p>
      </div>
    </li>

    <li class="movieResult" class="span12">
      <img src="img/seigneurdesanneaux1.jpg" class="span2">
      <div class="caption">
        <h3>Seigneur des Anneaux : La Communauté de l'Anneau</h3>
        <p>
          <b>Année de sortie :
          </b>2003-12-03</p>
        <p>
          <b>Réalisateur :
          </b>Peter Jackson</p>
        <p>
          <b>Acteurs :
          </b>Elijah Wood, Sean Astin, Ian McKellen, Sala Baker, Viggo Mortensen</p>
        <p>
          <b>Synopsis :
          </b>Frodon le Hobbit hérite de l'Anneau Unique, un instrument de pouvoir absolu qui permettrait à Sauron, le Seigneur des ténèbres, de régner sur la Terre du Milieu. Commence alors un vaste périple visant à la destruction de l'objet.</p>
      </div>
    </li>

    <li class="movieResult" class="span12">
      <img src="img/thegrudge.jpg" class="span2">
      <div class="caption">
        <h3>The Grudge</h3>
        <p>
          <b>Année de sortie :
          </b>2004-12-29</p>
        <p>
          <b>Réalisateur :
          </b>Takashi Shimizu</p>
        <p>
          <b>Acteurs :
          </b>Sarah Michelle Gellar, Jason Behr, Clea DuVall, Kadee Strickland, Bill Pullman</p>
        <p>
          <b>Synopsis :
          </b>Dans ce qui paraît être une paisible maison de Tokyo se cache un épouvantable fléau. Quiconque franchit le seuil de la demeure est aussitôt frappé par une malédiction qui ne tardera pas à le tuer dans un sentiment d'indicible rage...</p>
      </div>
    </li>

    <li class="movieResult" class="span12">
      <img src="img/yipman.jpg" class="span2">
      <div class="caption">
        <h3>Yip Man 2</h3>
        <p>
          <b>Année de sortie :
          </b>2010-06-15</p>
        <p>
          <b>Réalisateur :
          </b>Wilson Yip</p>
        <p>
          <b>Acteurs :
          </b>Donnie Yen, Sammo Hung Kam-Bo, Simon Yam, Lynn Hung, Xiaoming Huang</p>
        <p>
          <b>Synopsis :
          </b>Film biographique sur la vie de Ip Man, pionnier du Wing Chun et maitre de Bruce Lee.</p>
      </div>
    </li>
  </ul>

 </section>

movies-list.json

[{
 "id": 1,
 "title": "Avatar",
 "releaseYear": "2010",
 "poster": "img/avatar.jpg",
 "directors": "James Cameron",
 "actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang, Michelle Rodriguez",
 "synopsis": "Sur la lointaine planète de Pandora, Jake Sully, un héros malgré lui, se lance dans une quête de rédemption, de découverte, d'amour inattendu, dont l'issue sera un combat héroïque pour sauver toute une civilisation.",
 "rate": "3"
 }, {
 "id": 2,
 "title": "Seigneur des Anneaux : La Communauté de l'Anneau",
 "releaseYear": "2003",
 "poster": "img/seigneurdesanneaux1.jpg",
 "directors": "Peter Jackson",
 "actors": "Elijah Wood, Sean Astin, Ian McKellen, Sala Baker, Viggo Mortensen",
 "synopsis": "Frodon le Hobbit hérite de l'Anneau Unique, un instrument de pouvoir absoluqui permettrait à Sauron, le Seigneur des ténèbres, de régner sur la Terre du Milieu. Commence alors un vaste périple visant à la destruction de l'objet.",
 "rate": "5"
 }, {
 "id": 3,
 "title": "The Grudge",
 "releaseYear": "2004",
 "poster": "img/thegrudge.jpg",
 "directors": "Takashi Shimizu",
 "actors": "Sarah Michelle Gellar, Jason Behr, Clea DuVall, Kadee Strickland, Bill Pullman",
 "synopsis": "Dans ce qui paraît être une paisible maison de Tokyo se cache un épouvantable fléau. Quiconque franchit le seuil de la demeure est aussitôt frappé par une malédiction qui ne tardera pas à le tuer dans un sentiment d'indicible rage...",
 "rate": "4"
 }, {
 "id": 4,
 "title": "Yip Man 2",
 "releaseYear": "2010",
 "poster": "img/yipman.jpg",
 "directors": "Wilson Yip",
 "actors": "Donnie Yen, Sammo Hung Kam-Bo, Simon Yam, Lynn Hung, Xiaoming Huang",
 "synopsis": "Film biographique sur la vie de Ip Man, pionnier du Wing Chun et maitre de Bruce Lee.",
 "rate": "5"
 }]