Anatomy of an AngularJS Application

anatomy-of-angularjs-app

Apart from other things, AngularJS is primarily used to build Single Page Apps (SPAs). So, let us first try to understand the characteristics of a SPA.

In Single Page Application,  the entire app is loaded within a single page. This means that once the app is loaded in the browser, clicking on any link would not reload the entire page but would simply update certain sections within the main page itself. This gives users a very desktop-like feel.

Some of the technologies that play a predominant role in building SPAs are HTML, CSS, JavaScript, AJAX, and web services (usually RESTful). Of these, JavaScript plays the most pivotal role in building an SPA.

In traditional web applications that are built on the server-side technologies such as Java, PHP, and .NET, whenever a page is requested, the web server would make a request to the database, fetch the result of the query, then load the template, and dynamically generate the final page, which is sent down to the browser.

Single Page Apps, especially those built on JavaScript frameworks such as AngularJS work in a slightly different fashion. With SPA architecture, the entire template along with the HTML, JavaScript, and CSS is downloaded to the user’s browser, so when a request is made, content is sent from the web server and the page is built on the client side on the user’s browser. Here, the browser is doing the heavy lifting.

In such an architecture, the web server is merely passing raw data and is not involved in building the pages. The pages are built on each user’s browser and hence even if the traffic to the site increases, the server doesn’t get overloaded, as it would have in a regular web app architecture.

Another thing that makes SPAs wonderful is that the presentation layer can be completely decoupled from the back-end layer.

With this knowledge, lets dive into the anatomy of an AngularJS application. What you see below is a typical AngularJS application in its simplest form.

This is a regular HTML page with the HTML5 doctype and the AngularJS JavaScript file being called in. Now, let us look at specific syntaxes of AngularJS and what they mean.

ng-app

This defines the element within which AngularJS will bootstrap itself. In most cases, we would add it to the <html> or <body> tag. It is also possible you would be building a regular application in Java, PHP, or .NET and only a section of it would be running an AngularJS app, in such cases you would add ng-app to the <div> tag wrapping the app component.

ng-init

This is used to define the initialization tasks. In this example, we are creating a model called myName with the value John Doe

{{ }}

The double curly brackets are used to output the data stored in models. In this case,{{myName}} outputs the value John Doe. The double curly brackets are useful for accessing scope models and functions.  These curly brackets can also be used for expressions. For example <div> {{ 4 + 6 }} </div> which will display 10 on our view.

Directives

The ng-app and the ng-init tags that we see above are called Directives. They are an integral part of any AngularJS app and it is through these directives that AngularJS is able to modify the DOM element of an application. AngularJS comes with a set of predefined directives but, you can also create your own custom directives that can meet your specific requirements. Directives help in extending our existing HTML elements or create new ones. For example ng-if, ng-repeat are built-in directives and you could create have maybe an HTML element like <my-clock></my-clock> as your custom directive.

Top