Controller in AngularJS

24-07-2022
Toanngo92
0 Comments

Mục lục

Controller concept in Angular

In Angular, Controller is a constructor, when executed, it will initialize an object variable, responsible for handling, mainly working with the data of the $scope variable (data type is object), and view will use the data in the $scope variable to display accordingly to the user.

Consider an example below:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examController"> <div ng-controller="headerController"> {{name}} - {{data}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examController', []); app.controller('headerController', function($scope){ $scope.name = "This is header"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope){ $scope.name = "This is footer"; }); </script> </body> </html>

Result:

When a controller is assigned to the DOM in HTML using the ng-controller directive attribute, Angular will recognize and create a new Controller object to use as a constructor, which is to be run when the website has finished loading. Now Angular also creates a new $scope object specifically for that controller. In the above example, we see that in 3 different controllers, the controllers have the same parameter named $scope, but in fact these 3 variables are 3 independently initialized variables, their properties as well as their names, It can only be queried within the scope of the initiating controller.

Context Should Use Controller:

By default, the Controller in Angular is used to initialize the value and initial state for the $scope . object
Add methods (functions) to the $scope . object

Context should not use Controller:

Manipulating the DOM (HTML tag object): do not use the Controller to change the value of the DOM (content, properties), because angular provides a data-binding mechanism that meets this business.
Validate form: do not use the controller to check the input data format of the form. In this case use Angular Form Controls instead.
Filter data: convert data format, in this case, use the Filter object in Angular.
Sharing data, in this case using Angualar Service
Manage the lifecycle of components

Declaring a controller in Angular

Method 1: Declare controller inside ng-app containing specific name, each controller is initialized through controller method of app object in angular. Each controller in Angular is used to perform a certain task and it belongs to the scope of an application (ng-app).

For example:

 <!DOCTYPE html> <html> <head> <title>Example controller</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <div ng-controller="mainController"> <h1>Thông tin nhân sự</h1> <table> <thead> <tr> <th>Tên</th> <th>Tuổi</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>{{employee.name}}</td> <td>{{employee.age}}</td> <td>{{employee.website}}</td> </tr> </tbody> </table> </div> </div> </body> <script> var app = angular.module("myapp", []); app.controller("mainController", function ($scope) { $scope.employee = { name: 'Toanngo92', age: 20, website: 'https://hocvietcode.com' }; }); </script> </html>

In which I declared an app as ng-app="myapp" and created a controller inside with the name ng-controller="mainController", with the above HTML structure, we see the tag containing the ng- controller is inside (a child tag) of the tag containing the ng-app attribute. Meaning that the controller named "mainController" is in the application "myapp"

Method 2: Declare controller via javascript function . If using this way, declare null value for attribute/directive ng-app inside html structure like below sample code

For example:

 <!DOCTYPE html> <html> <head> <title>Example controller</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body> <div ng-app=""> <div ng-controller="mainController"> <h1>Thông tin nhân sự</h1> <table> <thead> <tr> <th>Tên</th> <th>Tuổi</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>{{employee.name}}</td> <td>{{employee.age}}</td> <td>{{employee.website}}</td> </tr> </tbody> </table> </div> </div> </body> <script> function mainController($scope) { $scope.employee = { name: 'Toanngo92', age: 20, website: 'https://hocvietcode.com' }; } </script> </html>

In this case we will declare the script layer controllers as a function in javascript and have the same name as the value we declared in the app-controller property.

Note: the name of the parameter passed in the controller must be named $scope .