Sunday, December 29, 2013

We moved! See what you are missing!



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!!!!


Tuesday, November 5, 2013

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!!!!


Saturday, July 13, 2013

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:

Working Example: Plunkr

Wednesday, June 26, 2013

AngularJS - Learning resources

Offical Docs

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

Must watch

Other Learning Resources:

Examples

Cheat Sheet

UI bootstrap directives

Modules

Small App Examples

Javascript Gotchas

Tuesday, June 25, 2013

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:

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:

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:

Working Example: Plunkr