Use AngularJS Controllers in Your Application - RRutors

Published August 13, 2022

We can add new characteristics or attribute to the HTML element called Directives using AngularJS. AngularJS application functionality provides by a set of built-in directives in AngularJS. We may create your directives with AngularJS as well.

Syntax

The following syntax shows the controller of the AngularJS.

<div ng-app="conApp" ng-controller = "idController">

</div>

<script>

var app = angular.module('conApp', []);

app.controller("idController", function($scope) {

//write object code here.

} );

</script>

 

Examples

The examples show controller functions examples in detail.

Example #1:

Basic Cotroller: the following example shows the AngularJS controller features in web application.

<!DOCTYPE html>

<html lang="en">

<head>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app = "conapp">

<h3> AngularJS Controller Function </h3>

<div ng-controller = "idController" >

<h4> Welcome To {{first.title}} !</h4>

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.first = {};

$scope.first.title = "Our Tutorial";

} );

</script>

</body>

</html>

 

Output

angularjs controller example 1

 

 

Example #2:

AngularJS controller with Static data: the following example shows the "controller" method in web application.

<!DOCTYPE html>

<html lang="en">

<head>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app = "conapp">

<h3> AngularJS Controller Method </h3>

<div ng-controller = "idController" >

First Name: <input type="text" ng-model="fstNme">

<br><br>

Last Name: <input type="text" ng-model="lstNme"><br>

<p> Welcome <b> {{Name()}} </b> to AngularJs Tutorial </p>

</div>

<script>

angular.module("conapp", [])

.controller("idController", function($scope) {

$scope.fstName = "Amit";

$scope.lstName = "sharma";

$scope.Name = function() {

return $scope.fstName + " " + $scope.lstName;

};

});

</script>

</body>

</html>

 

Output

angularjs controller example 2

 

Example #3:

Controller method with dynamic data: the following example shows the "controller" feature in web application.

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<h3> AngularJS Controller Method </h3>

<div ng-app="conApp" ng-controller="nameCtrl">

First Name: <input type="text" ng-model="Name1"><br><br>

Last Name: <input type="text" ng-model="Name2"><br>

<br>

<p> Welcome <b> {{Names()}} </b> To AngularJs Tutorial! </p>

</div>

<script>

var app = angular.module('conApp', []);

app.controller('nameCtrl', function($scope) {

    $scope.Name1 = "";

    $scope.Name2 = "";

    $scope.Names = function() {

        return $scope.Name1 + " " + $scope.Name2;

    };

});

</script>

</body>

</html>

Output

angularjs controller example 3

 

Summary

The controller is the function or method for developing AngularJS web applications. This method controls all values, objects, and variables of the user input data. The controller controls the input and output information.