AngularJs Modules

What is Angular Modules? How to define it?

In AngularJs modules have two different perspectives as below

· A module is container of the different part of the application like controllers, services, directives, filters etc.

· The angular.module is a global place of creating, retrieving and registering the modules. All the modules in an application either it is angular core module or 3^rd party that should be available in the application should be registered using angular.module.

Now we will see the above two definition in more detail

1). Most of the applications do have a single entry point (main method) that instantiate and club together the different part of the application. But here in AngularJs we don’t have that instead in AngularJs modules decoratively specify how the application will be structured and bootstrapped.

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

2).A module is a collection of services, directives, controllers, factory, filters and configuration information. The example of use of module

The AngularJs code sample

var app = angular.module('myApp', []);
app.controller('myAppCtrl', function ($scope) {       
    $scope.sms ="Hello Ng  Module...."; 
});

HTML Code sample as given below

<div ng-app="myApp">
    <div ng-controller="myAppCtrl">
        <div>
            <h2>{{sms}}</h2>
        </div>
    </div>
</div>

Full Live code (HTML + AngularJs)sample as given below

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script>
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function ($scope) {         
$scope.sms ="Hello Ng  Module....";
});
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myAppCtrl">
        <div>
            <h2>{{sms}}</h2>
        </div>
    </div>
</body>
</html>

Go to live demo

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz