{"id":22246,"date":"2014-10-21T21:01:48","date_gmt":"2014-10-21T13:01:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22246"},"modified":"2025-04-04T02:01:14","modified_gmt":"2025-04-03T18:01:14","slug":"angularjs-basic","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/angularjs-basic\/","title":{"rendered":"Getting Started With AngularJS"},"content":{"rendered":"

Every once in a while a new tool arises and just as it suddenly appeared, it seeps down into oblivion. Not AngularJS<\/a> though. While it\u2019s been around since 2009 since its creation by Misko Hevery, AngularJS has been gaining a lot of attention in the past couple of months<\/strong>.<\/p>\n

People are talking about it, developers have been integrating it in their works, and authors have been writing books about it and earning loads of cash. So, what is AngularJS and why should you hop on it<\/strong>? Is it life-changing? It sure is! Let me tell you why.<\/p>\n

Note:<\/strong> I highly recommend that you get comfortable with JavaScript first before delving deeper into AngularJS. If you aren\u2019t familiar with MVC<\/a> and DOM<\/a>, I suggest reading more about them before proceeding further, otherwise you might get confused with most of the terminologies used in this article.<\/em><\/p>\n

Recommended Reading:<\/strong> Learning Programming: 10 Misconceptions That Are Not True<\/a><\/p>\n

What is AngularJS?<\/h2>\n

AngularJS is not just another JavaScript framework. Sure, we have Backbone, Ember, and the hottest jQuery, but AngularJS is different in many ways.<\/p>\n

Data-Binding and Built for Single-Page Applications (SPA)<\/h3>\n

Firstly, AngularJS is a data-binding framework that is specifically built for SPAs<\/strong>. Meaning, you can easily build an application without using any other libraries since it already has everything you will ever need. It also maintains synchronization for the model and view.<\/p>\n

The beauty of building a SPA is that it imitates a desktop experience in which the page remains the same all throughout, with only the views being changed along with the URL \u2013 AngularJS handles routing as well as views. It\u2019s faster and smoother<\/strong> this way. It\u2019s as if you\u2019ve just opened a desktop application and having everything you need already there.<\/p>\n

Another thing is that unlike other SPAs, the browser history is actually kept<\/strong>. For example, if you want to click on the back button to get back to the previous view, AngularJS will actually take you back to the previous view. Most SPAs don\u2019t work this way.<\/p>\n

Model-View-Controller Implementation Done Right<\/h3>\n

AngularJS implements MVC in a beautiful way. Most frameworks that use MVC requires you to separate your application into modules and then write code that will connect them together<\/strong>.<\/p>\n

While the reasoning behind this is to make the code work more flexible and reusable, this leads to many coding horrors, especially for lazy (or sleepy) developers. AngularJS handles this beautifully by simply requiring you to just split your application into different modules<\/strong>. It then handles the rest.<\/p>\n

Animation<\/h3>\n

Of course a single-page application can\u2019t look good without the appropriate animations. As mentioned earlier, AngularJS is a feature-rich framework that has all of the things you\u2019ll need in building generic applications<\/p>\n

As such, it provides an easy way to introduce animation<\/strong> in every view the same way as jQuery does.<\/p>\n

Here\u2019s a good example<\/a> of how AngularJS handles animations.<\/p>\n

But that is just the surface of AngularJS. Here is more of what it can do:<\/p>\n