O que é $ Scope no AngularJS? Tutorial com exemplo

Índice:

Anonim

O que é $ scope no AngularJS?

$ scope em AngularJS é um objeto embutido que basicamente liga o "controlador" e a "visão". Pode-se definir variáveis ​​de membro no escopo dentro do controlador que podem então ser acessadas pela visualização.

Considere o exemplo abaixo:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Explicação do código:

  1. O nome do módulo é "app"
  2. O nome do controlador é "HelloWorldCntrl"
  3. Objeto de escopo é o objeto principal que é usado para passar informações do controlador para a visualização.
  4. Variável de membro adicionada ao objeto de escopo

Configurando ou adicionando comportamento

Para reagir a eventos ou executar algum tipo de computação / processamento na Visualização, devemos fornecer comportamento para o escopo.

Os comportamentos são adicionados aos objetos do escopo para responder a eventos específicos que podem ser disparados pela Visualização. Uma vez que o comportamento é definido no controlador, ele pode ser acessado pela visualização.

Vejamos um exemplo de como podemos conseguir isso.

Guru99

Guru99 Global Event


{{fullName("Guru","99")}}

Explicação do código:

  1. Estamos criando um comportamento chamado "fullName". Este comportamento é uma função que aceita 2 parâmetros (firstName, lastname).
  2. O comportamento então retorna a concatenação desses 2 parâmetros.
  3. Na visualização, estamos chamando o comportamento e passando 2 valores de "Guru" e "99", que são passados ​​como parâmetros para o comportamento.

Se o comando for executado com sucesso, a seguinte Saída será mostrada quando você executar seu código no navegador.

Resultado:

No navegador, você verá uma concatenação dos valores de Guru e 99 que foram passados ​​para o comportamento no controlador.

Resumo

  • Várias variáveis ​​de membro podem ser adicionadas ao objeto de escopo, que pode então ser referenciado na visualização.
  • O comportamento pode ser adicionado para trabalhar com eventos que são gerados para ações executadas pelo usuário.
  • O angularjs $rootScopeé o escopo de todo o aplicativo. Um aplicativo pode ter apenas um $ rootScope e é usado como uma variável global. Em Angular JS $ escopos são escopos filho e $ rootScope é escopo pai