what is AngularJS Module

AngularJS Module

AngularJS Module is container that contains the different parts of your application like filters, controllers, directives, services, etc. that lets you, how an application should be bootstrapped. Any library should be specifying in the module that you want to use.

Creating Module

You need to use module() method to create module in AngularJS.  angular.module() is function for this.

<div ng-app="testApp">

    --- code here----

</div>

<script>

    var app = angular.module("testApp", []);

</script>

"testApp" is the main module and specifies an HTML element in which the application will run. Any library should be specify in the module that you want to use and You can also use third-parties components as below

angular.module('testApp', [

    'testApp.controllers',

    'testApp.filters',

    'testApp.services',

    'testApp.directives',

    // 3rd party dependencies

    'ui.bootstrap',

    'btford.socket-io'

    ]);

Create Controller Module

<div ng-app="testApp">

    <div ng-controller="empController">

        {{message}}

    </div>

</div>

<script>

    var testApp = angular.module("testApp", []);

    testApp.controller("empController", function ($scope) {

        $scope.message = "Welcome to code-view.com";

    });

</script>

Here, testApp is an object of a module while controller() method creates a controller inside "testApp" module. So, "myController" always will use inside "testApp" module because it not become a global function.

Creating a Directive

AngularJS has lots of build-in directive but also provide facility to create own directive inside the module as below

<div ng-app="testApp" ng-controller="empController">

    <div>

        {{message}}

    </div>

    <div code-view-directive></div>

   

</div>

<script>

    var testApp = angular.module("testApp", []);

    testApp.controller("empController", function ($scope) {

        $scope.message = "Welcome to code-view.com";

    });

    testApp.directive("codeViewDirective", function () {

        return {

            template: "created custome directive here!"

        };

    });

</script>