Controller in AngularJS
Mục lục
Concetto di controller in angolare
In Angular, Controller è un costruttore, una volta eseguito, inizializzerà una variabile oggetto, responsabile della gestione, lavorando principalmente con i dati della variabile $ scope (il tipo di dati è oggetto) e view utilizzerà i dati nella variabile $ scope da visualizzare di conseguenza all'utente.
Considera un esempio qui sotto:
<!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>Risultato:
Quando un controller viene assegnato al DOM in HTML utilizzando l'attributo della direttiva ng-controller , Angular riconosce e crea un nuovo oggetto Controller da utilizzare come costruttore, che deve essere eseguito al termine del caricamento del sito Web. Ora Angular crea anche un nuovo oggetto $ scope specifico per quel controller. Nell'esempio sopra, vediamo che in 3 diversi controller, i controller hanno lo stesso parametro chiamato $scope, ma in realtà queste 3 variabili sono 3 variabili inizializzate indipendentemente, le loro proprietà così come i loro nomi, possono essere interrogate solo all'interno del ambito del titolare del trattamento iniziale.
Il contesto dovrebbe utilizzare il controller:
- Per impostazione predefinita, il controller in Angular viene utilizzato per inizializzare il valore e lo stato iniziale per l'oggetto $scope
- Aggiungi metodi (funzioni) all'oggetto $scope
Il contesto non deve utilizzare Controller:
- Manipolazione del DOM (oggetto tag HTML): non utilizzare il Controller per modificare il valore del DOM (contenuto, proprietà), perché angular fornisce un meccanismo di associazione dati che soddisfa questo business.
- Convalida modulo: non utilizzare il controllore per verificare il formato dei dati di input del modulo. In questo caso, usa invece Angular Form Controls.
- Filtra dati: converti il formato dei dati, in questo caso usa l'oggetto Filtro in Angular.
- Condivisione dei dati, in questo caso tramite Angualar Service
- Gestire il ciclo di vita dei componenti
Dichiarazione di un controller in Angular
Metodo 1: dichiarare il controller all'interno di ng-app contenente un nome specifico, ogni controller viene inizializzato tramite il metodo controller dell'oggetto app in angolare. Ogni controller in Angular viene utilizzato per eseguire una determinata attività e appartiene all'ambito di un'applicazione (ng-app).
Per esempio:
<!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 cui ho dichiarato un'app come ng-app="myapp" e all'interno ho creato un controller con il nome ng-controller="mainController", con la struttura HTML sopra, vediamo che il tag contenente ng- controller è all'interno (un figlio tag) del tag contenente l'attributo ng-app. Ciò significa che il controller denominato "mainController" è nell'applicazione "myapp"
Metodo 2: dichiarare il controller tramite la funzione javascript. Se si utilizza questo modo, dichiarare il valore null per l'attributo/direttiva ng-app all'interno della struttura html come sotto il codice di esempio
Per esempio:
<!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 questo caso dichiareremo i controller del livello di script come una funzione in javascript e avremo lo stesso nome del valore che abbiamo dichiarato nella proprietà app-controller.
Nota: il nome del parametro passato nel controller deve essere denominato $scope .
