Merge pull request #338 from TheIronYard--Orlando/feature/3X--depende…

…ncy-injection

Assignment 3X: How about a nice Dependency Injection?

Assignments/31--Dependency-Injection/README.md

@@ -0,0 +1,23 @@
+# 31 -- 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:_ `31 -- 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`
+

Notes/2015-02-25/README.md

@@ -0,0 +1,49 @@
+Assignment 3X: How about a nice Dependency Injection?
+
+* [ ] **Progress Review**
+* [ ] **Three Little Things**
+* [ ] **Getting Data and Dependency Injection**
+  * 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...
+  * 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)
+  ```
+