Logo
AngularJS

AngularJS, Get in the Matrix

User Rating:  / 4
PoorBest 
View Comments

You all know that my relationship with jquery, the write less do more library, has been truly trustfull and I have never cheated on her with any other javascript library, ...it is true that before her I played around with some other as prototype, mootools and scriptaculous from thomas fuchs, and even a bit of Dojo (which has been successful in commercial CMS as IBM Portal and Liferay).

Me and Jquery has been together for 5 years, but then she appeared, she is young and found her surfing the big waves of the Google. Her name? AngularJS

But why??, what does AngularJS have that JQuery lacks of??. Hmmm, many things but that doesn't mean that Jquery is not attractive anymore, ..not at all. Jquery is the best Javascript Library in the market, no doubt about it, and her sister JQuery Mobile is a must to use in mobile applications development (unless you create them in IOS or Android directly).

So, what's the big deal about a AngularJS??. Let me give you two examples in real life that can compare what I felt:

So let's see what is AngularJS:

Hypertext Markup Scripting Language??

AngularJS is embedded directly into HTML to make one programming language, ..and not two different ones (javascript, HTML). As his creator Miško Hevery says, AngularJS has turn HTML into how a web browser would have been design for web applications. 

That is your first challenge, go from using 2 different languages to only 1 (..not really only 1 as you still will have js files, etc, but it is better to see it that way).

Give me a couple of examples of this Javascript-HTML Joint Venture:

Expressions

You can have expressions, as in other languages. These will be usually placed in bindings such as {{ expression }}

<p>2<sup>2</sup>={{2*2}}</p>

The result is: 22=4

Loops

As in any programming languages you have loops. AngularJS comes with the function angular.forEach and with the ngRepeat directive which instantiates a template once per item from a collection. Here is an example of how to build a html list with Matrix movie actors from a json source :

<div ng-init="actors = [
  {name:'Keanu Reeves', img:'/images/NeoSm.jpg', character:'Neo'},
    {name:'Laurence Fishburne', img:'/images/MorpheusSm.jpg', character:'Morpheus'},
  {name:'Carrie-Anne Moss', img:'/images/TrinitySm.jpg', character:'Trinity'},
  {name:'Hugo Weaving', img:'/images/AgentSmithSm.jpg', character:'Agent Smith'},
  {name:'Joe Pantoliano', img:'/images/CypherSm.jpg', character:'Cypher'}
]">
  <p>This is an example of {{actors.length}} actors from the movie Matrix:</p>
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="actor in actors">
      [{{$index + 1}}] <img height="44" width="32" alt="{{actor.name}}" src="/{{actor.img}}"> {{actor.name}} is {{actor.character}} character in the Matrix.
    </li>
  </ul>
</div>

The result is:

This is an example of 5 actors from the movie Matrix:

hmmm, it seems quite powerful.., could I build an app with AngularJS??, ...check the AngularJS "Matrix" tutorial:

  1. AngularJS, Get in the Matrix
  2. AngularJS, Meet the MVC
  3. AngularJS, No more Dom Manipulation
  4. AngularJS, Build your App!!
  5. Animate your App!!
STORY BY:
Sepelka

Sepelka (JL Castellano)

FreakZion founder and Fortune 500 Company IT Manager. Developer, Consultant, Dreamer and passionate to get full potential for everything from a single project to a whole company with leadership, creativity and commitment.
Technology by itself is useless, but in our hands can turn dreams into reality, the forbidden into the affordable, boreness into fun and projects into businesses.

Check my LinkedIn Profile
Website: http://www.freakzion.com

Sepelka
 
SEPELKA