Final

project/.jshintrc

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

project/app.js

@@ -20,6 +20,21 @@
         controller: 'HomeCtrl',
         controllerAs: 'home',
       })
+      .when('/exo03', {
+        templateUrl: 'src/app/exo03/exo03.html',
+        controller: 'Exo03Ctrl',
+        controllerAs: 'exo03',
+      })
+      .when('/exo04', {
+        templateUrl: 'src/app/exo04/exo04.html',
+        controller: 'Exo04Ctrl',
+        controllerAs: 'exo04',
+      })
+      .when('/final', {
+        templateUrl: 'src/app/final/final.html',
+        controller: 'FinalCtrl',
+        controllerAs: 'final',
+      })
       .otherwise({redirectTo:'/'});
   }
 

project/app.less

@@ -4,6 +4,9 @@
 @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/final/final.less";
 
 /* Add Fonts below */
 @fa-font-path: "bower_components/font-awesome/fonts";
@@ -40,3 +43,8 @@ body {
 
 /* Required for Angular UI Bootstrap */
 .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
+
+
+
+
+

project/index.html

@@ -29,6 +29,15 @@
   <!-- Main App JS -->
   <script src="app.js"></script>
   <script src="src/app/home/home.controller.js"></script>
+  <script src="src/components/setting/setting.service.js"></script>
+  <script src="src/components/meteo/meteo.service.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/searchConfig/searchConfig.service.js"></script>
+  <script src="src/components/cocktailSearch/cocktail.service.js"></script>
+  <script src="src/app/final/Final.controller.js"></script>
+
   <!-- Add New Component JS Above -->
 
   <toast></toast>

project/package.json

@@ -26,5 +26,8 @@
     "karma-mocha-reporter": "~0.2.5",
     "karma-phantomjs-launcher": "~0.1.4",
     "load-grunt-tasks": "~0.2"
+  },
+  "dependencies": {
+    "angular-background-image": "^0.1.2"
   }
 }

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,7 @@
+<div ng-controller="DetailCtrl as detail" >
+	<div ng-if="exo03.idFilms">
+	<p>{{exo03.idFilms.name}}<p>
+	<p>{{exo03.idFilms.year}}</p>
+</div>
+</div>
+

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

@@ -0,0 +1,34 @@
+(function() {
+  'use strict';
+
+  function Exo03Ctrl() {
+    var vm = this;
+    vm.msg = 'Welcome All!';
+    vm.subMsg = 'A seed Project';
+    vm.films = [
+    {name: 'Fast and Furious', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/AkSMd8AXSpA1L1SbBPc2AfVJfmE.jpg', year: 2001},
+    {name: '2 Fast 2 Furious', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/u1Snfl40rXmAJNiMyZUczUyFVuf.jpg', year: 2003},
+    {name: 'Fast & Furious: Tokyo Drift', img: 'https://image.tmdb.org/t/p/w600_and_h900_bestv2/4ceW7kWPAc2uFG5WzYDbP8Od3gw.jpg', year: 2006}
+    ];
+
+
+    vm.clickImg = clickImg;
+    var idFilms;
+    vm.idFilms = null;
+    function clickImg (index){
+      vm.idFilms = vm.films[index];
+      console.log(idFilms.name);
+    }
+  }
+
+
+
+
+
+
+  Exo03Ctrl.$inject = [];
+
+  angular.module('daproject')
+    .controller('Exo03Ctrl', Exo03Ctrl);
+
+})();

project/src/app/exo03/exo03.html

@@ -0,0 +1,25 @@
+<div class="contenerFilms">
+
+
+
+<div class="flex-item" id="listeFilms">Movies
+
+<ul>
+	<li ng-repeat="film in exo03.films" ng-click="exo03.clickImg($index)"><img src="{{film.img}}" ng-class="{'borderPink': film.name === exo03.idFilms.name}"></li>
+</ul>
+</div>
+
+
+<div class="flex-item" id="detailsFilms">
+	<div>
+		<ng-include src="'src/app/exo03/detail-partial/detail.html'"></ng-include>
+	</div>
+
+		detailMovies
+
+</div>
+
+
+</div>
+
+</div>

project/src/app/exo03/exo03.less

@@ -0,0 +1,40 @@
+.contenerFilms {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: flex;
+
+  flex-flow: row wrap;
+  justify-content: space-around;
+}
+
+.flex-item {
+  background: tomato;
+  width: 43%;
+  height: 100%;
+  margin-top: 10px;
+
+  line-height: 150px;
+  color: white;
+  font-weight: bold;
+  font-size: 3em;
+  text-align: center;
+}
+
+li
+{
+	list-style-type: none;
+
+}
+
+li img {
+    width: 50%;
+    height: 50%;
+    padding: 5px auto;
+}
+
+.borderPink
+{
+  border: 4px solid pink;
+}

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

@@ -0,0 +1,25 @@
+(function() {
+  'use strict';
+
+  function Exo04Ctrl(settingService, meteoService) {
+    var vm = this;
+    vm.input = '';
+    vm.click = click;
+    vm.settingService = settingService;
+    vm.meteoService = meteoService;
+
+    function click() {
+     settingService.city = vm.input;
+    }
+  }
+
+
+
+
+
+  Exo04Ctrl.$inject = ['settingService', 'meteoService'];
+
+  angular.module('daproject')
+    .controller('Exo04Ctrl', Exo04Ctrl);
+
+})();

project/src/app/exo04/exo04.html

@@ -0,0 +1,3 @@
+<input ng-model="exo04.input" /><button ng-click="exo04.click()">search</button>
+<div>{{exo04.settingService.city}}</div>
+<div><img src="http://openweathermap.org/img/w/{{exo04.service.meteoliste[0].weather[0].icon}}.png"></div>

project/src/app/final/final.controller.js

@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  function FinalCtrl(searchConfig) {
+    var vm = this;
+    vm.input = '';
+
+    function click() {
+     searchConfig.ingredient = vm.ingredient;
+    }
+  }
+
+
+  FinalCtrl.$inject = ['searchConfig'];
+
+  angular.module('daproject')
+    .controller('FinalCtrl', FinalCtrl);
+
+})();

