Everything you need to understand to start with AngularJS

2012 was the year of the rise of the Javascript MVC frameworks and librairies with countless of those frameworks that were released or that went under the spotlight. Among others, you must have heard aboutBackbone.js, Ember.js but my personal favorite is AngularJS. AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintenable web applications.

Why AngularJS?

AngularJS is a MVC framework that defines numerous concepts to properly organize your web application. Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection. Thanks to the use of dependency injection, AngularJS helps you structure and test your Javascript code very easily. Finally, utility code can easily be factorized into services that can be injected in your controllers. Now let’s have a closer look at all those features.

Expressions

AngularJS let you build properly structured web applications very easily. For that, AngularJS contains several concepts to separate the different parts of your application.

In order to create the views of your application, AngularJS let you execute expressions directly within your HTML pages. In those expressions, you have access to Javascript code which give you the ability to realize some computation in order to display what you want.

Expressions in your HTML page are nice, but you won’t build a complete web application like that, it would be horrible to write and to maintain, we need the help of something more powerful. Expressions are used for small operations, In order to structure you web application, AngularJS will give you a much impressive tool, directives.

Directives

Directives are one of the most powerful feature of AngularJS. They allow you to extend HTML to answer the needs of web applications. Directives let you specify how your page should be structured for the data available in a given scope. We will have a look at the scope and where those data are coming from later in this post but first let’s have a look at how directives are working.