We moved! See what you are missing!

• Dealing with IE Family
• AngularJS Workshop - From Zero to Ninja Turtle Jr
• Running Grunt Tasks from WebStorm or Intellij
• And much more...

Come and read us!! We are moving our blog into a new site with a much more pretentious goal. We are going to teach how to be AngularJS Ninjas!!! That's right! We have taken a couple of weeks to prepare our first workshop, absolutely free!!!!

http://ng-learn.org/

We moved!!!!! Follow us to our new Site at www.ng-learn.org

Come and read us!! We are moving our blog into a new site with a much more pretentious goal. We are going to teach how to be AngularJS Ninjas!!! That's right! We have taken a couple of weeks to prepare our first workshop, absolutely free!!!!

http://ng-learn.org/

AngularJS -Filtering Results - Basic Version

In the following example, we will provide the user with a two inputs (name and last name) for them to filter our results set. In this case, we nest all our input models into one object called 'filters'. All the magic happens on the html. In our 'repeat' section, we apply a filter and we pass in our filters object. Angular will look into each object we iterate over, compare our filters.name and filters.lastName looking for model's attributes name matching 'name' and 'lastName'. If it finds those attributes, it will compare the values and add the model to our subset now displayed list of results.

    <div><h2>Filters:</h2>
    Name: <input type="text" ng-model="filters.name"/>
    Last Name: <input type="text" ng-model="filters.lastName"/>
   </div>
   <div >
     <h2>List of results:</h2>
     <div ng-repeat="person in results | filter:filters">
       {{person.name}} {{person.lastName}}
     </div>
   </div>

Note: n/a

Useful links:

• AngularJS Docs: filter

Working Example: Plunkr

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