All for Joomla All for Webmasters

AngularJS Module

In AngularJS, a module defines an application. It is a container for the different parts of your application like controller, services, filters, directives etc.

A module is used as a Main() method. Controller always belongs to a module.


How to create a module

The angular object’s module() method is used to create a module. It is also called AngularJS function angular.module

  1.  <div ng-app=“myApp”></div>
  2. <script>
  3. var app = angular.module(“myApp”, []);
  4. </script>

Here, “myApp” specifies an HTML element in which the application will run.

Now we can add controllers, directives, filters, and more, to AngularJS application.


How to add controller to a module

If you want to add a controller to your application refer to the controller with the ng-controller directive.

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <div ng-app=“myApp” ng-controller=“myCtrl”>
  6. {{ firstName + ” ” + lastName }}
  7. </div>
  8. <script>
  9. var app = angular.module(“myApp”, []);
  10. app.controller(“myCtrl”, function($scope) {
  11.     $scope.firstName = “Ajeet”;
  12.     $scope.lastName = “Maurya”;
  13. });
  14. </script>
  15. </body>
  16. </html>

How to add directive to a module

AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.

Following is a list of AngularJS directives:

Directive Description
ng-app It defines the root element of an application.
ng-bind It binds the content of an html element to application data.
ng-bind-html Itbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string.
ng-bind-template It specifies that the text content should be replaced with a template.
ng-blur It specifies a behavior on blur events.
ng-change It specifies an expression to evaluate when content is being changed by the user.
ng-checked It specifies if an element is checked or not.
ng-class It specifies css classes on html elements.
ng-class-even It is same as ng-class, but will only take effect on even rows.
ng-class-odd It is same as ng-class, but will only take effect on odd rows.
ng-click It specifies an expression to evaluate when an element is being clicked.
ng-cloak It prevents flickering when your application is being loaded.
ng-controller It defines the controller object for an application.
ng-copy It specifies a behavior on copy events.
ng-csp It changes the content security policy.
ng-cut It specifies a behavior on cut events.
ng-dblclick It specifies a behavior on double-click events.
ng-disabled It specifies if an element is disabled or not.
ng-focus It specifies a behavior on focus events.
ng-form It specifies an html form to inherit controls from.
ng-hide It hides or shows html elements.
ng-href It specifies a URL for the <a> element.
ng-if It removes the html element if a condition is false.
ng-include It includes html in an application.
ng-init It defines initial values for an application.
ng-jq It specifies that the application must use a library, like jQuery.
ng-keydown It specifies a behavior on keydown events.
ng-keypress It specifies a behavior on keypress events.
ng-keyup It specifies a behavior on keyup events.
ng-list It converts text into a list (array).
ng-model It binds the value of html controls to application data.
ng-model-options It specifies how updates in the model are done.
ng-mousedown It specifies a behavior on mousedown events.
ng-mouseenter It specifies a behavior on mouseenter events.
ng-mouseleave It specifies a behavior on mouseleave events.
ng-mousemove It specifies a behavior on mousemove events.
ng-mouseover It specifies a behavior on mouseover events.
ng-mouseup It specifies a behavior on mouseup events.
ng-non-bindable It specifies that no data binding can happen in this element, or it’s children.
ng-open It specifies the open attribute of an element.
ng-options It specifies <options> in a <select> list.
ng-paste It specifies a behavior on paste events.
ng-pluralize It specifies a message to display according to en-us localization rules.
ng-readonly It specifies the readonly attribute of an element.
ng-repeat It defines a template for each data in a collection.
ng-required It specifies the required attribute of an element.
ng-selected It specifies the selected attribute of an element.
ng-show It shows or hides html elements.
ng-src It specifies the src attribute for the <img> element.
ng-srcset It specifies the srcset attribute for the <img> element.
ng-style It specifies the style attribute for an element.
ng-submit It specifies expressions to run on onsubmit events.
ng-switch It specifies a condition that will be used to show/hide child elements.
ng-transclude It specifies a point to insert transcluded elements.
ng-value It specifies the value of an input element.

How to add directives

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <div ng-app=“myApp” w3-test-directive></div>
  6. <script>
  7. var app = angular.module(“myApp”, []);
  8. app.directive(“w3TestDirective”, function() {
  9.     return {
  10.         template : “This is a directive constructor. “
  11.     };
  12. });
  13. </script>
  14. </body>
  15. </html>

Modules and controllers in file

In AngularJS applications, you can 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:

See this example:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  4. <body>
  5. <script src=“myApp.js”></script>
  6. <script src=“myCtrl.js”></script>
  7. </body>
  8. </html>

Here “myApp.js” contains:

  1. app.controller(“myCtrl”, function($scope) {
  2.     $scope.firstName    = “Ajeet”;
  3.     $scope.lastName“Maurya”;
  4. });

Here “myCtrl.js” contains:

  1. <div ng-app=“myApp” ng-controller=“myCtrl”>
  2. {{ firstName + ” ” + lastName }}
  3. </div>

This example can also be written as:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <script src=“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
  5. <div ng-app=“myApp” ng-controller=“myCtrl”>
  6. {{ firstName + ” ” + lastName }}
  7. </div>
  8. <script>
  9. var app = angular.module(“myApp”, []);
  10. app.controller(“myCtrl”, function($scope) {
  11.     $scope.firstName = “Ajeet”;
  12.     $scope.lastName = “Maurya”;
  13. });
  14. </script>
  15. </body>
  16. </html>
PinIt
submit to reddit

Leave a Reply

Top