Qoding: AngularJS part one


In this blog post we look at AngularJS a JavaScript framework for building dynamic user interfaces.

 

In this blog post we look at AngularJS a JavaScript framework for building dynamic user interfaces.

AngularJS is a great framework for building dynamic and responsive frontend views, binding and handling data, and handling some common JavaScript UI functions such as tabbing content.

In this post I'll cover the very first steps to get started with AngularJS including directives, controllers and expressions. (Don't worry I'll explain these terms soon!)
We shall create a very simple app to show pie product data for a pie shop. 

A working JSFiddle of this blog post code is available at http://jsfiddle.net/Lj9Ljcfp/1/.
 

Step 1 - Include the AngularJS library

Firstly we need to include

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

in between our head tag to use the AngularJS library.
 

Step 2 - Declare the 'ng-app' directive

Directives sound complicated (and they can do complicated things) but they are simply markers on a DOM element that tell AngularJS to attach a specified behaviour or transform the element in some way...

The 'ng-app' directive is the most important as it is required to use AngularJS, as it sets the root element of the application. It is typically placed near the root element of the page - e.g. on the <body> tags.

<body ng-app="pieShop" >
</body>


We also declare a variable "app" in script to hold our application module, in this case our Pie Shop.

<script>
var app = angular.module("pieShop", []);
</script>

 

Step 3 - The “ngController ” Directive

We need to define an ng-controller to add functionality to our application. Angular uses the MVC pattern and here we are defining the Controller portion.

The controller contains business logic behind the application and can include functions and variables.

<body ng-app="pieShop" >
<div ng-controller="PieShopController as pieShop">
</div>
<script>
var app = angular.module("pieShop", []);
app.controller('PieShopController', function(){
 });
</script>

 

Step 4 - Binding data and Expressions

We now need to bind some pie data to the application.

<script>
var app = angular.module("pieShop", []);
var pie= { name: 'Cherry Pie', price: 2.00 };
app.controller('PieShopController', function(){
this.pie = pie;
});
</script>


The application now has a controller for the pie shop and a single pie object to show. However it doesn't know how to display the pie information, for that we need to add expressions.

<body ng-app="pieShop" >
<div ng-controller="PieShopController as pieShop">
<div>
       {{ pieShop.pie.name }}
        {{ pieShop.pie.price }}
     </h3>
   </div> 
</div>


AngularJS considers anything between double parentheses an expression to be evaluated. In the case of "{{ pieShop.pie.name }}" the "pieShop" is the controller, the "pie" is the controller variable, and the "name" is a property of that variable.

In this case it would evaluate to 'Cherry Pie'.
 

Step 5 - The Ng-Repeat Directive

Let's say the store expands and starts selling more than one type of pie.

To do this we would declare a new pies variable and set it to the controller variable "pies".

<script>
var pies= [
   { name: ‘Cherry Pie’, price: 2.00 },
 { name: ‘Apple Pie’, price: 3.00 },
   { name: ‘Pumpkin Pie’, price: 3.50 } ];
var app = angular.module("pieShop", []);
app.controller('PieShopController', function(){
    this.pies = pies;
      });
</script>


Angular can handle lists of objects like this nicely using the 'ng-repeat' directive. This loops through each object and evaluates the values using the expressions we mentioned earlier.

This should output the list of pies and their prices.

<body ng-app="pieShop">
 <div ng-controller="PieShopController as pieShop">
   <div ng-repeat="pie in pieShop.pies">
     <h3>  {{pie.name}} </h3>
<p> £{{pie.price}}   </p>   
      </div>
 </body>


You can see this in action at http://jsfiddle.net/Lj9Ljcfp/1/.
 

Next Steps

In our next AngularJS post we will look at filters, some more built in directives and adding images for our pies.
 

 

22 Jun

2015
Gareth Nunn
Listed in:  Development
Estimated read time:
 words,  minutes

Signup to receive these articles straight to your inbox.