Day 1

Congratulations on your decision to take the initiative to start this virtual bootcamp for AngularJS.  Part of the reason I think you can learn better from this is because of habit forming.  Your decision to dedicate 7 consecutive days means you are serious and will definitely learn more than if you would at your own pace.   Now promise me you won’t give up and participate for the entire 7 days.

Let’s begin!

Correct me if I’m wrong but the resistance to learn a new language or framework is barrier to entry.  These barriers are installing new software, setting up a server, configuration, and new terminology which can be intimidating.   Directives, MVVM, modules, transclusion, scope, etc..  Out of context, these words don’t mean squat.  It’s really unnecessary to begin this way.  What works is teaching these concepts through examples and that’s where we will start.

At a minimum you should already know javascript syntax and the basics such as variables, functions, loops, expressions, conditional statements, and callbacks.  Object-orientation helps too such as knowing the difference between prototypal inheritance vs classical inheritance.  If you’ve used jQuery or any other javascript framework then you already know how to install AngularJS.  It’s just javascript files that need to be included in your HTML file using the <script> tag.

AngularJS works mainly by taking advantage of HTML attributes.  As an example <div title=”my title”></div>, the div is a tag and title is the attribute, so we will be using many attributes which are called directives such as “ng-app, ng-model, ng-repeat”,   I think it’s easier to think of them as bindings that allow complex javascript objects to manipulate HTML in the document object model (DOM).

Output of AngularJS happens after javascript is rendered so any output which is binded to variables should be placed inside nested-braces {{variable}}.  The variable inside the html attribute is dependent a directive and controller.  For a list of directives, take a look at the API.

The following concepts you should know are expressions and filters, separated by the | pipe symbol.  The pipe symbol seems identical to its usage in unix, where you can combine multiple expressions.  Expressions are a bit complex and as filters go, there’s nothing new here as a concept.  Filters purify data to your specifications.  In the case of AngularJS, expressions filters can be values after the pipe.  AngularJS has pre-defined filters but you can make custom ones.  Example:

<li ng-repeat="name in names | orderBy: 'name'"></li>

 The “orderBy” is a predefined filter that sorts the html list by the name field.  Expressions on the other hand are more flexible based on the angular modules, and can contain, variables, booleans, or functions, so I won’t try to overwhelm you now with details, because you will see them in the following videos.

At this point I recommend watching a few videos, after reviewing a few resources I suggest starting at the 10min mark and stopping at 22:50 http://youtu.be/i9MHigUZKEM?t=10m10s In that video, Dan types out his directive with the “data” prefix.  Other coders do not include the prefix and AngularJS still works, so save some letters and start with “ng”.

The modules created with AngularJS are separate javascript files so in this section you will learn the syntax for them.  This is unique to AngularJS so I suggest remembering this part thoroughly.  First example:

var app = angular.module('myModule', []); // initiate model
app.controller('CustomController', function(){
// logic here
}); // create controller function

Note that the “CustomController” name should follow MVC convention and be camel case.  I have yet to figure out why the second parameter of empty brackets is necessary.  To include that controller in your HTML file you will add it as an attribute with a value as such:

<div ng-controller="CustomController">{{ variable }}</div>

Any child tag of that DIV will be able to utilize variables (from the $scope) inside the CustomController function you created.

Two-way data binding is another great feature of AngularJS which is built-in unlike jquery.  This is useful for input validation and making HTML dynamic from user-interaction.  Traditionally, browsers have listeners and respective javascript functions such as “onfocus, onblur, onchange, onclick” to have custom controls.   I believe the two-way data binding is at a higher level of abstraction which utilizes these fundamental event listeners.

By now you should be aware of the basics and not be intimidated by any tutorials, so let’s start with the best tutorial I found where you can code within the web page itself.  Click here to start the interactive tutorial at Code School. You don’t have to create an account to do the course because it is free at the time of this writing.  Completing level 1 + 2 took me about 2 hours. After completing the tutorial return here.  Hint: when you get to the GalleryController and you have to use ng-repeat to list the images, there’s one task that requires you to use the javascript property .length which is not seen in the instructions.

You should also continue watching Dan’s video from above which explains technical stuff with diagrams.  After all this you will probably have spent 2.5 hours.  Hopefully you have gone through all this without breaks.  Keep it up and stay on track!


Only continue reading here if you have completed Code Schools level 1 + 2 tutorials.

Things you should know well by now from watching the video and tutorial:

DIRECTIVES

ng-app
ng-controller
ng-show
ng-hide
ng-repeat
ng-init
ng-click
ng-class
ng-src

FILTERS

currency
date
limitTo
lowercase
uppercase
orderBy

Aliases for controllers such as  “GalleryController as gallery”.
If you have experience with MySQL queries then you know exactly what this means.  An alias is usually a shorter word that refers to an object with a long, not semantic name, or expression.  MySQL example:

"SELECT CONCAT(', ', lastName, firstName) AS 'full_name' FROM employees";

Aliases for “for-in” loops such as “product in store.products”.
Several languages use for-in loops to loop through an array.

To validate your knowledge I suggest looking at this easy to read post with code examples by Srikar Gudipati.

After completing your day 1 training, you must complete the following task, it will only take you 5 minutes:
1. Visit this post day-1-results
2. Click the edit button
3. Scroll to the bottom of the page and answer the 3 questions from the top.

Finally please vote on this poll for your preferred learning style.

How do you learn best?

View Results

Loading ... Loading ...

Learn coding in a collaborative team environment.