Search within TutorialsPark

AngularJS : First Application


Learn how to build your first application using AngularJS


AngularJS : First Application

The easiest way to understand AngularJS accurately is by using it you own application. In this chapter we will go through the developement process of the building an Application using AngularJS.


AngularJS : Initiating the Project

We will begin with a basic wireframe of the project, using HTML elements.The application is called Bill Payment and named as billPay.html

Its in pure HTML now, and uses no JavaScript files, the purpose of the Application is show the payment Status of each bill.

Example: AngularJS MVC Example

Give it a TRY! » Note: The file has no functionality and is just a static wireframe.


AngularJS : Applying AngularJS to your File

Next logical step is to add AngularJS files to the HTML document, simply use script element to add angular.js files.

Next we create a Angular JS Module and apply attribute to html element. Any AngularJS application comprises of one or multiple modules, to create a module call the method angular.module

The arguments of the angular.module method is the name of the module to be created and an array of modules to needed in the application in future.

Example: Angular JS Applying AngularJS to your Files

Example: Angular JS Applying AngularJS to your Files

Give it a TRY! » Note: Any given AngularJS Application is made up of number of modules working in combination


AngularJS : Creating a Data Model

In MVC architecture a model is created by putting all the data together at a place separate from HTML code(view).An AngularJS application is executed in the browser, hence the data model is created using JavaScript.

In the Application, the variable modelData contains data which was earlier displayed using HTML code, the property items contains an array of object describing bills to be paid.

Example: Angular JS Creating a Data Model

Example: Angular JS Creating a Data Model

Give it a TRY! » Note: The property customer defines the name of the customer/user


AngularJS : Creating a Controller

In MVC terminology, a controller is used to specify the business logic required to create a view, infact the controller contains a set of logic not defining the view but what should be left out from the data model to create a required view.

Both the model and view have their own logic and task of controller is acts a connector between the two.It can update the data in model and also help create a view as per user demand.

To create a controller call the method controller on the module object which is returned by angular.module method.The arguments of the controller are the new controller name and a function to be used to define the tasks of the controller.

Example: Angular JS Creating a Controller

Example: Angular JS Creating a Controller.

Give it a TRY! » Note: The controller function has an argument $scope, the symbol $ denotes built-in AngularJS features.


AngularJS : Creating the View of Application

In AngularJS a view for the user is created by putting together data recieved from the controller with HTML elements and then displaying it in the browser, or any other user agent.

The HTML elements in the view are get the data from the model via a process called data binding Step to create views are as given below:


Putting the Model Values

In AngularJS a binding Expression is created using double-brace brackets {{}}, the expression within the bracket is executed using JavaScript, the expression can only access data and functions available to the scope of the controller.

So inorder to access property model.customer, the binding expression is billpay.customer, because the model object is assigned to property $scope.billpay


Execution of the Expression

In the demo we want to display the number of items in the array, to let the viewer know the total number of bills to be paid.


Using Directives for View

In AngularJS directives also makes use of expression, it specifies how the content can be processed.

In the Demo, the attribute ng-repeat hold a directive instructing AngularJS to generate the element within which it is used and the contents within it, for each and every object within the collection.

The value of the attribute ng-repeat is the form of name in collection


Example: Angular JS Creating a View to Display the Model Data

Give it a TRY! » Note: The controller function has an argument $scope, the symbol $ denotes built-in AngularJS features.