Matrix Angular Farm

AngularJS, No more Dom Manipulation

  • Published on Thursday, 03 April 2014 05:19
  • Hits: 6318
User Rating:  / 3
PoorBest 

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, you can do everything with it, ..but do you program nowadays in assembly??. Not even for games.

So, AngularJS will take care of the dom. just add controllers to any piece in your view, and the controller will take care of listening any action you take on it, it will update the content on it, etc.

How does the magical Dom manipulation happen in angularJS?

Data Binding

I couldn't explain it better than AngularJS themselves:

"Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view."

two way data-binding in AngularJS

Let's for example add 2 columns to out actors lists, in which we will add a rate to each of them from 1 to 10 (default value 5). hmmm, that should mean quite a lot of code to add... or not:

<form>
<table class="table table-striped">
  <thead>
    <tr>
      .......
      <th>Rate</th>
      <th>New Rate</th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="actor in actors">
     .......
     <td>{{actor.rate}}</td>
     <td><input type="range" min="0" max="10" ng-model="actor.rate" ></td>
     </tr>
   </tbody>
</table>
</form>

We just added the bold lines, ....and yes, AngularJS takes care of the Dom Manipulation. Check the Demo here (testAngular3.html).

Filters

Now what about adding a search bar where you can find Actors by name or character name automatically updating the list showing only the ones containing the string you type in??. ....Imagine the Dom manipulation that might mean in JQuery?, ..or in plain javscript??, ..lucky we are dealing with AngularJS here and you are reading a Post by Sepelka ;) as.you just need one new input filed and just a filter in the model:

<form>
<label>Search:</label> <input type="text" class="form-control" ng-model="searchString">
<table class="table table-striped">
  <thead>
    .........
  </thead>
  <tbody>
    <tr ng-repeat="actor in app.actors  | filter:searchString">
      .........
    </tr>
  </tbody>
</table>
</form>

Check the result in this Demo

Download the Example Here

Follow up this Mini Great 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 ..

New in FreakZion...