5 Steps to Develop a Basic AngularJS Application with Example

by Luke P. Issac on April 8, 2015

Angular.js is a client-side javascript framework developed and maintained by Google.

It is a MVW ( Model View Whatever ) framework.

It gives us the flexibility to choose the design pattern that we want to use in our web application.

It is introduced to make static html dynamic. In other words, it updates the view of the web application in sync with any change in the data ( Model ). It makes the view data driven.

In MVC ( Model View Controller) pattern, the application is designed such that Modal contains the data as well as the business logic, View contains the presentation script ( html tags) and controller is a mediator between Modal and view. This pattern is generally used with the server side scripting languages like PHP.

However, in client side framework, MVVM (Modal View ViewModel) pattern is often used and it can be accomplished by using angular.js.

Here, ViewModel contains the presentation logic which distinguishes it from MVC pattern. Moreover, angular.js creates two way data binding, i.e. any changes in data object reflects on the view at the same time any changes in the view get updated in data object. So, it is a good choice when it comes to the development of single page applications where page redirects or page refreshing are not entertained.

The following basic example app gives an high level overview on how to get started on Angular JS development.

1. Include AngularJS Script

You have two options here.

You can download the latest version of the angular.js and add it to your view script.

Or, you can use the hosted library from google using the URL mentioned below in the script section.

<!DOCTYPE html>
<html>

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

<body>

<div>
<p>AngularJS basic application example by thegeekstuff.com</p>
</div>

</body>
</html>

2. Bind ng-app Attribute

In this step, bind ng-app attribute (directive) to a module name in html tag where we want to bootstrap the angular app. We’ll create the module in the next step.

In this example, we are binding a module called “someApp” using “ng-app” directive to the div element.

<!DOCTYPE html>
<html>

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

<body>

<div ng-app="someApp">
<p>AngularJS basic application example by thegeekstuff.com</p>
</div>

</body>
</html>

3. Create an Angular Module

Next, create an angular module and add it to your view.

This keeps the application functions are variables separate from the global namespace.

You can also write it in a separate javascript file and add it to your view using script tag. In the example below its written inline.

<!DOCTYPE html>
<html>

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

<body>

<div ng-app="someApp">
<p>AngularJS basic application example by thegeekstuff.com</p>
</div>

<script>
  angular.module("someApp", []);
</script>

</body>
</html>

The second argument to the module is an array of module dependencies that we may have.

4. Create a Controller

In the example below, we are creating a controller by chaining method.

<!DOCTYPE html>
<html>

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

<body>

<div ng-app="someApp">
<p> This is some paragraph </p>
</div>

<script>
  angular
    .module("someApp", [])
    .controller("someCtrl", function($scope){
      $scope.text = "AngularJS basic application example by thegeekstuff.com";			
  });
</script>

</body>
</html>

Please note in the above code we have used “$scope” object in the controller which is available in the view to access. It thus stitches the controller and the view.

5. Define Controller Scope

Finally, use ng-controller directive in html tag to define the scope of the controller.

<!DOCTYPE html>
<html>

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

<body>

<div ng-app="someApp" ng-controller="someCtrl">
  <p> {{text}} </p>
</div>

<script>
  angular
    .module("someApp", [])
    .controller("someCtrl", function($scope){
      $scope.text = "AngularJS basic application example by thegeekstuff.com";			
  });
</script>

</body>
</html>

In the above code we are accessing the scope object variable using angular expression using handlebar template binding {{ }}.

Copy and paste the above script into a html file and open it in any browser to see the AngularJS in action.

You will see the text “AngularJS basic application example by thegeekstuff.com” rendered on your browse.

This text is basically set in the application model and is driven by data on the view which is in the controller scope.

To learn more about angular directives, filters, expressions and services refer to the AngularJS documentation.

Add your comment