Building your first web application with AngularJS

Posted on Aug 16th, 2015 in Development, Technology

angularjs

Before we start, I assume that you have already gone through my previous post about getting the AngularJS environment ready. If not please do from this link.

So let’s get started.

A basic AngularJS application contains three main files but since this is going to be a basic application all we need is the following files. These can change when the application get more complicated.

  • index.html – The main view of the application.
  • app.js – the JavaScript file where the functionality if the application is written
  • styles.css – all the styling and the look and feel of the app can be specified in this css file.

First of all, open up a folder for your project and create these files in it. You also can open up this folder on SublimeText as an project.

files in folder

 

On the Index.html create a basic HTML page with the standard HTML tags and include “app.js” and “styles.css” to it.

three files

Now that we got our template ready, now we have to install Angular on the project we are building. We are going to use Bower to do this. To do that follow the instructions

– Open up Command Prompt in the project directory (Shift+mouse right click > Open command window here)
– Enter “bower install angular”

installing angular

Assuming that NPM, Bower and Git configured correctly it will download and install Angular on the project directory in a folder named “bower_components” as displayed on the above figure.

Now include the library to index.html

including to index

An angular application needs to be defined before it could function properly. Lets define it in the HTML head tag with a appropriate name. In this scenario the application name is going to be as “FirstWebApp”. Since Angular is developed for 3-tier architecture it functions similar to MVC. The application needs at least one Controller to function. Lets define it in the HTML Body tag as “MainController”.

initiating app and controller

As marked on the above figure you can see that the ng-app and ng-controller are defined. Now that we have that done lets develop the functionality of the application in “app.js” java-script file.

The first thing to be done it to declare the application. This could be done by using the modules and thereafter the controller can be defined for this particular application.

module and controller defined

 

Lets create a variable and get it displayed to see if the application is functioning correctly. Variables can be declared in the following manner.

app js

And the final HTML page will be as follows

index html

and the final output will be as the following.

final output

Finally, this is what a super basic AngularJS application looks like. As a beginner if you have any questioned related to this please done hesitate to contact me. You can leave your feedback in the comments 🙂

LEAVE A REPLY

Your Name
Your Email (will not be published)
Your Message