Angular Modules

As our application grows, we need to consider the possibility of splitting it into different modules. It comes with it a lot of advantages, thus helping us to find the best way to test and evolve each module separately from the others and also to share each module with other projects.
Module serves as a container of different parts of your app such as controllers, services, filters, directives, etc. Modules can be referenced by other modules through Angular’s dependency injection mechanism.
Built-in Modules
AngularJS has several built-in modules. The ng module defines many directives, filters, services for our use. We have already used some of the directives from this module such as ng-model, ng-controller, etc. Similarly, we can also create your own module and use it in your app.
Creating a module:
Creating Our First Module To create a module, we call the angular.module() function. The first argument to the function is the module name. The second argument is an array that specifies the additional modules upon which this module depends. If there’s no dependency you just pass an empty array.
angular.module(‘firstModule’,[]);//defines a module with no dependencies
Array [] passed in above example is the list of modules that app depends on, if there are no dependencies then we pass Empty Array i.e. [].
angular.module(‘firstModule’,[‘moduleA’,’moduleB’]); //defines a module with 2 dependencies
Once you have a module, you can attach different components.
The call to angular.module() returns a reference to the newly created module. This is how we can attach a controller to the above module:
<html ng-app="myApp">
<html>
<script src="js/angular.min.js"></script>
<body ng-controller="myCtrl">
<div >
  <p>Enter the First Name: <input type="text" ng-model="fname"></p>
  <p>Enter the Last Name: <input type="text" ng-model="lname"></p>
  <button ng-click="getFullName()">Get Full Name</button>

  Full Name : <label ng-bind="fullName"></label>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope){
    $scope.fname = "";
    $scope.lname= "";
    $scope.fullName ="";
    $scope.getFullName = function(){
      $scope.fullName = $scope.fname + " " + $scope.lname;
    }
  });
</script>
</body>
</html>