From 9d791e6fa9923bd22b9c8d89f23caa46fe253a6e Mon Sep 17 00:00:00 2001 From: David Rogers Date: Tue, 24 Feb 2015 01:04:16 -0500 Subject: [PATCH 1/5] Flag in the sand... --- Assignments/3X--Dependency-Injection/README.md | 0 Notes/2015-02-26/README.md | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100755 Assignments/3X--Dependency-Injection/README.md create mode 100755 Notes/2015-02-26/README.md diff --git a/Assignments/3X--Dependency-Injection/README.md b/Assignments/3X--Dependency-Injection/README.md new file mode 100755 index 0000000..e69de29 diff --git a/Notes/2015-02-26/README.md b/Notes/2015-02-26/README.md new file mode 100755 index 0000000..e69de29 From 98eb2e1b569fbe4ecc02848dac139b5901534a3a Mon Sep 17 00:00:00 2001 From: David Rogers Date: Tue, 24 Feb 2015 01:08:57 -0500 Subject: [PATCH 2/5] Just ripping out of the wiki... --- Notes/2015-02-26/README.md | 49 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/Notes/2015-02-26/README.md b/Notes/2015-02-26/README.md index e69de29..6986e6e 100755 --- a/Notes/2015-02-26/README.md +++ b/Notes/2015-02-26/README.md @@ -0,0 +1,49 @@ +Assignment 3X: How about a nice Dependency Injection? + +* [ ] **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: + ```javascript + 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`](https://github.com/mgonto/restangular): + ```javascript + 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): + ```javascript + 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) + ``` + From 52a3fa66cb9eb4c8903ce8c0dc04e629cecc98a1 Mon Sep 17 00:00:00 2001 From: David Rogers Date: Tue, 24 Feb 2015 01:10:25 -0500 Subject: [PATCH 3/5] A little more than a flag in the sand... --- Assignments/3X--Dependency-Injection/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Assignments/3X--Dependency-Injection/README.md b/Assignments/3X--Dependency-Injection/README.md index e69de29..a127af3 100755 --- a/Assignments/3X--Dependency-Injection/README.md +++ b/Assignments/3X--Dependency-Injection/README.md @@ -0,0 +1,9 @@ +#### 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/` + From 15c753cb369f79e903eadbac68f973fc25f5dd69 Mon Sep 17 00:00:00 2001 From: David Rogers Date: Tue, 24 Feb 2015 18:08:24 -0500 Subject: [PATCH 4/5] An actual assignment! Mostly... --- .../3X--Dependency-Injection/README.md | 30 ++++++++++++++----- Notes/2015-02-26/README.md | 2 +- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/Assignments/3X--Dependency-Injection/README.md b/Assignments/3X--Dependency-Injection/README.md index a127af3..542be3a 100755 --- a/Assignments/3X--Dependency-Injection/README.md +++ b/Assignments/3X--Dependency-Injection/README.md @@ -1,9 +1,23 @@ -#### 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/` +# 3X -- How About a Nice Dependency Injection? + +## Description + +[The `$http` service]() works more or less like `jQuery.ajax`. Give it a bunch of options, and it hands back a "then-able" Promise; use `$http.get` et al for convenient shortcuts. In order to use it in your Controller, we tell Angular to _inject_ it with those funky array annotations. + +[Restangular](https://github.com/mgonto/restangular/) is a much more friendly interface that wraps `$http`. Using some recipes from the documentation, [we can configure it](http://j.mp/1Bac2un) with [`Module.config()`](http://j.mp/1BacBVg) and and use [`Module.factory()`](http://j.mp/1BabJ2N) to create [Service instances](http://j.mp/1BacoBb) that represent our Models from the API. + +Use your new powers to fetch the data from your cached API and populate out the pages with _real(ish) data_. This might take a while... + +### Shaping Up with Angular JS + +Work on the next two levels and keep your code in `TIY-Assignments` as before. + +## Requirements + +* _WIP Issue:_ `3X -- Dependency Injection` + * link to any PRs that you open in `TIY-Catalog` + * link to your PR in `TIY-Assignments` +* _WIP Branch:_ + * `TIY-Assignments:feature/3x--dependency-injection` + * `TIY-Catalog:feature/angular/all-the-data` diff --git a/Notes/2015-02-26/README.md b/Notes/2015-02-26/README.md index 6986e6e..17568c4 100755 --- a/Notes/2015-02-26/README.md +++ b/Notes/2015-02-26/README.md @@ -3,7 +3,7 @@ Assignment 3X: How about a nice Dependency Injection? * [ ] **Progress Review** * [ ] **Three Little Things** * [ ] **Getting Data and Dependency Injection** - * How do I get data with Angular JS? No `jQuery.get()` here... + * angularjs -- Without using jQuery, how do I get data into my controller? * What are Services and how do I use them? * Dependency Injection (DI) in brief... * Requesting the `$http` service... From 50370e4a46eefb3cd07b3c0f54e61e172574d137 Mon Sep 17 00:00:00 2001 From: David Rogers Date: Wed, 25 Feb 2015 16:39:47 -0500 Subject: [PATCH 5/5] So we did this today, in fact... --- .../README.md | 4 ++-- Notes/{2015-02-26 => 2015-02-25}/README.md | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename Assignments/{3X--Dependency-Injection => 31--Dependency-Injection}/README.md (92%) rename Notes/{2015-02-26 => 2015-02-25}/README.md (100%) diff --git a/Assignments/3X--Dependency-Injection/README.md b/Assignments/31--Dependency-Injection/README.md similarity index 92% rename from Assignments/3X--Dependency-Injection/README.md rename to Assignments/31--Dependency-Injection/README.md index 542be3a..230d9dc 100755 --- a/Assignments/3X--Dependency-Injection/README.md +++ b/Assignments/31--Dependency-Injection/README.md @@ -1,4 +1,4 @@ -# 3X -- How About a Nice Dependency Injection? +# 31 -- How About a Nice Dependency Injection? ## Description @@ -14,7 +14,7 @@ Work on the next two levels and keep your code in `TIY-Assignments` as before. ## Requirements -* _WIP Issue:_ `3X -- Dependency Injection` +* _WIP Issue:_ `31 -- Dependency Injection` * link to any PRs that you open in `TIY-Catalog` * link to your PR in `TIY-Assignments` * _WIP Branch:_ diff --git a/Notes/2015-02-26/README.md b/Notes/2015-02-25/README.md similarity index 100% rename from Notes/2015-02-26/README.md rename to Notes/2015-02-25/README.md