angular · teropa · Jan 19, 2016 · Jan 19, 2016 · Jan 24, 2016 · Jan 24, 2016
diff --git a/README.md b/README.md
@@ -157,6 +157,14 @@ large version of the thumbnail image.
   - Animate changes to the phone list, adding, removing and reordering phones.
   - Animate changes to the main phone image in the detail view.
 
+### step-13
+
+- Organize the code to comply with the [Angular Style Guide](https://github.com/johnpapa/angular-styleguide):
+  - Use modules by feature structure.
+  - Split files so that there is one application component per file.
+  - Use `feature.type.js` file naming scheme.
+
+
 
 ## Development with angular-phonecat
 

diff --git a/app/css/animations.css b/app/css/animations.css
@@ -0,0 +1,97 @@
+/*
+ * animations css stylesheet
+ */
+
+/* animate ngRepeat in phone listing */
+
+.phone-listing.ng-enter,
+.phone-listing.ng-leave,
+.phone-listing.ng-move {
+  -webkit-transition: 0.5s linear all;
+  -moz-transition: 0.5s linear all;
+  -o-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+.phone-listing.ng-enter,
+.phone-listing.ng-move {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.phone-listing.ng-move.ng-move-active,
+.phone-listing.ng-enter.ng-enter-active {
+  opacity: 1;
+  height: 120px;
+}
+
+.phone-listing.ng-leave {
+  opacity: 1;
+  overflow: hidden;
+}
+
+.phone-listing.ng-leave.ng-leave-active {
+  opacity: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* cross fading between routes with ngView */
+
+.view-container {
+  position: relative;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+  background: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.view-frame.ng-enter {
+  -webkit-animation: 0.5s fade-in;
+  -moz-animation: 0.5s fade-in;
+  -o-animation: 0.5s fade-in;
+  animation: 0.5s fade-in;
+  z-index: 100;
+}
+
+.view-frame.ng-leave {
+  -webkit-animation: 0.5s fade-out;
+  -moz-animation: 0.5s fade-out;
+  -o-animation: 0.5s fade-out;
+  animation: 0.5s fade-out;
+  z-index: 99;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-moz-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-webkit-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
diff --git a/app/css/app.css b/app/css/app.css
@@ -1 +1,99 @@
 /* app css stylesheet */
+
+body {
+  padding-top: 20px;
+}
+
+
+.phone-images {
+  background-color: white;
+  width: 450px;
+  height: 450px;
+  overflow: hidden;
+  position: relative;
+  float: left;
+}
+
+.phones {
+  list-style: none;
+}
+
+.thumb {
+  float: left;
+  margin: -0.5em 1em 1.5em 0;
+  padding-bottom: 1em;
+  height: 100px;
+  width: 100px;
+}
+
+.phones li {
+  clear: both;
+  height: 115px;
+  padding-top: 15px;
+}
+
+/** Detail View **/
+img.phone {
+  float: left;
+  margin-right: 3em;
+  margin-bottom: 2em;
+  background-color: white;
+  padding: 2em;
+  height: 400px;
+  width: 400px;
+  display: none;
+}
+
+img.phone:first-child {
+  display: block;
+}
+
+
+ul.phone-thumbs {
+  margin: 0;
+  list-style: none;
+}
+
+ul.phone-thumbs li {
+  border: 1px solid black;
+  display: inline-block;
+  margin: 1em;
+  background-color: white;
+}
+
+ul.phone-thumbs img {
+  height: 100px;
+  width: 100px;
+  padding: 1em;
+}
+
+ul.phone-thumbs img:hover {
+  cursor: pointer;
+}
+
+
+ul.specs {
+  clear: both;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.specs > li{
+  display: inline-block;
+  width: 200px;
+  vertical-align: top;
+}
+
+ul.specs > li > span{
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+ul.specs dt {
+  font-weight: bold;
+}
+
+h1 {
+  border-bottom: 1px solid gray;
+}
diff --git a/app/index.html b/app/index.html
@@ -1,12 +1,34 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" ng-app="phonecatApp">
 <head>
   <meta charset="utf-8">
-  <title>My HTML File</title>
+  <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="css/app.css">
+  <link rel="stylesheet" href="css/animations.css">
+
+  <script src="bower_components/jquery/dist/jquery.js"></script>
   <script src="bower_components/angular/angular.js"></script>
+  <script src="bower_components/angular-animate/angular-animate.js"></script>
+  <script src="bower_components/angular-route/angular-route.js"></script>
+  <script src="bower_components/angular-resource/angular-resource.js"></script>
+  <script src="js/app.module.js"></script>
+  <script src="js/core/core.module.js"></script>
+  <script src="js/core/phone.factory.js"></script>
+  <script src="js/core/checkmark.filter.js"></script>
+  <script src="js/phone_list/phone_list.module.js"></script>
+  <script src="js/phone_list/phone_list.component.js"></script>
+  <script src="js/phone_list/phone_list.controller.js"></script>
+  <script src="js/phone_detail/phone_detail.module.js"></script>
+  <script src="js/phone_detail/phone_detail.component.js"></script>
+  <script src="js/phone_detail/phone_detail.controller.js"></script>
+  <script src="js/phone_detail/phone.animation.js"></script>
 </head>
 <body>
+
+  <div class="view-container">
+    <div ng-view class="view-frame"></div>
+  </div>
+
 </body>
-</html>
+</html>
diff --git a/app/js/app.js b/app/js/app.js
diff --git a/app/js/app.module.js b/app/js/app.module.js
@@ -0,0 +1,24 @@
+'use strict';
+
+/* App Module */
+
+var phonecatApp = angular.module('phonecatApp', [
+  'ngRoute',
+  'phonecat.core',
+  'phonecat.phoneList',
+  'phonecat.phoneDetail'
+]);
+
+phonecatApp.config(['$routeProvider',
+  function($routeProvider) {
+    $routeProvider.
+      when('/phones', {
+        template: '<phone-list></phone-list>'
+      }).
+      when('/phones/:phoneId', {
+        template: '<phone-detail></phone-detail>'
+      }).
+      otherwise({
+        redirectTo: '/phones'
+      });
+  }]);
diff --git a/app/js/controllers.js b/app/js/controllers.js
diff --git a/app/js/core/checkmark.filter.js b/app/js/core/checkmark.filter.js
@@ -0,0 +1,7 @@
+'use strict';
+
+angular.module('phonecat.core').filter('checkmark', function() {
+  return function(input) {
+    return input ? '\u2713' : '\u2718';
+  };
+});
diff --git a/app/js/core/core.module.js b/app/js/core/core.module.js
@@ -0,0 +1,3 @@
+'use strict';
+
+angular.module('phonecat.core', ['ngResource']);
diff --git a/app/js/core/phone.factory.js b/app/js/core/phone.factory.js
@@ -0,0 +1,9 @@
+'use strict';
+
+angular.module('phonecat.core')
+  .factory('Phone', ['$resource',
+    function($resource) {
+      return $resource('phones/:phoneId.json', {}, {
+        query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
+      });
+    }]);
diff --git a/app/js/directives.js b/app/js/directives.js
diff --git a/app/js/filters.js b/app/js/filters.js
diff --git a/app/js/phone_detail/phone.animation.js b/app/js/phone_detail/phone.animation.js
@@ -0,0 +1,52 @@
+'use strict';
+
+angular.module('phonecat.phoneDetail').animation('.phone', function() {
+
+  var animateUp = function(element, className, done) {
+    if(className != 'active') {
+      return;
+    }
+    element.css({
+      position: 'absolute',
+      top: 500,
+      left: 0,
+      display: 'block'
+    });
+
+    jQuery(element).animate({
+      top: 0
+    }, done);
+
+    return function(cancel) {
+      if(cancel) {
+        element.stop();
+      }
+    };
+  }
+
+  var animateDown = function(element, className, done) {
+    if(className != 'active') {
+      return;
+    }
+    element.css({
+      position: 'absolute',
+      left: 0,
+      top: 0
+    });
+
+    jQuery(element).animate({
+      top: -500
+    }, done);
+
+    return function(cancel) {
+      if(cancel) {
+        element.stop();
+      }
+    };
+  }
+
+  return {
+    addClass: animateUp,
+    removeClass: animateDown
+  };
+});
diff --git a/app/js/phone_detail/phone_detail.component.js b/app/js/phone_detail/phone_detail.component.js
@@ -0,0 +1,6 @@
+'use strict';
+
+angular.module('phonecat.phoneDetail').component('phoneDetail', {
+    controller: 'PhoneDetailCtrl',
+    templateUrl: 'js/phone_detail/phone_detail.html'
+  });
diff --git a/app/js/phone_detail/phone_detail.controller.js b/app/js/phone_detail/phone_detail.controller.js
@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('phonecat.phoneDetail').controller('PhoneDetailCtrl',
+  ['$routeParams', 'Phone', function($routeParams, Phone) {
+    var ctrl = this;
+    ctrl.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+      ctrl.mainImageUrl = phone.images[0];
+    });
+
+    ctrl.setImage = function(imageUrl) {
+      ctrl.mainImageUrl = imageUrl;
+    };
+  }]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use strict';

		angular.module('phonecat.core', ['ngResource']);