Sunday, April 5, 2015

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

This week we are going to learn the basics of AngularJS.

Assignment
Fork the fiddle "AngularJS: A Walk-Through - Week 1" and
  • Name it "AngularJS: A Walk-Through - Week 2".
  • In "External Resources" add Bootstrap 3.1.1 from the following CDN
<//dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/bootstrap.min.css>

note: Using a newer version of Bootstrap (from a standard CDN) will introduce subtle differences from the Code School example. 
  • "Update" it and "Set as base". 

Assignment
Create a free account at:

Code School 
<http://www.codeschool.com>

Start the course "Shaping up with Angular.js" listed under the JavaScript language path.

Assignment
Complete the levels
  • Level 1: Flatlander's Gem Store
  • Level 2: Built-in Directives

Assignment
As one completes the final challenge "2.10 Using Gallery Controller", replicate the solution in the fiddle "AngularJS: A Walk-Through - Week 2" ("Update and "Set as base") . Some things to keep in mind:
  • As JSFIDDLE does not have a mechanism to modify the HTML tag, use the "Fiddle Options":  "Body tag" setting instead, e.g.,
    <body class="list-group"  ng-app="gemStore" ng-controller="StoreController as store">
  • Instead of linking to a external JavaScript file "app.js" in the <head> as in the  Code School example (not a feature of JSFIDDLE), we are going to simply insert the JavaScript in JSFIDDLE by typing in the "JavaScript" panel.
  • To show the images, add the prefix:
    http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/
    before each of the image strings.

Sample of Week Result
The result of this week is an AngularJS app, "AngularJS: A Walk-Through - Week 2" that will be used as a starting point for the next week.

AngularJS: A Walk-Through - Week 2
<http://jsfiddle.net/sckmkny/n6p5v0b9/>
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)