0

Your First Proper AngularJS Application

This post demonstrates how to create a proper and typical AngularJS application with controllers. In my previous post Your First AngularJS Application, I didn’t touch on the basics to create a very simple and typical AngularJS application. However, the example allows us to bootstrap the AngularJS application (single-page) and demonstrates the two-way binding feature wherein the characters are displayed as you type them in the textbox.

Software Requirements

Create Your Application

First we need a starter application.

Starter Application

This is a set of files that make up our initial application before using AngularJS.

bootstrap.min.css

This is downloaded from http://getbootstrap.com. At the time of the writing, the latest version is v3.3.7

index.html

This is our main html page.

Output

Our starter application displays the following page.

Modify Starter Application to use AngularJS

Now we modify the starter application to use AngularJS.

1. Download AngularJS

Go to https://angularjs.org/ and click the DOWNLOAD ANGULARJS button.

It’ll display a modal window. Choose 1.6.x (latest) for Branch, and Minified for Build. Then click Download.

Copy the file to your starter application directory.

2. Modify index.html to reference AngularJS

Line 9 references angular.min.js.

3. Create main module and reference it in index.html

In AngularJS, we have this concept of modules. Each module is a collection of related codes. There must be a main module where our codes should reside. Other modules can be imported or injected into the main module so that their codes can be used.

Think of the main module as your main class in Java where the public static void main method is.

3.1 Create app.js

app.js will contain our main module.

Here we defined our main module as app. Later we could reference our main module using the same name. For instance,

Place app.js in the project directory.

3.2 Reference app.js in index.html

4. Create a controller

4.1 Create controller.js

controller.js will contain our controller attached to our main module.

4.2 Reference controller.js in index.html

5. Link index.html to your main module using ng-app

5. Link controller to a div element

6. Test the page

Download codes

You may download all the codes from https://github.com/Turreta/Your-First-Proper-AngularJS-Application