Skip to content

Timeline Week 8

Jump to bottom
David Rogers edited this page Feb 23, 2015 · 1 revision

Monday

  • 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

HOMEWORK

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):
  • 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/

Tuesday

  • Progress Review
  • Three Little Things
  • Tools on Tuesday
    • Angular JS
    • 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'

HOMEWORK

  • 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/

Wednesday

  • 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!

HOMEWORK

  • 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/

Thursday

  • 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)

HOMEWORK

  • 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/
Clone this wiki locally