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 *