| Meta |
| Through-out this walk-through, information that is actionable, e.g., assignments, is provided inside blocks like this "Meta" block. Recommended; provide email address (to the right) for an email of each week's materials on Monday mornings. Comments (questions, tips, answers, etc.) are encouraged. |
The material is arranged to deliver about five hours of work each week; new material will be released on Monday mornings. The walk-through is expected to take six weeks.
- Week 1 - Expectations, Prerequisites, Motivation, and Setup
- Week 2 - Shaping Up with Angular.JS by Code School
- Week 3 - Shaping Up with Angular.JS by Code School (Continued)
- Week 4 - Shaping Up with Angular.JS by Code School (Continued)
- Week 5 - Customized Services and Routes
- Week 6 - Style Guides
- Week 7 - Style Guides (Continued)
- Week 8 - Promises
Prerequisites
It will be difficult for one to follow this walk-through without a basic understanding of HTML/CSS and JavaScript.
While there are many resources on HTML/CSS and JavaScript available, the courses at Code School <https://www.codeschool.com> are particularly good (includes hands-on coding challenges to test one's knowledge along the way).
What and Why Client-Side JavaScript
Until fairly recently (several years ago), it was common to see arguments for and against client-side JavaScript; the alternative being server-side HTML rendering. Today, however, there is a growing consensus that client-side JavaScript is here to stay and will be increasingly used.
| Assignment |
| Read articles comparing server-side and client-side rendering; in particular read the following: Server vs client side rendering (AngularJS vs server side MVC)<http://technologyconversations.com/2014/07/10/server-vs-client-side-rendering-angularjs-vs-server-side-mvc/> |
What and Why a Model-View-Controller (MVC) Framework
The key to understanding what and why a MVC framework is to realize that building useful client-side application is inherently complicated. Using tools (like a MVC framework) provide a reusable structure to organize the code into distinct and recognizable sections.
| Assignment |
| Read articles on MVC frameworks and the concept of separation of concerns (SoC); in particular read the following: Separation of concerns - Wikipedia, the free encylopedia <http://en.wikipedia.org/wiki/Separation_of_concerns> MVP Architecture - Google Chrome <https://developer.chrome.com/apps/app_frameworks> |
Why AngularJS
First, there are a number of popular JavaScript MVC frameworks available today: Ember.js, Backbone.js, AngularJS, and the new kid on the block, React. Of these, AngularJS is the oldest (2009) and yet continues to grow in popularity.
One active concern in the development of JavaScript MVCs is to improve the rendering performance; React differentiates itself with its virtual DOM diff implementation for ultra-high performance. AngularJS is preparing to release Angular 2 to improve performance.
Deep Tree: Speed
(minute 35:30) ng-conf 2015 Day 1 Keynote - Brad Green and Igor Minar
| Assignment |
| Read the following: The Languages and Frameworks That You Should Learn in 2015 | Tutorialzine <http://tutorialzine.com/2014/12/the-languages-and-frameworks-that-you-should-learn-in-2015/> |
| Assignment |
| Watch the following (Yes, the whole 40 minutes): ng-conf 2015 Day 1 Keynote - Brad Green and Igor Minar <http://www.ng-conf.org/> |
Setup
The examples in this walk-through will be developed in JSFIDDLE <http://jsfiddle.net/>. JSFIDDLE is a free online JavaScript IDE that allows one to quickly prototype web applications.
Tips on Using JSFIDDLE:
- One can create a free account to store "fiddles" (prototype web applications).
- Name your fiddle with "Fiddle Options" and update often (use the "Set as base" to commit changes more permanently).
- Use the "Debug on mobile" button to open up a separate tab/window to allow for easier debugging in the browser.
- Fiddle setup for this walk-through:
- Leave the JavaScript library as "No-Library (pure JS)"
- Set the JavaScript to load with "No wrap - in <head>".
- In "External Resources" add AngularJS 1.3.9 from the following CDN:
<//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js>
note: notice the missing http: or https: (this allows the browser to choose the protocol based on the protocol of the calling HTML page).
| Assignment |
| Setup a JSFIDDLE <http://jsfiddle.net/> account and orient oneself to its use. Create a new fiddle:
|
| Sample of Week Result |
| The result of this week is do nothing fiddle named "AngularJS: A Walk-Through - Week 1" that will be used as a starting point for the next week. AngularJS: A Walk-Through - Week 1 <http://jsfiddle.net/sckmkny/dm02pd0s/> |
