Questions And Answers

More Tutorials

Angular Controllers

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'>
 <title>My First App</title>
 <!-- angular source -->
 <script src=""></script>
 <!-- Your custom controller code -->
 <script src="js/controllers.js"></script>
 <div ng-controller="MyController as mc">
 <h1>{{ mc.title }}</h1>
 <p>{{ mc.description }}</p>
 <button ng-click="mc.clicked()">
 Click Me!

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(){

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.


In this page (written and validated by ) you learned about AngularJS Controllers . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Controllers with ES6.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.