project/src/app/final/final.html

@@ -0,0 +1,5 @@
+<div>
+<input ng-model="final.input" /><button ng-click="final.click(), cocktail.getCocktail()">buvons</button>
+{{final.searchConfig.ingredient}}
+</div>
+

project/src/app/final/final.less

@@ -0,0 +1,8 @@
+div
+{
+	height : 300px;
+	background-image : url("https://www.123bonbon.com/2530-thickbox_default/boisson-skittles.jpg");
+	background-size : cover;
+	width : 600px;
+
+}

project/src/app/home/home.html

@@ -6,8 +6,9 @@
         <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>
+      <a class="highscoreLink" href="/#/final">final</a>
+
     </div>
   </div>
 </div>

project/src/components/cocktailSearch/cocktail.service.js

@@ -0,0 +1,30 @@
+(function() {
+    'use strict';
+
+    function cocktailSearch(searchConfig, $http) {
+      var vm = {};
+      vm.cocktailist = [];
+      vm.getCocktail = getCocktail;
+
+       function getCocktail(){
+			return $http.get('http://www.thecocktaildb.com/api/json/v1/1/filter.php?i=' + searchConfig.ingredient)
+            .then(function(response){
+                console.log('Success: %o', response);
+                vm.cocktailist = response.data.list;
+            })
+            .catch(function(error){
+                console.log('Error: %o', error);
+            });
+		}
+
+
+      return vm;
+    }
+
+
+    cocktailSearch.$inject = ['searchConfig', '$http'];
+
+    angular.module('daproject')
+        .factory('cocktailSearch', cocktailSearch);
+
+})();

project/src/components/meteo/meteo.service.js

@@ -0,0 +1,31 @@
+(function() {
+    'use strict';
+
+    function meteoService($http, settingService) {
+      var service = {};
+      service.meteoliste = [];
+      service.getMeteo = getMeteo;
+
+    	function getMeteo() {
+			return $http.get('http://api.openweathermap.org/data/2.5/forecast?q={{exo04.service.city}}&APPID=&APPID=1f7da13f24fda94160547b9e4403aee5&units=metric=' + toto + '&param2=' + tata)
+            .then(function(response){
+                console.log('Success: %o', response);
+                service.meteoliste = response.data.list;
+            })
+            .catch(function(error){
+                console.log('Error: %o', error);
+            });
+		}
+
+      return service;
+    }
+
+
+
+
+    meteoService.$inject = ['$http', 'settingService'];
+
+    angular.module('daproject')
+        .factory('meteoService', meteoService);
+
+})();

project/src/components/searchConfig/searchConfig.service.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    function searchConfig() {
+      var vm = {};
+      vm.ingredient = '';
+
+      return vm;
+
+
+    }
+
+
+
+    searchConfig.$inject = [];
+
+    angular.module('daproject')
+        .factory('searchConfig', searchConfig);
+
+})();

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);
+
+})();