Angularjs add controller to module tutorial

AngularJS controller:

AngularJS controllers are used to control the data and flow of AngularJS applications. The ng-controller directive is used to define the AngularJS controller.

AngularJS module:

An AngularJS module defines an application and used to separate logics like services, controllers and application etc. It acts as a container for the different parts of an application.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. We create a module named app and then add a controller appCtrl to it. Refer this controller with ng-controller directive in module.

Note: We can also add multiple controllers to a module. Click here to see multiple controllers example.



<!DOCTYPE html>
<div ng-app="testApp" ng-controller="appCtrl">
{{ firstName + " " + lastName }}
var app = angular.module("testApp", []);
app.controller("appCtrl", function($scope) {
    $scope.firstName = "Vishal";
    $scope.lastName = "Gupta";

Try it:

JS Bin on