AngularJS Controllers Your First Controller
Example
A controller is a basic structure used in Angular to preserve scope and handle certain actions within a page. Each controller is coupled with an HTML view.
Below is a basic boilerplate for an Angular app:
<!DOCTYPE html>
<html lang="en" ng-app='MyFirstApp'>
<head>
<title>My First App</title>
<!-- angular source -->
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<!-- Your custom controller code -->
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>
There are a few things to note here:
<html ng-app='MyFirstApp'>
Setting the app name with ng-app lets you access the application in an external Javascript file, which will be covered below.
<script src="js/controllers.js"></script>
We'll need a Javascript file where you define your controllers and their actions/data.
<div ng-controller="MyController as mc">
The ng-controller attribute sets the controller for that DOM element and all elements that are children (recursively) below it.
You can have multiple of the same controller (in this case, MyController) by saying ... as mc, we're giving this instance of the controller an alias.
<h1>{{ mc.title }}</h1>
The {{ ... }} notation is an Angular expression. In this case, this will set the inner text of that <h1> element to whatever the value of mc.title is.
Note: Angular employs dual-way data binding, meaning that regardless of how you update the mc.title value, it will be reflected in both the controller and the page.
Also note that Angular expressions do not have to reference a controller. An Angular expression can be as simple as {{ 1 + 2 }} or {{ "Hello " + "World" }}.
<button ng-click="mc.clicked()">
ng-click is an Angular directive, in this case binding the click event for the button to trigger the clicked() function of the MyController instance.
With those things in mind, let's write an implementation of the MyController controller. With the example above, you would write this code in js/controller.js.
First, you'll need to instantiate the Angular app in your Javascript.
var app = angular.module("MyFirstApp", []);
Note that the name we pass here is the same as the name you set in your HTML with the ng-app directive.
Now that we have the app object, we can use that to create controllers.
app.controller('MyController', function(){
var ctrl = this;
ctrl.title = "My First Angular App";
ctrl.description = "This is my first Angular app!";
ctrl.clicked = function(){
alert("MyController.clicked()");
};
});
Note: For anything that we want to be a part of the controller instance, we use the this keyword.
This is all that is required to build a simple controller.
