HTML5 Zone is brought to you in partnership with:

Arian is a DZone MVB and is not an employee of DZone and has posted 2 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS in Its Simplest Form

02.12.2014
| 9464 views |
  • submit to reddit

AngularJS is a very hot topic nowadays amongst web developers. It seems to have a lot ofAngularJSmomentum and as such getting high attention and interest. Being an extensible javascript framework and excellent framework for developing Single Page Applications (SPA), it is feature rich and evolving very fast.

As learning such a huge and fast growing framework could seem to be hard at the beginning, I will try to take a very simple form of it, and try to explain how can we create an AngularJS SPA at its simplest form. For the sake of demonstration, I will create a web page which displays basic contacts of famous web developers.

AngularJS is a Model-View-Controller framework, where Model serves the data, Controller takes the data from Model and delivers to View, and View displays the data. As we want to display some data, we need all three of the components. We have our contacts, which is our Model, then we need a Controller which will deliver the contacts’ list to the View, and we need a View to display the contacts’ list.

Before we start to create components, we need to define the Angular module which will form the base of our SPA, and it is done through this line of code:
 var angularEg = angular.module('angularEg', []);
A new module is defined using angular.module. The first argument defines the name of the module, and the second argument specifies other required modules. We will leave it as an empty array as we have no dependency on other modules for this example. Although the second argument is optional, it has a significant meaning. If not specified, angular will look for an existing module with the name specified at the first argument, otherwise if specified a new module will be created.

Lets create now the components one by one.

Model

Our contact card will display contact’s name,  country, and his web page URL, so we need an object which will hold these data. Our model will look like this:

{
name: "Scott Hanselman",
country: "USA",
web: "http://www.hanselman.com"
}
This represents a single contact, and our Model will contain an array of such objects.

Controller

The controller in our case has only one duty, to make the data available to the view, so lets first define the controller using this code:
angularEg.controller('myContacts', function($scope){

});
The first argument to controller creation is the name of the controller, which in this case will be ‘myContacts’ and the second argument is the controller implementation. The $scope variable is the connection between the Controller and the View, and it is used to pass information from Controller to the View. The controller can get the data from model in various ways like loading data from a file, from an internal/external web service, etc. To keep it simple, I will hard code the data inside the controller.
angularEg.controller('myContacts', function($scope){

$scope.contacts = [{
name: "Arian Celina",
country: "Republic of Kosova",
web: "http://arian-celina.com"
}]
});

The controller is ready, lets continue with the view.

View

Our view will be a standard html page which displays the above specified information in div blocks. There are three things we need to do in view in order to bind the information from controller.

1. We need to specify that the view is for the angular module we have created and we do this by putting ng-app attribute in html tag
 <html ng-app="angularEg">
2. We need to specify which part of this view is bound to which controller, and we do this by attaching ng-controller directive to the relevant container, in this case I will do it in body. This can be done in a granular level such as a specific div, or a global level such as body.
 <body ng-controller="myContacts">
3. We need to display the contacts. There is a directive in AngularJS specifically to display collection of data such as arrays, and it is ng-repeat. I will repeat contacts and display them in this way:
<div class="w-row" ng-repeat="contact in contacts">

<div class=”contact-brief”>
<h2 class=”contact-name”>{{contact.name}}</h2>
<div class=”contact-info”>Country: {{contact.country}}</div>
<div class=”contact-info”>Web: {{contact.web}}</div>
</div>

</div>

The ng-repeat directive iterates through collection of contacts which he gets from the controller “myController” (remember, we defined variable contacts in $scope). A local variable contact is defined inside ng-repeat, this gives us the opportunity to access the object in iteration and access its properties and then the data binding is done by specifying the property and enclosing it with double brackets like {{contact.name}} (the handlebars syntax).

AngularJS will iterate over the array $scope.contacts and add the above specified div to the DOM for every element in the array.

The resulting app can be seen online on http://arian-celina.com/angularexample/index.html. Feel free to get the code from GitHub and play with it.

Published at DZone with permission of Arian Celina, 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.)