Home / Archive / Developing Single Page Web Applications with AngularJS
Anyone who has experience developing a Single Page Application (SPA) with naked jQuery or raw JavaScript knows that doing so involves a lot of work for basic UI functions like keeping your Model and View in sync. You end up with hundreds or even thousands of lines of JavaScript devoted to basic functionality, before you can even begin writing your application logic. This is why teams of developers have put tremendous effort into making a variety of JavaScript application frameworks. You can take your pick from BackboneJS, EmberJS, AngularJS and others. Each has its own advantages, but for this post I'll just be talking about what AngularJS brings to the table.

Developing Single Page Web Applications with AngularJS

Anyone who has experience developing a Single Page Application (SPA) with naked jQuery or raw JavaScript knows that doing so involves a lot of work for basic UI functions like keeping your Model and View in sync. You end up with hundreds or even thousands of lines of JavaScript devoted to basic functionality, before you can even begin writing your application logic. This is why teams of developers have put tremendous effort into making a variety of JavaScript application frameworks. You can take your pick from BackboneJS, EmberJS, AngularJS and others. Each has its own advantages, but for this post I’ll just be talking about what AngularJS brings to the table.

There’s a few key features that make AngularJS distinct from the alternatives. A big one is that Angular templates are written in HTML using directives (HTML5 data elements or custom attributes) for its template functionality. For example, if you have a list element that you’d like to repeat for each entry in an array, you use an ng-repeat directive on that list element like so:

  • {{ cookie.name }} : {{ cookie.description }}

Assuming you have an array called cookies with elements that contain both a name and description, you will get a list as you might imagine from the above in AngularJS

Angular will do automatic data binding as well, if the cookies array gets updated in your model, the view will automatically update. That means adding, removing or changing any of the elements in your model is automatically reflected to the user.

This is just a very basic introduction to some of the functionality AngularJS has on offer. For a more comprehensive overview I recommend checking out the official AngularJS site which contains detaield documentation as well as a number of videos.

About A2 Hosting

Check Also

javascript

WordPress & Learning JavaScript “Deeply”

WordPress is in use by more than 60 million websites, making it the most popular site management system on the Internet. Part of the popularity is that it's a free, open-source software with handy plugin features, templates, and a constant source of new features coming from its contributors. But traditionally it has run on PHP, which does have a bit more of a learning curve.