AngularJS

AngularJS, Get in the Matrix

  • Published on Saturday, 22 March 2014 04:23
  • Hits: 4811
User Rating:  / 4
PoorBest 

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:

  • Go from a Ford Mustang to an Mercedes ML550. The first one is fun, fast, it is very usefull at the beginning, but then the family grows, and getting them all in the mustang is messy, disorganized. A Mercedes ML550 is not as fast, but it is secure, and you fit all the family in it, ..and yet is still quite fast. Jquery is the Mustang and AngulaJS the Mercedes ML.
  • Did you have the chance to program games in C and Assembly and then suddenly you learn to program in DirectX, openGL, C++, etc?? The first one allows you to tweak anything in the software, make it fast, but messy to read assembly code, isn't it??. on the other hand, an object Oriented language, makes your software more readable, more organized, but you need to spend more time when starting the project to define and organize the classes and objects in the code.

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:

  • [1] Keanu Reeves Keanu Reeves is Neo character in the Matrix.
  • [2] Laurence Fishburne Laurence Fishburne is Morpheus character in the Matrix.
  • [3] Carrie-Anne Moss Carrie-Anne Moss is Trinity character in the Matrix.
  • [4] Hugo Weaving Hugo Weaving is Agent Smith character in the Matrix.
  • [5] Joe Pantoliano Joe Pantoliano is Cypher character in the 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

Music You like..

IT News to be aware of ..

Most Visited...

AngularJS, No more Dom Manipulation

Hits:6528

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more

QR Codes: The best 9 QR Code Generators

Hits:40586

QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

Famous, the most beautiful javascript Li…

Hits:3832

Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more