What is Angular js and what is module and controller ?

Angular js is a javascript framework which is used to build web applications.

Benefits of angular js :

  • Dependency injection
  • Two way data binding
  • Testing
  • It uses model-view-controller
  • Directives, filters etc

Angular js module & controller :

What is Module in angular js

 A Module is a container for different parts of your application i.e. controller, services, directive, filters etc.

You can think of a module as a Main() method in other type of applications.

<script>
    var newApp = angular.module(“newModule”,[]);
</script>

 “newModule” is a name of module and [] is for dependency

 What is Controller in angular js

 A controller is a javascript function, its job is to bind a model for the view to display.

<script>
    var newApp = angular.module(“newModule”,[]);
    var newController = function($scope){
        $scope.message = “Angular js Tutorial”;
    }
</script>

 Binding controller to module :

<script>
    // creating module
    var newApp = angular.module(“newModule”,[]);
    // creating controller
    var newController = function($scope){
        $scope.message = “Angular js Blog”;
    }
    // binding controller to module
    newApp.controller(“newController”,newController);
</script>

 “newController” is name of controller and newController on right is value of controller.

Let’s make it short.

<script>
    var newApp = angular.module(“newModule”,[]); 
    newApp.controller(newController,function($scope){
        $scope.message = “Angular js Blog”
    })
</script>

 Now let’s add some object to a controller.

<script>
    var newApp = angular.module(“newModule”,[]);
    newApp.controller(newController,function($scope){
        var user = {
            name : “John”,
            surname : “Doe”,
            Age : 28
        }
        $scope.userDetails = user;
    })
</script>

 Now the complete working code for this application is given below, you can copy paste this code and run it.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var newApp = angular.module(“newModule”, []);
        newApp.controller(“newController”, function ($scope) {
            var user = {
                name: “John”,
                surname: “Doe”,
                age: 28
            }
            $scope.userDetails = user;
        })
    </script>
</head>
    <div ng-app=“newModule” ng-controller=“newController”>
        Name : {{userDetails.name}}<br />
        Age : {{userDetails.age}}<br />
    </div>
<body>
</body>
</html>

 Output for this code

Now lets create a module and controller and register the controller within the module in one line.

<script>
    var newApp = angular.module(“newModule”,[]).controller(“newController”,function($scope){
        $scope.message = “Angular js blog”;
    })
</script>

 If you like this blog, please share with your friend.

Related Posts

angular js icon

What is two way data binding in angular js ?

Two way data binding keeps the model and view in sync at all times, i.e a change in model, updates the view and a change in view,…

angular js icon

What are angular js directives ? How ng-src and ng-repeat directive works.

Angular js let you extends HTML with new attributes called directives, Angular js has many built in directive two of them are ng-src and ng-repeat.  So if…

angular js icon

How to handle events in angular js

In this blog we will understand how to handle event actions like clicking a button. The common way to handle events is through the functions or methods….

angular js icon

What are the common filters used in angular js?

Filters can do three different things, format, sort and filter data. Filter can be used within a binding expression or a directive, to apply filter we use…

This Post Has 2 Comments

  1. To anyone reading this: The Angular JS project was superseded by Angular (without js) 5 YEARS ago. Angular JS is very outdated and was on long term support untill december 31st 2021 but is currently completely unsupported.

    You will not have a good time picking this up in 2022.

  2. Yes we know this already but still there are some websites out there which needs support and as a good developer you should not afraid of learn new things.
    Basic understanding of angular js it not a bad thing. Through my blogs you will learn angular js basics within a day or two by reading all my angular js blogs.
    Its easy and handy.

Leave a Reply

Your email address will not be published. Required fields are marked *