AngularJS - Learning resources

Offical Docs

• Developer Guide: http://docs.angularjs.org/guide
• API Reference: http://docs.angularjs.org/api/
• Short Tutorial: http://docs.angularjs.org/tutorial

Testing related

• E2E Testing: [http://docs.angularjs.org/guide/devguide.e2e-testing](http://docs.angularjs.org/guide/devguide.e2e-testing)
• Unit Testing: [http://docs.angularjs.org/guide/devguide.unit-testing](http://docs.angularjs.org/guide/devguide.unit-testing)

Must Read

• FAQ: http://docs.angularjs.org/misc/faq
• Scope Prototypal Inheritance: https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance
• http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html

Must watch

• Best Practices Video -> http://www.youtube.com/watch?v=ZhfUv0spHCY
• http://www.youtube.com/user/angularjs
• http://www.egghead.io -> excellent videos! Extremely recommended as primary resource!!!

Other Learning Resources:

• http://www.yearofmoo.com
• http://briantford.com/blog
• http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
• http://blog.angularjs.org
• http://www.bennadel.com

Examples

• https://github.com/angular/angular.js/wiki/JsFiddle-Examples

Cheat Sheet

• http://www.cheatography.com/proloser/cheat-sheets/angularjs

UI bootstrap directives

• http://angular-ui.github.com

Modules

• http://ngmodules.org

Small App Examples

• https://github.com/GoogleChrome/wReader-app
• http://blog.angularjs.org/2012/11/angularjs-example-applications.html
• https://github.com/IgorMinar/foodme/tree/master/app/js
• https://docs.google.com/document/pub?id=1Fzq60IBaSf5mnsLWhig5nhZ9cJT85sresp0NqNIwh1I

Javascript Gotchas

• http://bonsaiden.github.io/JavaScript-Garden/

AngularJS - Ordering a set of results +/- more option, iterating over an array

In the following example, we will once again provide the user with a set of options to order our results set. In this case, our order criteria options are sourced in an array. Depending on your use case, you may find the array fashion more practical than the object style. You should learn both.

    <div>
      <h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder3'
           data-ng-options="option.value as option.name for option in [{'value':'+name','name':'Name: A-Z'},{'value':'-name','name':'Name: Z-A'}, {'value':'+lastName','name':'Last Name: A-Z'}, {'value':'-lastName','name':'Last Name: Z-A'}, {'value':'+age','name':'Age: Young to Experienced'}, {'value':'-age','name':'Age: Experienced to Young'}]" 
           data-ng-init="selectedSortOrder3='+age'">
      </select>  
   </div>
   <div>
     <h3>List of results:</h3>
     <div ng-repeat="person in results | orderBy:selectedSortOrder3">
       {{person.name}} {{person.lastName}} - {{person.age}}
     </div>
   </div>

Note: In order to iterate over this array, Angular provides us with a dsl expression we can use in the ng-options. In this case it will be 'option.value as option.name for option in in optionsSet'. There are other available expressions:

• label for value in array
• select as label for value in array
• label group by group for value in array
• select as label group by group for value in array

Useful links:

• AngularJS Docs: select

Working Example: Plunkr

AngularJS - Ordering a set of results +/- more options, iterating over an object

In the following example, we take advantage of more angular magic. To each string representing the search criteria we will add a '+' or a '-' to indicate the reverse or not direction of our set order.
As we get more advanced on our order criteria, we moved from a simple string to an object holding the key value map.
Example: {'+name': 'Name: A-Z','-name': 'Name: Z-A'}

    <div>
      <h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder2'
           data-ng-options="k as v for (k,v) in {'+name': 'Name: A-Z','-name': 'Name: Z-A', '+lastName': 'Last Name: A-Z', '-lastName': 'Last Name: Z-A ', '+age': 'Age: Young to Experienced', '-age': 'Age: Experienced to Young' }" 
           data-ng-init="selectedSortOrder2='+name'">
      </select>  
   </div>
   <div>
     <h3>List of results:</h3>
     <div ng-repeat="person in results | orderBy:selectedSortOrder2">
       {{person.name}} {{person.lastName}} - {{person.age}}
     </div>
   </div>

Note: In order to iterate over this object, Angular provides us with a dsl expression we can use in the ng-options. In this case it will be 'k as v for (k,v) in optionsSet'. There are other available expressions:

• label for (key , value) in object
• select as label for (key , value) in object
• label group by group for (key, value) in object
• select as label group by group for (key, value) in object

Useful links:

• AngularJS Docs: select

Working Example: Plunkr

AngularJS - Ordering a set of results - Basic version

In the following example, we let the user select from a drop down list the order criteria he/she wants to apply. The we iterate over our results and apply the selected order. Angular is actually reordering the set based on property name matching. As long as the string representing the order criteria matches a property in our iterated elements (person in this example), the magic occurs.

    <div>
      <h3>Order By:</h3>
      <select data-ng-model='selectedSortOrder'
           data-ng-options="option for option in ['name', 'lastName', 'age']" 
           data-ng-init="selectedSortOrder='name'">
      </select>
   </div>
   <div >
     <h3>List of results:</h3>
     <div ng-repeat="person in results | orderBy:selectedSortOrder">
       {{person.name}} {{person.lastName}} - {{person.age}}
     </div>
   </div>

Note:

Useful links:

• AngularJS Docs: orderBy

Working Example: Plunkr

AngularJS - Draw a Select with a default option

In the following example, we set a default option for our users to see. We could leave it blank but it would not help our user. We could also preselect one of our options as the default one but sometimes we do not want to influence or dictate our user's selection.

    <form name="myForm">
      <select ng-options="color for color in ['red', 'blue', 'yellow']" ng-model="color1">
        <option value="" selected>--Please select your color--</option>
      </select>
    </form>

Note: it is important that our default options has value set to nothing.

Useful links:

• AngularJS Docs: select

Working Example: Plunkr

AngularJS - Checkbox Default Value

In the following example, we set the values for our checkbox using ng-checked. The default values are set using ng-init; the same result is accomplished by initializing the value in the controller. When the user marks the checkbox as checked, we use the ng-click to change the value from true to false, or vice versa.

<div ng-init="options={};options.one.selected=true">
       <input id="option_1" type="checkbox" 
                   ng-click="options.one.selected=!options.one.selected" 
                   ng-checked="options.one.selected">
       <label for="option_1" >Option 1</label>
 </div>

Note: ng-checked expects an expression and it does not work with ng-model in the same element.

Useful links:

• AngularJS Docs: ngChecked

Working Example: Plunkr