By: Prem Tiwari | Last Updated: | In: Angular JS
Hello friends, hope you are doing good, today I am going to share a very useful tutorial with about “AngularJS Module: Beginner Tutorial”. This tutorial is specially designed for the AngularJS beginners or who want to start with AngularJS.
In this tutorial, I have added some real time examples which help you more to create a module based application by using the AngularJS. An AngularJS module is mainly used as Main() Method and a controller always belongs to a module.
Lets start to create a AngularJS module by using the angular.module function. In the below example “myApp” specifies an HTML element in which the application will run.
1 2 3 4 5 6 7 8 9 | <div ng-app="myApp">...</div> <script type="text/javascript"> var app = angular.module("myApp", []); </script> |
Now, let’s add an angular js controller with the module to run an AngularJS application. Below is the complete example of adding a controller with a module. Copy the below code and paste it into your HTML page and test this practical example to more understand the AngularJS module.
…make sure you have added the angularJS file in your page before running any angular application.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < !DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Prem"; $scope.lastName = "Tiwari"; }); </script> </body> </html> |
When we create a SngularJS real application, then we always put the Modules and Controllers in a separate JS file. In this tutorial, I have created “AngularJSApp.js” file to add modules and created “AngularJSCtrl.js” for controllers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < !DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script src="AngularJSApp.js"></script> <script src="AngularJSCtrl.js"></script> </body> </html> |
You can also add the modules with controllers in the same file like below examples.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < !DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Prem"; $scope.lastName = "Tiwari"; }); </script> </body> </html> |
Hope this beginner tutorial help you, if you have any question related to the angularJS, then feel free to put your comments in the below comment section and also forget to like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool AngularJS tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
angular controller, angular modules, angularjs tutorial, angularjs tutorial for beginners, how to a angularjs controllers, how to a angularjs modules
