Timeline Week 8 - TheIronYard--Orlando/FEE--2015--SPRING GitHub Wiki

• Homework Presentations: TodoMVC
• Retrospective
  • TodoMVC + Vue JS + Local Storage / Firebase
  • TIY-Mashup
• Project Planning: TIY-Catalog
  • reference implementation: Etsy.com
  • data source (API): Etsy API
  • online merchandising concepts
  • initial user stories

As One Big Team:

• GROUP: Write more User Stories
  • brainstorm on whiteboards
  • transcribe into wiki
  • open PR for README.md
• GROUP: Codrops x3 (Due Weds):
  • estimate and divide work into 2-person teams
  • fork TIY-Catalog
  • copy index.html (from H5BP) into:
    • menu.html: Horizontal Slide-Out Menu
    • products.html: View Mode Switch
    • product.html: Responsive Product Grid
  • make corresponding SCSS/CSS files
  • use node-sass scss/*.scss --output css/ to build CSS
• GROUP: API Gymnastics
  • estimate and divide work into 2-person teams
  • fetch JSON into TIY-Assignments:apis/etsy/ for
    • products (listings) -- trending only?
    • product options (variations)
    • categories (taxonomy)
    • stores
  • start munging data into usable chunks
• SOLO: Shaping Up with Angular JS
  • complete level 1 and 2 without buying answers
  • transcribe code in TIY-Assignments:pub/

• Progress Review
• Three Little Things
• Tools on Tuesday
  • Angular JS
    • bower install angular
    • wiredep -s index.html
    • angularized chessboard
    • reference documentation
  • Gulp JS
    • npm install --global gulp
    • gulp -> Error: No local gulp found...
    • npm install --save-dev --link gulp
    • gulp -> Error: No gulpfile found...
    • atom gulpfile.js

      var gulp = require('gulp');
      
      gulp.task('default', function(){
        console.log('Hello, Gulp!');
      });

    • Hey, look, gulp.watch() is pretty cool!
    • use gulp-util instead of console?
    • check out recipes and plugins
    • autoload plugins with `gulp-load-plugins'
    • CDNify Bower deps with `gulp-google-cdn'

• GROUP: Continue working on Codrops
• GROUP: Start Angularizing!
• GROUP: Setup build tasks with gulp:
  • gulp sass -- build *.scss to *.css
  • gulp sass:watch -- build on file change
  • gulp serve -- serve angular/ using Browser Sync
  • gulp serve:watch -- serve and watch files, too!
• SOLO: Shaping Up with Angular JS
  • levels 2 & 3
  • continue updating TIY-Assignments:pub/

• Progress Review
  • Codrops prototypes
  • Build tasks
• Three Little Things
• Routing Concepts
  • What is a route? Why do I need one?
  • Reusable templates demo:
    • use ng-include to include menu.html and products.html in index.html
    • extract common boilerplate from menu.html and products.html
    • add CSS links to index.html
    • explain: selecting categories in menu.html includes either
      • products.html with a filtered list of products
      • about.html
    • wire navs in menu.html to change page:

    <!-- Somewhere in `menu.html`... -->
    <nav>
      <a href ng-click="app.page = 'products'; app.category = 'men'">Stuff for Men</a>
      <!-- More categories... -->
      <a href ng-click="app.page = 'about'">About</a>
    </nav>
    <!-- Additional markup, probably... -->
    <div class="container" ng-include="app.page + '.html'"></div>

  • That's ugly... How do I write a route instead?
    • Using ngRouter...
  • What about a route inside of a route?
    • use ng-include to include product.html inside products.html
    • use ng-switch to only display product.html in the "grid" view mode
    • refactor routes to ui-router states:
      • about state
      • products state with category slug
      • nested products.grid and products.list states
  • These Angular UI folks are smart!
    • Angular UI Bootstrap
    • ng-grid
    • notable others...

• GROUPS: Continue working on Angularizing:
  • integrate templates into index.html
  • complete routing examples
  • start getting data into templates?
• SOLO: Shaping Up with Angular JS
  • levels 3 & 4
  • TIY-Assignments:pub/

• Progress Review
• Three Little Things
• Getting Data and Dependency Injection
  • How do I get data with Angular JS? No jQuery.get() here...
  • What are Services and how do I use them?
    • Dependency Injection (DI) in brief...
    • Requesting the $http service...
  • Using the $http service to get data:

  angular.module('etsyCatalog', [ ])
    .controller('MainController', [ '$http', function($http){
      this.products = [ ];
  
      $http.get('/path/to/products.json').then(function(products){
        // now what?
      });
    } ])
  ; // END module(etsyCatalog)

  • Using self as an alias for this... ick.
  • A better approach with Restangular:

  angular.module('etsyCatalog', [ 'restangular' ])
    .controller('MainController', [ 'Restangular', function(Restangular){
      Restangular.setBaseUrl('/path/to');
  
      this.products = Restangular.all('products').getList().$object;
      // `$object` is an empty `Array` that is filled with data on success
    } ])
  ; // END module(etsyCatalog)

• Custom Services
  • You can define your own Services for injection!
  • Just use angular.factory (angular.service is confusing):

  angular.module('etsyCatalog', [ 'restangular' ])
    .factory('Products', [ 'Restangular', function(Restangular){
      Restangular.setBaseUrl('/path/to'); // We might repeat this a little...
  
      return Restangular.service('products');
    } ])
    .controller('MainController', [ 'Products', function(Products){
      this.products = Products.getList().$object;
    } ])
  ; // END module(etsyCatalog)

• GROUP: Fully functional Product Catalog!
  • all product user stories complete
  • BEAST MODE: add to cart?
• SOLO: Shaping Up with Angular JS
  • level 4 & 5 + catchup
  • TIY-Assignments:pub/