AngularJS Modules Controllers Guide from Basic to Advanced

div ng-app="myApp".../div

script

/script
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.

Adding a Controller
Add a controller to your application, and refer to the controller with the ng-controller directive:

Example
div ng-app="myApp" ng-controller="myCtrl"
{{ firstName + " " + lastName }}
/div

script

});

/script
Try it Yourself »
You will learn more about controllers later in this tutorial.

Adding a Directive
AngularJS has a set of built-in directives which you can use to add functionality to your application.

For a full reference, visit our AngularJS directive reference.

In addition you can use the module to add your own directives to your applications:

Example
div ng-app="myApp" w3-test-directive/div

script

return {
template : "I was made in a directive constructor!"
};
});
/script
Try it Yourself »
You will learn more about directives later in this tutorial.

Modules and Controllers in Files
It is common in AngularJS applications to put the module and the controllers in JavaScript files.

Example
!DOCTYPE html
html
body

div ng-app="myApp" ng-controller="myCtrl"
{{ firstName + " " + lastName }}
/div

/body
/html
Try it Yourself »
The [] parameter in the module definition can be used to define dependent modules.

Without the [] parameter, you are not creating a new module, but retrieving an existing one.

});