HTML5 Zone is brought to you in partnership with:

Sohan is a pragmatic and passionate Software Engineer, with polyglot programming experience on Ruby on Rails, C# and .Net, Java, JavaScript and a bunch of other technologies. Sohan is an agile enthusiast. S M is a DZone MVB and is not an employee of DZone and has posted 17 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS is Very Productive, and Cool Too!

08.23.2013
| 8371 views |
  • submit to reddit

AngularJS has a very steep learning curve, but yields a superb productivity boost once you’ve learned it. Check out my demo of the wizard, which we’ll discuss next.

AngularJS works by extending HTML to produce declarative UI code and eliminating the need for a lot of boilerplate code. For example, the mental model of a wizard can be expressed using the following HTML:

<wizard title="Flight Search">
  <step title="Search">
  </step>

  <step title="Select a flight">
  </step>

  <step title="Select a return flight">
  </step>

  <step title="Checkout">
  </step>

  <step title="Confirm purchase">
  </step>

  <step title="Receipt">
  </step>
</wizard>

With AngularJS, one can write exactly this markup with the help of two custom directives, widget and step. This declarative UI code makes it very easy to read. In addition to this, the two-way data binding capabilities of AngularJS makes it very productive as we don’t need to write a bunch of references to the DOM nodes and render the nodes as the data changes. For a working example, check the source code of the demo and, if you're like me, you’ll love to see how simple it is.


Published at DZone with permission of S M Sohan, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Ravibabu Vanamala replied on Thu, 2013/08/29 - 10:53am

Nice One. Thanks.!!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.