AngularJS Module
AngularJS Module
The angular object's module() method is used to create a module. It is also called
AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Here, "myApp" specifies an HTML element in which the application will run.
If you want to add a controller to your application refer to the controller with
the ng-controller directive.
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 = "Ajeet";
$scope.lastName = "Maurya";
});
</script>
</body>
</html>
Test it Now
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.
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
In AngularJS applications, you can put the module and the controllers in JavaScript
files.
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Here "myApp.js" contains:
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet";
$scope.lastName= "Maurya";
});
Here "myCtrl.js" contains:
<!DOCTYPE html>
<html>
<body>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 = "Ajeet";
$scope.lastName = "Maurya";
});
</script>
</body>
</html>