Building your first web application with 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.
- 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.
On the Index.html create a basic HTML page with the standard HTML tags and include “app.js” and “styles.css” to it.
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”
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
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”.
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.
Lets create a variable and get it displayed to see if the application is functioning correctly. Variables can be declared in the following manner.
And the final HTML page will be as follows
and the final output will be as the following.
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 🙂