angular · galathinius · Jul 25, 2020 · Jul 25, 2020 · Jul 27, 2020
diff --git a/app/app.css b/app/app.css
@@ -1,25 +1,22 @@
-/* app css stylesheet */
-
-.menu {
-  list-style: none;
-  border-bottom: 0.1em solid black;
-  margin-bottom: 2em;
-  padding: 0 0 0.5em;
+img {
+    padding: 1rem;
+    max-height: 15rem;
 }
 
-.menu:before {
-  content: "[";
+.flex-item {
+    background-color: #fff;
 }
 
-.menu:after {
-  content: "]";
-}
+.flex-container {
+    display: flex; 
+    overflow: auto;
+    white-space: nowrap;
+  }
 
-.menu > li {
-  display: inline;
-}
+  body {
+    background-color:#011229;
+  }
 
-.menu > li + li:before {
-  content: "|";
-  padding-right: 0.3em;
-}
+  h2, p {
+    color: #ebf0f7;
+  }
diff --git a/app/app.js b/app/app.js
@@ -1,14 +1,24 @@
-'use strict';
-
-// Declare app level module which depends on views, and core components
-angular.module('myApp', [
+const app = angular.module('myApp', [
   'ngRoute',
   'myApp.view1',
-  'myApp.view2',
-  'myApp.version'
-]).
-config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
-  $locationProvider.hashPrefix('!');
-
-  $routeProvider.otherwise({redirectTo: '/view1'});
-}]);
+
+])
+  . config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
+    $locationProvider.hashPrefix('!');
+
+    $routeProvider.otherwise({ redirectTo: '/' });
+  }])
+  . controller('MainController', function (movieService) {
+    movieService.getData('now_playing')
+      .then((result) => this.nowPlaying = result);
+
+    movieService.getData('popular')
+      .then((result) => this.latest = result);
+
+    movieService.getData('upcoming')
+      .then((result) => this.upcoming = result);
+
+    this.getImage = function (movie) {
+      return imageURL + movie.poster_path;
+    };
+  });
diff --git a/app/configuration.js b/app/configuration.js
@@ -0,0 +1,10 @@
+const tmdbKey = '06f99320c4d4aafa43383b3d6c8da151';
+const imageURL = 'https://image.tmdb.org/t/p/w500';
+
+getLink = function (category) {
+  return `https://api.themoviedb.org/3/movie/${category}?api_key=${tmdbKey}`;
+};
+
+// getImage = function (movie) {
+//     return imageURL + movie.poster_path;
+// };
diff --git a/app/core/version/interpolate-filter.js b/app/core/version/interpolate-filter.js
diff --git a/app/core/version/interpolate-filter.spec.js b/app/core/version/interpolate-filter.spec.js
diff --git a/app/core/version/version-directive.js b/app/core/version/version-directive.js
diff --git a/app/core/version/version-directive.spec.js b/app/core/version/version-directive.spec.js
diff --git a/app/core/version/version.js b/app/core/version/version.js
diff --git a/app/core/version/version.spec.js b/app/core/version/version.spec.js
diff --git a/app/index-async.html b/app/index-async.html
diff --git a/app/index.html b/app/index.html
@@ -1,43 +1,21 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
+<html> 
 <head>
   <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My AngularJS App</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
-  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
   <link rel="stylesheet" href="app.css">
-  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
-<body>
-  <ul class="menu">
-    <li><a href="#!/view1">view1</a></li>
-    <li><a href="#!/view2">view2</a></li>
-  </ul>
-
-  <!--[if lt IE 7]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-  <![endif]-->
-
+<body  ng-app="myApp" ng-controller="MainController as main" >
   <div ng-view></div>
-
-  <div>AngularJS seed app: v<span app-version></span></div>
-
-  <!-- In production use:
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-  -->
+
   <script src="lib/angular/angular.js"></script>
   <script src="lib/angular-route/angular-route.js"></script>
   <script src="app.js"></script>
   <script src="view1/view1.js"></script>
-  <script src="view2/view2.js"></script>
-  <script src="core/version/version.js"></script>
-  <script src="core/version/version-directive.js"></script>
-  <script src="core/version/interpolate-filter.js"></script>
+  <script src="services/movieService.js"></script>
+  <script src="list/list.js"></script>
+  <script src="configuration.js"></script>
+  <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"> </script> -->
+
 </body>
 </html>
diff --git a/app/list/list.html b/app/list/list.html
@@ -0,0 +1,6 @@
+<h2>list tag</h2>
+    <ul class="flex-container">
+        <li ng-repeat="x in $ctrl.category" class="flex-item" >   
+            <img src="{{ main.getImage(x) }}" alt="" />
+        </li>
+    </ul>
diff --git a/app/list/list.js b/app/list/list.js
@@ -0,0 +1,10 @@
+angular
+  .module('myApp')
+  .component('list', {
+    templateUrl: 'list/list.html',
+    controller: function ListController(category, movieService) {
+      movieService.getData(category)
+        .then((result) => this.category = result);
+    },
+
+  });
diff --git a/app/services/movieService.js b/app/services/movieService.js
@@ -0,0 +1,6 @@
+app.factory('movieService', ($http) => ({
+  getData(category) {
+    return $http.get(getLink(category))
+      .then((response) => response.data.results);
+  },
+}));
diff --git a/app/view1/view1.html b/app/view1/view1.html
@@ -1 +1,21 @@
-<p>This is the partial for view 1.</p>
+<list category = 'nowPlaying'></list>
+<!-- <h2>Now Playing</h2>
+<ul class="flex-container">
+    <li ng-repeat="x in main.nowPlaying" class="flex-item" >   
+        <img src="{{ main.getImage(x) }}" alt="" />
+    </li>
+</ul> -->
+
+<h2>Latest</h2>
+<ul class="flex-container">
+    <li ng-repeat="x in main.latest" class="flex-item" >   
+        <img src="{{ main.getImage(x) }}" alt="" />
+    </li>
+</ul>
+
+<h2>Upcoming</h2>
+<ul class="flex-container">
+    <li ng-repeat="x in main.upcoming" class="flex-item" >   
+        <img src="{{ main.getImage(x) }}" alt="" />
+    </li>
+</ul>
diff --git a/app/view1/view1.js b/app/view1/view1.js
@@ -1,14 +1,12 @@
-'use strict';
-
 angular.module('myApp.view1', ['ngRoute'])
 
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view1', {
-    templateUrl: 'view1/view1.html',
-    controller: 'View1Ctrl'
-  });
-}])
+  .config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/', {
+      templateUrl: 'view1/view1.html',
+      controller: 'View1Ctrl',
+    });
+  }])
 
-.controller('View1Ctrl', [function() {
+  .controller('View1Ctrl', [function () {
 
-}]);
+  }]);
diff --git a/app/view2/view2.html b/app/view2/view2.html
diff --git a/app/view2/view2.js b/app/view2/view2.js
diff --git a/app/view2/view2.spec.js b/app/view2/view2.spec.js