YouTip...
var app = angular.module(**"**myApp**"**, []);
The "myApp" parameter refers to an HTML element in which the application will run.
You can now add controllers, directives, filters, and more to your AngularJS application.
* * *
## Adding a Controller
You can add a controller to your application by using the **ng-controller** directive:
## AngularJS Example
{{ firstName + " " + lastName }}
var app = angular.module(**"myApp"**, []);
app.controller(**"myCtrl"**, function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
[Try it Yourself »](#)
You can learn more about controllers in the (#) chapter.
* * *
## Adding Directives
AngularJS has many built-in directives. You can use them to give your application functionality.
The full list of directives can be found in the (#).
In addition, you can use modules to add your own directives to your applications:
## AngularJS Example
var app = angular.module("myApp", []);
app.directive("tutorialDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
[Try it Yourself »](#)
You can learn more about directives in the (#) chapter.
* * *
## Modules and Controllers in JS Files
Normally AngularJS applications will define the modules and controllers in JavaScript files.
In the following example, the "myApp.js" file contains the application module definition, and the "myCtrl.js" file contains the controller:
## AngularJS Example
{{ firstName + " " + lastName }}
[Try it Yourself »](#)
## myApp.js
var app = angular.module(**"myApp"**, []);
|  | In the module definition, the [] parameter is used to define the dependencies of the module. The square brackets [] indicate that the module has no dependencies. If there were dependencies, the names of the dependent modules would be listed inside the brackets. |
| --- |
## myCtrl.js
app.controller(**"myCtrl"**, function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
* * *
## Functions Affect Global Namespace
Global functions should be avoided in JavaScript. They can be easily overwritten by other script files.
AngularJS Modules keep all functions scoped to the application, avoiding this problem.
* * *
## When to Load the Library?
|  | In our examples, all AngularJS libraries are loaded at the top of the HTML document. |
| --- |
For HTML applications, it is generally recommended to put all scripts at the bottom of the element.
This will speed up the web page loading, as the loading of HTML is not blocked by loading of scripts.
In our multiple AngularJS examples, you will see that the AngularJS library is loaded in the section of the document.
In our examples, AngularJS is loaded in the element, because the call to angular.module can only be made after the library is loaded.
Another solution is to load the AngularJS library in the element, but it must be placed before your AngularJS scripts:
## AngularJS Example
{{ firstName + " " + lastName }}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
[Try it Yourself »](#)