« Previous Page Next Page »
    

Introduction to AngularJs Modules.

POSTED

AUTHOR: VARUN SINGH

In this tutorials, I am going to introduce about AngularJs Modules with some good and effective examples. The AngularJS module is a container for the different parts of an application and it is a container for the application controllers. A module is a collection of services, directives, controllers, filters, and configuration information. A module is created by using the AngularJS function angular.module.

We can define Application Module and Controller Module in main Html page. But we recomended you to define your Module in seperate .js file and import both js file in the main Html page. In this example we're going to create two modules.


• Application Module is used to initialize an application with controller.
• Controller Module is used to define the controller.





Example to create both module in main Html page :


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="yourApp" ng-controller="yourController">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("yourApp", []);
app.controller("yourController", function($scope) {
    $scope.firstName = "Coder";
    $scope.lastName = "Glass";
});
</script>

</body>
</html>

Try it Yourself

Here we've declared an application app module using angular.module function. We've passed an empty array to it. Here we've declared a controller yourController module using app.controller function.

Example to create Application Module in separate js file( yourApp.js ):



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


Here we've declared an application app module using angular.module function. We've passed an empty array to it.


Example to create Controller Module in separate js file( yourController.js ):



app.controller("yourController", function($scope) {
    $scope.firstName = "Coder";
    $scope.lastName = "Glass";
});


Here we've declared a controller yourController module using app.controller function.





Example to use both Application Module(yourApp.js) and Controller Module(yourController.js) in main Html page:



<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="yourApp" ng-controller="yourController">
{{ firstName + " " + lastName }}
</div>

<script src = "yourApp.js"></script>
<script src = "yourController.js"></script>

</body>
</html>


Try it Yourself

Here we've used application module using ng-app directive and controller using ng-controller directive. We've imported yourApp.js and yourController.js in the main html page.





The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.

« Previous Page Next Page »

Comments: