Week 4 - Shaping Up with Angular.JS by Code School

This week we are going to wrap up the "Shaping Up with Angular.JS" by Code School course.

Much of the work this week involves refactoring the existing code into separate directives and then grouping them into modules.

Assignment

Fork the fiddle "AngularJS: A Walk-Through - Week 3" and Name it "AngularJS: A Walk-Through - Week 4" "Update" it and "Set as base".

Assignment

Complete the levels Level 4: Custom Directives Level 5: Services

Assignment

As one completes the challenge "5.2 Refactoring into a Module", replicate the solution in the fiddle "AngularJS: A Walk-Through - Week 4" ("Update and "Set as base") . Some things to keep in mind: note: Notice that we are replicating 5.2 and not the last challenge.  This is because we will do our own example of a service in a later week. Remember the ng-app and the "StoreController" ng-controller directives are in the body tag accessible from the "Fiddle Options"; so one only needs to copy the content of the body tag to the JSFIDDLE HTML panel. Because JSFIDDLE does not support multiple files, we are going to need to build both the app.js and the products.js in the JAVASCRIPT panel; just copy and past them one after the other. Similarly, we will need to build all the separate HTML files into the single HTML panel. Luckily AngularJS provide a mechanism to simulate separate HTML template files by wrapping the HTML with filename "FILENAME" with the "<script type="text/ng-template" id="FILENAME">" and "</script>" tags. Repeat the inclusion each of the templates below the index.html content, e.g., product-description.html product-specs.html product-reviews.html product-tabs.html product-gallery.html Remember to fix the images in the gems object with the prefix: http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/

One oddity in the solution to the 5.2 challenge above is that they encapsulated the controller in the productsTabs directive but not the productReviews directive.  We will fix that.

Assignment

Move the functionality of the "ReviewController" into the "productReviews" directive. Create both "controller" and "controllerAs" properties of the "productsReviews" directive. Set the value of the controller to be the anonymous function of the "ReviewController". Set the value of the "controllerAs" to be "reviewCtrl" (in this case, include the double quotes") Delete the ReviewController definition. Delete the "ng-controller" directive from the form with name "reviewForm".

Sample of Week Result

The result of this week is an AngularJS app, "AngularJS: A Walk-Through - Week 4" that will be used as a starting point for the next week. AngularJS: A Walk-Through - Week 4 <http://jsfiddle.net/sckmkny/033hgu38/>