chore(structure): refactor to Angular style guide conventions

Reorganize application code to be more closely aligned with the Angular Style Guide. This is for the final version of the app and hasn’t been factored into steps or into the tutorial text. 1. Folders-by-feature structure: /core, /phone_list, /phone_detail https://github.com/johnpapa/angular-styleguide#style-y152 2. App root module depends on feature modules and core module. https://github.com/johnpapa/angular-styleguide#style-y165 3. One component per file. Each controller/factory/filter in its own file. https://github.com/johnpapa/angular-styleguide#style-y001 4. Feature+type file naming convention. https://github.com/johnpapa/angular-styleguide#style-y120 5. Module files, *.module.js for each module. https://github.com/johnpapa/angular-styleguide#style-y127 6. Component registration with getters https://github.com/johnpapa/angular-styleguide#style-y022 7. Named functions https://github.com/johnpapa/angular-styleguide#style-y024 8. Manual injection https://github.com/johnpapa/angular-styleguide#style-y091 9. controllerAs syntax https://github.com/johnpapa/angular-styleguide#style-y030 Related to angular/angular.js#13312
teropa · Dec 14, 2015 · d6fb83e · d6fb83e
1 parent 5e54104
commit d6fb83e
Show file tree

Hide file tree

Showing 29 changed files with 335 additions and 320 deletions.
diff --git a/app/index.html b/app/index.html
@@ -12,11 +12,15 @@
   <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.js"></script>
-  <script src="js/animations.js"></script>
-  <script src="js/controllers.js"></script>
-  <script src="js/filters.js"></script>
-  <script src="js/services.js"></script>
+  <script src="js/app.module.js"></script>
+  <script src="js/core/core.module.js"></script>
+  <script src="js/core/checkmark.filter.js"></script>
+  <script src="js/core/phone.factory.js"></script>
+  <script src="js/phone_detail/phone_detail.module.js"></script>
+  <script src="js/phone_detail/phone.animation.js"></script>
+  <script src="js/phone_detail/phone_detail.controller.js"></script>
+  <script src="js/phone_list/phone_list.module.js"></script>
+  <script src="js/phone_list/phone_list.controller.js"></script>
 </head>
 <body>
 

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';
+
+angular.module('phonecatApp', [
+    'ngRoute',
+    'phonecat.core',
+    'phonecat.detail',
+    'phonecat.list'
+  ]).config(['$routeProvider',
+    function($routeProvider) {
+      $routeProvider.
+        when('/phones', {
+          templateUrl: 'js/phone_list/phone_list.html',
+          controller: 'PhoneListCtrl',
+          controllerAs: 'vm'
+        }).
+        when('/phones/:phoneId', {
+          templateUrl: 'js/phone_detail/phone_detail.html',
+          controller: 'PhoneDetailCtrl',
+          controllerAs: 'vm'
+        }).
+        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,10 @@
+'use strict';
+
+angular.module('phonecat.core')
+  .filter('checkmark', checkmarkFilter);
+
+function checkmarkFilter() {
+  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,5 @@
+'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,12 @@
+'use strict';
+
+angular.module('phonecat.core')
+  .factory('Phone', Phone);
+
+Phone.$inject = ['$resource'];
+
+function Phone($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/animations.js → app/js/phone_detail/phone.animation.js b/app/js/animations.js → app/js/phone_detail/phone.animation.js
@@ -1,6 +1,9 @@
-var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
+'use strict';
 
-phonecatAnimations.animation('.phone', function() {
+angular.module('phonecat.detail')
+  .animation('.phone', phoneAnimation);
+
+function phoneAnimation() {
 
   var animateUp = function(element, className, done) {
     if(className != 'active') {
@@ -49,4 +52,4 @@ phonecatAnimations.animation('.phone', function() {
     addClass: animateUp,
     removeClass: animateDown
   };
-});
+}
diff --git a/app/js/phone_detail/phone_detail.controller.js b/app/js/phone_detail/phone_detail.controller.js
@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('phonecat.detail')
+  .controller('PhoneDetailCtrl', PhonecatDetailCtrl);
+
+PhonecatDetailCtrl.$inject = ['$routeParams', 'Phone'];
+
+function PhonecatDetailCtrl($routeParams, Phone) {
+  var vm = this;
+
+  vm.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+    vm.mainImageUrl = phone.images[0];
+  });
+
+  vm.setImage = function(imageUrl) {
+    vm.mainImageUrl = imageUrl;
+  };
+}
diff --git a/app/js/phone_detail/phone_detail.html b/app/js/phone_detail/phone_detail.html
@@ -0,0 +1,118 @@
+<div class="phone-images">
+  <img ng-src="{{img}}"
+       class="phone"
+       ng-repeat="img in vm.phone.images"
+       ng-class="{active: vm.mainImageUrl==img}">
+</div>
+
+<h1>{{vm.phone.name}}</h1>
+
+<p>{{vm.phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in vm.phone.images">
+    <img ng-src="{{img}}" ng-click="vm.setImage(img)">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in vm.phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{vm.phone.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{vm.phone.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{vm.phone.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{vm.phone.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{vm.phone.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{vm.phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{vm.phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{vm.phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{vm.phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{vm.phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{vm.phone.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{vm.phone.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in vm.phone.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{vm.phone.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{vm.phone.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{vm.phone.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{vm.phone.display.touchScreen | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{vm.phone.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{vm.phone.hardware.usb}}</dd>
+      <dt>Audio / headphone jack</dt>
+      <dd>{{vm.phone.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{vm.phone.hardware.fmRadio | checkmark}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{vm.phone.hardware.accelerometer | checkmark}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{vm.phone.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{vm.phone.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{vm.phone.additionalFeatures}}</dd>
+  </li>
+</ul>
diff --git a/app/js/phone_detail/phone_detail.module.js b/app/js/phone_detail/phone_detail.module.js
@@ -0,0 +1,7 @@
+'use strict';
+
+angular.module('phonecat.detail', [
+  'ngRoute',
+  'ngAnimate',
+  'phonecat.core'
+]);
diff --git a/app/js/phone_list/phone_list.controller.js b/app/js/phone_list/phone_list.controller.js
@@ -0,0 +1,12 @@
+'use strict';
+
+angular.module('phonecat.list')
+  .controller('PhoneListCtrl', PhoneListCtrl);
+
+PhoneListCtrl.$inject = ['Phone'];
+
+function PhoneListCtrl(Phone) {
+  var vm = this;
+  vm.phones = Phone.query();
+  vm.orderProp = 'age';
+}
diff --git a/app/partials/phone-list.html → app/js/phone_list/phone_list.html b/app/partials/phone-list.html → app/js/phone_list/phone_list.html
@@ -3,9 +3,9 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      Search: <input ng-model="query">
+      Search: <input ng-model="vm.query">
       Sort by:
-      <select ng-model="orderProp">
+      <select ng-model="vm.orderProp">
         <option value="name">Alphabetical</option>
         <option value="age">Newest</option>
       </select>
@@ -15,7 +15,7 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
+        <li ng-repeat="phone in vm.phones | filter:vm.query | orderBy:vm.orderProp"
             class="thumbnail phone-listing">
           <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
           <a href="#/phones/{{phone.id}}">{{phone.name}}</a>

diff --git a/app/js/phone_list/phone_list.module.js b/app/js/phone_list/phone_list.module.js
@@ -0,0 +1,5 @@
+'use strict';
+
+angular.module('phonecat.list', [
+  'phonecat.core'
+]);
diff --git a/app/js/services.js b/app/js/services.js
diff --git a/app/partials/.gitkeep b/app/partials/.gitkeep