An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module.<\/p>\n
A module is created by using the AngularJS function angular.module<\/p>\n
<div ng-app=”myApp”>…<\/div><\/p>\n
<script><\/p>\n
var app = angular.module(“myApp”, []);<\/p>\n
<\/script><\/p>\n
The “myApp” parameter refers to an HTML element in which the application will run. Now you can add controllers, directives, filters, and more, to your AngularJS application.<\/p>\n
Add a controller to your application, and refer to the controller with the ng-controller directive:<\/p>\n
Example<\/p>\n
<div ng-app=”myApp” ng-controller=”myCtrl”><\/p>\n
{{ firstName + ” ” + lastName }}<\/p>\n
<\/div><\/p>\n
<script><\/p>\n
var app = angular.module(“myApp”, []);<\/p>\n
app.controller(“myCtrl”, function($scope) {<\/p>\n
$scope.firstName = “Demo”;<\/p>\n
$scope.lastName = “User”;<\/p>\n
});<\/p>\n
<\/script><\/p>\n
AngularJS has a set of built-in directives which you can use to add functionality to your application.\u00a0 In addition you can use the module to add your own directives to your applications:<\/p>\n
Example<\/strong><\/p>\n <div ng-app=”myApp” w3-test-directive><\/div><\/p>\n <script><\/p>\n var app = angular.module(“myApp”, []);<\/p>\n app.directive(“w3TestDirective”, function() {<\/p>\n return {<\/p>\n template : “I was made in a directive constructor!”<\/p>\n };<\/p>\n });<\/p>\n <\/script><\/p>\n It is common in AngularJS applications to put the module and the controllers in JavaScript files. In this example, “myApp.js” contains an application module definition, while “myCtrl.js” contains the controller:<\/p>\n Example<\/strong><\/p>\n <!DOCTYPE html><\/p>\n <html><\/p>\n <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n <body><\/p>\n <div ng-app=”myApp” ng-controller=”myCtrl”><\/p>\n {{ firstName + ” ” + lastName }}<\/p>\n <\/div><\/p>\n <script src=”myApp.js”><\/script><\/p>\n <script src=”myCtrl.js”><\/script><\/p>\n <\/body><\/p>\n <\/html><\/p>\n myApp.js<\/u><\/p>\n var app = angular.module(“myApp”, []);<\/p>\n The [] parameter in the module definition can be used to define dependent modules.<\/p>\n Without the [] parameter, you are not creating a new module, but retrieving an existing one.<\/p>\n myCtrl.js<\/p>\n app.controller(“myCtrl”, function($scope) {<\/p>\n $scope.firstName = “Demo”;<\/p>\n $scope.lastName= “User”;<\/p>\n });<\/p>\n Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts. AngularJS modules reduces this problem, by keeping all functions local to the module.<\/p>\n While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body>. This is because calls to angular.module can only be compiled after the library has been loaded.<\/p>\n Example<\/strong><\/p>\n <!DOCTYPE html><\/p>\n <html><\/p>\n <body><\/p>\n <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n <div ng-app=”myApp” ng-controller=”myCtrl”><\/p>\n {{ firstName + ” ” + lastName }}<\/p>\n <\/div><\/p>\n <script><\/p>\n var app = angular.module(“myApp”, []);<\/p>\n app.controller(“myCtrl”, function($scope) {<\/p>\n $scope.firstName = “Demo”;<\/p>\n $scope.lastName = “User”;<\/p>\n });<\/p>\n <\/script><\/p>\n <\/body><\/p>\n <\/html><\/p>\n","protected":false},"excerpt":{"rendered":" An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module. Creating a Module A module is created by using the AngularJS function angular.module <div ng-app=”myApp”>…<\/div> <script> var app = angular.module(“myApp”, []); <\/script>…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8417],"tags":[8425],"class_list":["post-72327","page","type-page","status-publish","hentry","category-angular-js-web-development","tag-angularjs-modules"],"acf":[],"yoast_head":"\nModules and Controllers in Files<\/h4>\n
Functions can Pollute the Global Namespace<\/h4>\n
When to Load the Library<\/h4>\n