AngularJS | Modules

The AngularJS module defines the functionality of the application which is applied on the entire HTML page. It helps to link many components. So it is just a group of related components. It is a container which consists of different parts like controllers, services, directives.

Note: This modules should be made in a normal HTML files like index.html and no need to create a new project in VisualStudio for this section.

How to create a Module:



var app = angular.module("Module-name", []);

In this [] we can add a list of components needed but we are not including any components in this case. This created module is bound with any tag like div, body, etc by adding it to the list of modules.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div ng-app = "module-name">
    The code in which the module is required.
</div>

chevron_right


Adding a Controller:

app.controller("Controller-name", function($scope) {
    $scope.variable-name= "";
});

Here, we can add any number of variables in controller and use them in the html files, body of the tag in which the controller is added to that tag by writing:

filter_none

edit
close

play_arrow

link
brightness_4
code

<body>
<div ng-app="Module-name">
    <div ng-controller="Controller-name">
        {{variable-name}}
    </div>
  
<!-- This wont get printed since its
not part of the div in which 
controller is included -->
{{variable-name}}  
</div>
</body>

chevron_right


Module and Controllers in Files: While we can make modules and controllers in the same file along with the HTML file which requiring it however we may want to use this module in some other file. Hence this will lead to redundancy so we will prefer to create Module, Controller and HTML file separately. The Module and Controller are to be stored by using .js files and in order to use them in the HHTML file we have to include them in this way:

Example:

  • DemoComponent.js
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Here the Component name is DemoComponent
    // so saving the file as DemoComponent.js 
    app.controller('DemoController', function($scope) {
        
        $scope.list = ['A', 'E', 'I', 'O', 'U'];
        $scope.choice = 'Your choice is: GeeksforGeeks';
          
        $scope.ch = function(choice) {
            $scope.choice = "Your choice is: " + choice;
        };
          
        $scope.c = function() {
            $scope.choice = "Your choice is: " + $scope.mychoice;
        };
    });

    chevron_right

    
    

  • Module-name: DemoApp.js
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var app = angular.module('DemoApp', []);

    chevron_right

    
    

  • index.html file
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Modules and Controllers in Files
        </title>    
    </head>
      
    <body ng-app="DemoApp">
        <h1>
            Using controllers in Module
        </h1>
          
        <script src=
        </script>
          
        <script src="DemoApp.js"></script>
        <script src="DemoController"></script>
           
        <div ng-app="DemoApp" ng-controller="DemoController">
            Vowels List : <button ng-click="ch('A')" >A</button
              
            <button ng-click="ch('E')" >E</button>
            <button ng-click="ch('I')" >I</button>
            <button ng-click="ch('O')" >O</button>
            <button ng-click="ch('U')" >U</button>
              
            <p>{{ choice }}</p>
           
            Vowels List :
            <select  ng-options="option for option in list" 
                ng-model="mychoice" ng-change="c()">
            </select>
              
            <p>{{ choice }}</p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

Output:
Controllers

Note: It makes sure the module and component files are in the same folder otherwise provide the path in which they are saved and run.

Directives in a Module: To add a directive in module follow the steps:

  • Creating a module like we did earlier:
    var app = angular.module("DemoApp", []);
  • Creating a directive:
    app.directive("Directive-name", function() {
        return {
            template : "string or some code which is to be executed"
        };
    });
    

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   
<head>
    <title>
        Modules and Controllers in Files
    </title>    
  
    <script src=
    </script>
</head
      
<body>
  
  <div ng-app="GFG" w3-test-directive></div>
  
  <script>
  var gfg_app = angular.module("GFG", []);
  gfg_app.directive("w3TestDirective", function() {
      return {
          template : "Welcome to GeeksforGeeks!"
      };
  });
  </script>
  
</body>
</html>

chevron_right


Output:

Welcome to GeeksforGeeks!

Note: Here anything to be printed should not be put in the div which is calling the directive since it gets overwritten by the code in the template.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.