Exo04

project/.jshintrc

@@ -5,7 +5,6 @@
     "eqeqeq": true,
     "eqnull": true,
     "immed": true,
-    "indent": 2,
     "latedef": "nofunc",
     "newcap": true,
     "noarg": true,

project/app.js

@@ -20,9 +20,24 @@
         controller: 'HomeCtrl',
         controllerAs: 'home',
       })
+      .when('/exo03', {
+        templateUrl: 'src/app/exo03/exo03.html',
+        controller: 'Exo03Ctrl',
+        controllerAs: 'exo03',
+      })
+      .when('/exo03/detail-partial', {
+        templateUrl: 'src/app/exo03/detail-partial/detail.html',
+        controller: 'detailCtrl',
+        controllerAs: 'detail',
+      })
+      .when('/exo04', {
+        templateUrl: 'src/app/exo04/exo04.html',
+        controller: 'Exo04Ctrl',
+        controllerAs: 'exo04',
+      })
       .otherwise({redirectTo:'/'});
   }
-
+   
   function RunUtils($rootScope) {
     $rootScope.safeApply = function(fn) {
       var phase = $rootScope.$$phase;

project/app.less

@@ -4,6 +4,11 @@
 @import "variables.less";
 /* Add App LESS files below */
 @import "src/app/home/home.less";
+@import "src/app/exo03/exo03.less";
+@import "src/app/exo04/exo04.less";
+
+@import "src/app/exo03/detail-partial/detail.less";
+
 
 /* Add Fonts below */
 @fa-font-path: "bower_components/font-awesome/fonts";

project/index.html

@@ -29,7 +29,14 @@
   <!-- Main App JS -->
   <script src="app.js"></script>
   <script src="src/app/home/home.controller.js"></script>
+  <script src="src/app/exo03/exo03.controller.js"></script>
+  <script src="src/app/exo03/detail-partial/detail.controller.js"></script>
+  <script src="src/app/exo04/exo04.controller.js"></script>
+  <script src="src/components/setting/setting.service.js"></script>
+
+
   <!-- Add New Component JS Above -->
+
 
   <toast></toast>
   <div ng-view></div>

project/src/app/exo03/detail-partial/detail.controller.js

@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  function DetailCtrl() {
+    var vm = this;
+    vm.msg = 'Welcome All!';
+    vm.subMsg = 'A seed Project';
+  }
+
+  DetailCtrl.$inject = [];
+
+  angular.module('daproject')
+    .controller('DetailCtrl', DetailCtrl);
+
+})();

project/src/app/exo03/detail-partial/detail.html

@@ -0,0 +1,9 @@
+<div>
+    <div ng-controller="DetailCtrl as deail">
+        {{detail.msg}}
+    </div>
+    <div ng-if="UNFILMESTSELECTIONE">
+	<p>{{ LETITREDUFILMSELECTIONE }}<p>
+	<p>{{ LANNEEDUFILMSELECTIONE }}</p>
+</div>
+</div>

project/src/app/exo03/exo03.controller.js

@@ -0,0 +1,24 @@
+(function() {
+    'use strict';
+
+    function Exo03Ctrl() {
+        var vm = this;
+        vm.films = [
+            {name: 'Fast and Furious', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/AkSMd8AXSpA1L1SbBPc2AfVJfmE.jpg', year: 2001, selected: false},
+            {name: '2 Fast 2 Furious', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/u1Snfl40rXmAJNiMyZUczUyFVuf.jpg', year: 2003, selected: false},
+            {name: 'Fast & Furious: Tokyo Drift', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/4ceW7kWPAc2uFG5WzYDbP8Od3gw.jpg', year: 2006, selected: false}
+        ];
+        vm.clickin = clickin;
+        vm.saveIndex = -1;
+            function clickin(index){
+
+            vm.saveIndex = index;
+        }
+    }
+
+    Exo03Ctrl.$inject = [];
+
+    angular.module('daproject')
+        .controller('Exo03Ctrl', Exo03Ctrl);
+
+})();

project/src/app/exo03/exo03.html

@@ -0,0 +1,11 @@
+<div id="pageFilms">
+    <div id="listeFilms" class="couleurDiv">
+        <li ng-repeat="film in exo03.films" class="flex-item"><img ng-class="{'selected': exo03.saveIndex === $index}" ng-click="exo03.clickin($index)" ng-src="{{film.img}}"></img></li>
+</div>
+<div id="detailFilm" class="couleurDiv">
+    <ng-include src="'src/app/exo03/detail-partial/detail.html'"></ng-include>
+
+    truc truc
+
+</div>
+</div>

project/src/app/exo03/exo03.less

@@ -0,0 +1,29 @@
+
+
+#pageFilms {
+    display: flex;
+
+}
+
+#listeFilms {
+    flex-direction: row;
+    height: 500px;
+    flex-grow: 1;
+}
+
+#detailFilm {
+
+    flex-direction: row-reverse;
+    height: 500px;
+    flex-grow: 1;
+}
+
+.couleurDiv {
+    background-color: #6fed12
+
+}
+
+.selected{
+    border: 5px solid pink;
+}
+

project/src/app/exo04/exo04.controller.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    function Exo04Ctrl($location){
+        var vm = this;
+        vm.text = 'Text';
+        vm.afficherText = afficherText;
+
+        function afficherText(){
+            console.log(vm.text)
+        }
+
+    }
+
+     Exo04Ctrl.$inject = [];
+     setting.service.settingService.$inject = [];
+
+    angular.module('daproject')
+        .controller('Exo04Ctrl', Exo04Ctrl);
+})();

project/src/app/exo04/exo04.html

@@ -0,0 +1,9 @@
+<div >
+<div class="centralDiv">
+    <form id="container">
+    <label class="labelSearch">search</label>
+    <input ng-click="exo04.afficherText()" class="buttonClick" type="button" value="click" />
+    <input ng-model="exo04.text" class="inputText" type="text" name="un" size="10" />
+    </form>
+</div>
+</div>

project/src/app/exo04/exo04.less

@@ -0,0 +1,19 @@
+
+
+#container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    align-items: center;
+}
+
+.buttonClick {
+    order: 1;
+}
+.inputText {
+    order: 2;
+
+}
+.labelSearch {
+    order: 3;
+}

project/src/app/home/home.html

@@ -6,8 +6,8 @@
         <div class="subTitle">{{home.subMsg}}</div>
       </div>
       <a class="highscoreLink" ng-click="home.goToExo(3)">Exo03</a>
-      <a class="highscoreLink" href="/#/exo05">Exo05</a>
-      <a class="highscoreLink" href="/#/exo06">Exo06</a>
+      <a class="highscoreLink" href="/#/exo04">Exo04</a>
+
     </div>
   </div>
 </div>

project/src/components/setting/setting.service.js

@@ -0,0 +1,17 @@
+(function() {
+    'use strict';
+
+    function settingService() {
+      var service = {};
+      service.city = '';
+     service.isCelsius = true;
+
+      return service;
+    }
+
+    settingService.$inject = [];
+
+    angular.module('daproject')
+        .factory('settingService', settingService);
+
+})();