fastread homefastrread library fastread menu

AngularJS : Developing an AngularJS Application From Scratch

Tutorial by:Sumit Chauhan      Date: 2016-08-11 23:52:11

❰ Previous Next ❱

Now that you have seen the model, view and controller parts of an AngularJS application, let us build the above example application from scratch with explanations for each step.

AngularJS applications are a mix of HTML and JavaScript (as you have already seen) so the first thing we need is an HTML page:

<!DOCTYPE html>
<html>
<head>
</head>

<body>
</body>
</html>

Second, we need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body>
</body>
</html>

Remember to check AngularJS's website for the latest version of AngularJS so you do not keep using the version I use in this example.

Third, we need to tell AngularJS what part of our HTML page contains the AngularJS app. You do so by adding the ng-app attribute to the root HTML element of the AngularJS app. Typically, the root element is either the html element or the body element. In this example I insert the ng-app attribute into the body element:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">
</body>
</html>

In this example I set the ng-app value to myapp. This means that all controller functions must be added to the myapp module. In other words, the AngularJS module named myapp contains all the controllers for this AngularJS application. The name myapp is something I have chosen. You can choose your module names freely.

Fourth, we need a view. A view is a section of HTML which is enclosed in an HTML element. Here is an example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">
  <div ng-controller="HelloController" >

      <h2>Hello {{helloTo.title}} !</h2>

      </div>
</body>
</html>

In this example the view is the div element and everything inside it. The div element contains ng-controller attribute with the value HelloController. This means, that the controller function used by this view is named HelloController.

The view div element contains the HTML

    <h2>Hello {{helloTo.title}} !</h2>

This is standard HTML except for the {{helloTo.title}} part. This part tells AngularJS to insert the model value named helloTo.title into the HTML at that location.

Fifth, we need a controller function. A controller function is a normal JavaScript function which takes a single parameter: The $scope parameter. The $scope parameter is the model object to be used by the controller function and the corresponding view. The controller function can insert data and functions into the model object. The view can then use the data and the functions.

Here is our little web app with the controller function inserted:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">
  <div ng-controller="HelloController" >

      <h2>Hello {{helloTo.title}} !</h2>

  </div>


    <script>
    angular.module("myapp", [])
    .controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "World, AngularJS";
    });
    </script>

</body>
</html>

The controller function is registered in angular via the angular.module(...).controller(...) function call.

The angular object is a global object created by the AngularJS JavaScript which is included at the beginning of the page.

Notice the first of the parameters to the angular.module() function call. The value of that parameter is "myapp". This name matches the name specified in the ng-app attribute in the body element. This way AngularJS knows that the controller function being registered belongs to the myapp module, which happens to be the module which this AngularJS application is using (specified in the ng-app attribute in the body element).

The controller() function call is what registers the controller function itself. The first parameter passed to the controller() function is the name of the controller function. This is the name you refer to in the ng-controller attribute of the view. The second parameter is the controller function itself.

AngularJS Application Execution

Now our example application is complete, so let me explain what happens when this page is loaded into the browser.

First the HTML document is loaded into the browser, and evaluated by the browser. At this time the AngularJS JavaScript file is loaded, the angular global object is created, and your JavaScript which registers controller functions is executed.

Second, AngularJS scans through the HTML to look for AngularJS apps and views. When AngularJS finds a view it connects that view to the corresponding controller function.

Third, AngularJS executes the controller functions and update (render) the views with data from the model populated by the controller. The page is now ready.

Fourth, AngularJS listens for browser events (e.g. input fields being changed, buttons clicked, the mouse moved etc.). If any of these browser events require a view to change, AngularJS will update the view correspondingly. If the event requires that the corresponding controller function is called, AngularJS will do that too. Not all events require the controller function to be called, even if the view is updated as a result of the event.

That is it. You are now ready to start playing around with your own AngularJS applications. There is a lot more to learn, but that is covered in subsequent texts in this AngularJS tutorial (see top left corner of each page in this tutorial series for a list of topics in the series).

AngularJS Challenges And Critique

Despite AngularJS' success it is not without its challenges. AngularJS makes several bold claims about AngularJS on its project page. Personally, I believe some of those claims to be wrong or at least somewhat misguided. It's not like the model used by AngularJS has not been tried before in other incarnations. That is why I have added an AngularJS critique to this AngularJS tutorial series. If you decide to go ahead with AngularJS I would advice you to at least read the critique too. Too many tutorials just praise AngularJS without looking at its weak spots.

❰ Previous Next ❱