Creating Our First Module in AngularJs

To build a module we make use of angular.module() function. This function accepts two parameters; first is the name which we want to give to our module and second is an array which contains the name of additional modules on which our module is dependent. If the module is not dependent on any other module, we pass an empty array.

angular.module('MyFirstModule',[]);
// Angular module without any dependencies
angular.module('MyFirstModule',['SomeModule','AnotherModule']);
// Angular module dependent on two modules

Once we are done with creating the module, we can attach different components to it. Components can be different controllers, directives, servies, etc. Let us see an exmaple; here we are attaching a controller to an angular module.

var myApp = angular.module('MyFirstModule',[]);
// Angular module without any dependencies
// myApp will have the reference to the 'MyFirstModule' module

myApp.controller('MyCtrlr',function(){
    // controller code will come here
});

Similarly you can also add a directive to the above created module

myApp.directive('MyDirective',function(){
  return{
    // directive code will come here
    };
});

Finally we can use the above created module in out html file by adding ng-app=’MyFirstModule’ in the desired tag.

Related Posts

Leave a Reply