Controlador em AngularJS
Mục lục
Conceito de controlador em Angular
Em Angular, Controller é um construtor, quando executado, irá inicializar uma variável objeto, responsável pelo manuseio, principalmente trabalhando com os dados da variável $scope (o tipo de dado é objeto), e a view utilizará os dados da variável $scope para exibir de acordo com o usuário.
Considere um exemplo abaixo:
<!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>Resultado:
Quando um controlador é atribuído ao DOM em HTML usando o atributo da diretiva ng-controller , o Angular reconhecerá e criará um novo objeto Controller para usar como construtor, que deve ser executado quando o site terminar de carregar. Agora, o Angular também cria um novo objeto $scope especificamente para esse controlador. No exemplo acima, vemos que em 3 controllers diferentes, os controllers possuem o mesmo parâmetro chamado $scope, mas na verdade essas 3 variáveis são 3 variáveis inicializadas independentemente, suas propriedades assim como seus nomes. escopo do controlador inicial.
O contexto deve usar o controlador:
- Por padrão, o Controller em Angular é usado para inicializar o valor e o estado inicial do objeto $scope .
- Adicione métodos (funções) ao objeto $scope .
O contexto não deve usar o controlador:
- Manipulando o DOM (HTML tag object): não use o Controller para alterar o valor do DOM (conteúdo, propriedades), pois o angular fornece um mecanismo de vinculação de dados que atende a esse negócio.
- Validar formulário: não use o controlador para verificar o formato dos dados de entrada do formulário. Nesse caso, use controles de formulário angular.
- Filtrar dados: converta o formato dos dados, neste caso, use o objeto Filtro em Angular.
- Compartilhamento de dados, neste caso usando o Serviço Angular
- Gerenciar o ciclo de vida dos componentes
Declarando um controlador em Angular
Método 1: Declare o controlador dentro do ng-app contendo o nome específico, cada controlador é inicializado através do método controller do objeto app em angular. Cada controlador em Angular é usado para realizar uma determinada tarefa e pertence ao escopo de uma aplicação (ng-app).
Por exemplo:
<!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>No qual declarei um aplicativo como ng-app="myapp" e criei um controller dentro com o nome ng-controller="mainController", com a estrutura HTML acima, vemos a tag contendo o ng- controller dentro (um child tag) da tag que contém o atributo ng-app. Significando que o controlador chamado "mainController" está no aplicativo "myapp"
Método 2: Declare o controlador via função javascript. Se estiver usando dessa maneira, declare o valor nulo para o atributo/diretiva ng-app dentro da estrutura html, como o código de exemplo abaixo
Por exemplo:
<!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>Neste caso vamos declarar os controladores da camada de script como uma função em javascript e ter o mesmo nome do valor que declaramos na propriedade app-controller.
Nota: o nome do parâmetro passado no controlador deve se chamar $scope .
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
