Compreendendo o escopo no AngularJS

Quando trabalhamos com AngularJS e começamos a ler a documentação, a primeira coisa que vemos é a palavra EscopoIsso poderia ser traduzido para o espanhol como um escopo, no entanto, o uso dentro dessa estrutura é muito mais amplo.

É por isso que devemos entender que é realmente o Escopo e como ele se comporta em nossos aplicativos, desta forma podemos dar um salto entre tentar usar AngularJS e usá-lo com base, convicção e não apenas repetindo o código.

O mais interessante é que como AngularJS está completamente embutido JavaScript, podemos pegar os conceitos da linguagem e aplicá-los no estudo e compreensão das ferramentas do framework, dando-nos assim um nível adicional de habilidades para podermos desenvolver a lógica que pensamos para nossas aplicações

Requisitos

1- Para cumprir este tutorial, precisamos de um servidor web como Wamp, ou se estamos em ambientes como Linux uma configuração Luminária Basta para nós, a ideia é poder servir nossos arquivos que incorporam AngularJS e não apenas abrir um documento HTML.

2- Devemos também ter um editor de rich text que nos permita escrever o código necessário para nossos exemplos, isso pode ser Texto Sublime ou Notepad ++.

3- Por fim, é necessário ter acesso à Internet para utilizar a inclusão do AngularJS por meio de seu CDN ou ter baixado o arquivo que contém o framework para atendê-lo localmente.

Qual é o escopo?

Não é nada mais do que um objeto simples JavaScript que tem a capacidade de armazenar uma estrutura de valor-chave, além de ser capaz de armazenar propriedades. Isso nos ajuda muito, pois se olharmos desse ponto de vista podemos aplicar os conceitos básicos da linguagem de programação

Como funciona?AngularJS é responsável por criar este objeto automaticamente e embuti-lo na execução de nossa aplicação, daí seu nome é escopo, pois nos permite manipular e acessar os valores dos modelos e também servir como uma interface para comunicação com a visão. Essa estrutura é o que nos permite usar o Escopo dentro de nossos controladores e adicionar propriedades, que podemos chamar diretamente dentro da visão, e assim cumprimos um ciclo onde tudo está conectado e relacionado dentro de nossa aplicação.

Na imagem a seguir, vemos como é a escala ou como AngularJS está gerando diferente Scopes, embora todos derivem de Escopo do elemento que os contém, exceto para o Âmbito Raiz que é o primeiro a ser gerado. Obviamente, se houver dois elementos no mesmo nível dentro do escopo raiz, ambos herdarão dele.

PROLONGAR

Como funciona o protótipo?

Ao contrário de linguagens como Java, C ++ e outros, JavaScript lida com o conceito de herança de forma diferente, é por isso que devemos aprender o que é o uso de protótipo que nada mais é do que um método que existe dentro dos construtores de classe que nos permite adicionar novas propriedades em nosso código.

Apesar de ser algo típico de JavaScript nos permite entender um pouco mais como podemos obter alguns resultados, além de nos ajudar a entender como o Escopo Dentro de AngularJS.

No exemplo a seguir, veremos como criamos uma classe com propriedades ou atributos específicos, então por meio protótipo Podemos adicionar uma propriedade adicional à nossa classe e, portanto, tornando a instância, podemos acessá-la.

O interessante é que existe um método que nos ajuda a verificar se algum atributo é típico da classe, se este método retornar um valor falso saberemos que é um atributo resultante de uma herança com protótipo. Vamos ver o código que representa tudo isso:

 Documento 

Agora vamos ver como no console JavaScript obtemos os resultados que procuramos:

Em seguida, notamos como o método hasOWnProperty Isso nos ajuda a identificar os atributos ou propriedades originais da classe ou não. Assim, podemos entender se criamos ou não uma herança efetiva, uma vez que podemos perceber como estamos estendendo a capacidade de atributo de uma classe.

ImportanteEste tipo de herança por meio de protótipo é o que se aplica AngularJS ao criar o diferente Scopes de um documento em um aplicativo, onde ele se move pela árvore SOL onde primeiro identifica se a propriedade existe ng-app, naquele momento acredite $ rootScope, então encontrar um controlador cria uma variável $ scope que deriva da aplicação do método $ rootScope.new ().
E assim vai aumentando à medida que encontra elementos internos uns dentro dos outros, herdados da estrutura imediatamente anterior, tomando suas funcionalidades derivadas de $ rootScope e suas próprias funcionalidades.

No exemplo a seguir, desenvolvemos uma aplicação na qual temos dois controladores, desta forma vemos como através da herança de escopo as diferentes propriedades ou atributos da mesma são herdados, até resultar em uma estrutura aninhada que pode acessar as propriedades dos pais e estender as funcionalidades do aplicativo como tal. Vamos ver o código:

 {{editors}} tem livros de: {{category}}
Os livros mais populares de {{editores}} são:

 {{livro}}

Aqui, o exemplo nos mostra o que explicamos acima, quando dentro do escopo do Segundo controlador Chamamos a propriedade editors e quando a imprimimos vemos que carrega o valor atribuído do elemento pai Primeiro Controlador. Finalmente, adicionamos um atributo ou livros de propriedades que não estavam no Escopo root e fomos capazes de iterar por meio do $ scope do controlador em questão. Outro aspecto interessante é que as propriedades do Escopo root, embora existam, não os invocamos dentro de um escopo em que possamos acessá-los, portanto, quando virmos o exemplo, não os veremos na tela do navegador

Isso pode ser visto como um pouco rebuscado, mas é a melhor maneira de entender como a variável $ scope funciona dentro de nossos aplicativos e, portanto, ser capaz de aplicar isso dentro de nossa lógica para obter o máximo das ferramentas do framework. Vamos ver na imagem a seguir como é o nosso aplicativo anterior e como os pontos explicados foram atendidos:

Em seguida, notamos como a lista de livros pertence ao objeto Escopo mais interno, porém como não definimos o atributo editorial podemos usar aquele que definimos no controlador pai, chegando à conclusão de que antecipamos o uso de protótipo por parte de AngulaJS.

O observador como um conceito avançado

Há momentos em que queremos continuar e de alguma forma monitorar uma situação particular, é aí que o objeto entra. $ assistir, o que nos permite fazer exatamente o que explicamos.

Como funciona?Adicionando-o como ouvinte de algum elemento dentro de nossa aplicação, este objeto será registrado toda vez que houver uma alteração nele. Desta forma, podemos aplicar condições sempre que ocorre um evento que determinamos. Um exemplo pode ser quando estamos construindo um carrinho de compras, se o usuário adicionar mais de um item podemos mostrar uma mensagem, ou se ele tentar comprar várias vezes, perguntamos se ele tem algum problema.

À primeira vista, pode parecer algo muito avançado, mas AngularJS leva bem perto de nossas mãos, sem complicar muito. O objeto $ assistir Não só pode observar um valor específico, mas também pode atribuí-lo para fazê-lo com uma coleção, o que nos dá a possibilidade de levar em consideração vários valores ao mesmo tempo, e assim obter resultados mais complexos do que com a forma anterior .

Com isso terminamos este tutorial, aprendemos a entender o que Escopo Dentro de AngularJS e para isso nos baseamos nos conceitos mais abstratos de JavaScript, demonstrando assim que esta linguagem nos dá todas as ferramentas para realizar trabalhos tão avançados quanto o mesmo framework de que estamos falando, mas que se dominarmos seus conceitos podemos tornar as ferramentas que usamos em algo superior.

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo