Olá pessoas,
Agora que você já instalou o ambiente dev para conseguir escrever suas primeiras aplicações SPA com Angular e provavelmente já deve ter tentado escrever algo e se enrolado bastante com o que vai aonde e que raios são esse monte de arquivos JS vamos entender os conceitos básicos do Angular (sem enrolação) e começar a produzir algo.
Atenção: Este post longo e pode parecer chato em alguns pontos, vou me esforçar para melhorar isto, entretanto é muito importante que você leia e entenda como funciona o framework antes de sair testando uma série de coisas nos próximos posts;
Acompanhe abaixo os links da série:
Série AngularJS1
- Configurando seu ambiente Windows
- Conceitos Básicos
Como funciona o Angular e o que é MVW?
O AngularJS é um framework baseado no pattern MVW (Model, View, Whatever) onde a Model é a camada que representa as entidades da app, as Views seriam a camada de apresentação e Whatever seria qualquer coisa que você queira chamar as Controllers e os Services. Se você quer uma definição bacana de padrões arquiteturais de projetos veja este link.
Na verdade gosto de imaginar que a model seria os objetos $scope, as views são o nosso bom e velho html e as controllers são as controllers mesmo. E se for extremamente necessário definir o que seriam os services (se você realmente se incomoda) eu não os colocaria em lugar nenhum nesse contexto porque para o angular services são apenas objetos reutilizáveis dentro da aplicação .
Views, Diretivas, Controllers e Services
Sem muita enrolação, vamos definir o que faz cada coisa:
Views – São suas velhas e boas amigas tags html. Nada de especial, só o de sempre mesmo.
Diretivas – Existem vários lugares aonde você pode conseguir uma definição mais polida de diretivas (a documentação oficial, por exemplo), eu prefiro definir como atributos especiais que grudam as Views (seu html) com as controllers do Angular. Veja os exemplos:
<!doctype html>
<html ng-app>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Perceba nas linhas destacadas vemos dois elementos que não pertencem ao nosso bom o velho html, as diretivas ng-app e ng-model.
ng-app: “Sinaliza” para o Angular que a partir daquele ponto é iniciada nossa aplicação.
ng-model: Liga o valor inserido no campo com o valor apresentado entre chaves (curly braces ou double mustaches). Quando um valor é passado de dentro do framework para a view chamamos isso de Data-binding. Calma.. Vamos falar mais disso depois.
Diretivas mais comuns
ng-repeat: Itera entre elementos criando uma repetição de resultados. Muito comum quando você tem uma lista de objetos e quer mostra-los na View.
<ul>
<li ng-repeat="cor in cores">
{{cor}}
</li>
</ul>
ng-click: Invoca o evento click de uma objeto na View. Muito comum quando queremos executar uma função presente em nossa controller.
<button class="btn btn-primary" ng-click="btnClick()">Click aqui</button>
ng-show / ng-hide: Exibe ou oculta um determinado item da view.
<ul>
<!-- ng-show mostrará somente se a função retornar true -->
<li ng-show="somentePares()">{{numeros}}</li>
</ul>
ng-disable: Inclui o atributo disable no elemento html da view.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<!-- ng-model 'grudará' o valor de nossa busca numa variável do Angular -->
<input type="text" class="form-control" placeholder="Buscar" ng-model="busca" required>
</div>
<!-- graças a ng-disabled o botão ficará desativado se não houver valor no campo busca -->
<button type="submit" class="btn btn-default" ng-disabled="!busca" ng-click="btnBuscar(busca)">Submit</button>
</form>
ng-if: Executa uma comparação exibindo o elemento em questão caso essa verificação seja verdadeira.
<!-- esta div so aparecerá se o ususario ja estiver cadastrado -->
<div class="alert alert-warning" role="alert" ng-if="usuarioCadastrado()">
<h2>Usuário já cadastrado!</h2>
</div>
<!-- esta div so aparecerá se o usuário NÃO estiver cadastrado -->
<div ng-if="!usuarioCadastrado()">
<h2>Cadastrado de usuário</h2>
<form class="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Seu Nome" ng-model="usrNome" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seu Email" ng-model="usrEmail" required>
</div>
<button type="submit" class="btn btn-default" ng-disabled="!busca" ng-click="cadastrarUsuario()">Submit</button>
</form>
</div>
Você deve ter percebido nos casos da ng-click e ng-show/hide que diretivas suportam funções e condições como valor.
Mostrarei depois: Você também pode criar suas próprias diretivas. Isso é muito bom em termos de “componentização” (não, essa palavra não existe) de elementos. Por exemplo, você pode criar uma galeria de fotos padrão e simplesmente chamar a diretiva passando as fotos:
<!-- Esperamos que ao renderizar a diretiva o Angular mostre a galeria e um botâo para adicionar uma nova foto --> <minhaGaleria datasource="fotos" add="foto"></minhagaleria>
Mas não vamos apressar as coisas, este post já está ficando bem grande graças a complexidade das diretivas.
Controllers – Digamos que você queira escrever uma calculadora. É justo dizer que você deveria escrever as operações em algum lugar que não fosse a view:
Teste este exemplo no Plunker.
Perceba que usamos algumas diretivas que você já viu e outras que você ainda não conhecia. A diretiva ng-controller sinaliza para o Angular que a partir daquela tag o conteúdo está vinculado a controller específica.
Services – Como eu disse anteriormente services são “pedaços de código reutilizáveis” dentro da sua aplicação.
Vamos fazer algumas adaptações na tag scripts no exemplo anterior para usarmos services:
Teste este exemplo no Plunker.
Injeção de dependências (DI – Dependency Injection)
Não sei se você percebeu mas para usar nosso service, foi necessário chamá-lo como parâmetro dentro do controller e obviamente adiciona-lo como source na nossa index.html. Isso acontece porque o Angular funciona com injeção de dependências, ou seja, se você quer usar um pedaço de código que não e em seu contexto atual (ex. Quero chamar um service na minha controller) você precisará injetar uma chamada para este código na função de seu contexto. Pareceu difícil né? Na verdade não é… eu só não consegui explicar isso de maneira mais simples..
Serviços do AngularJS (Built-in Services)
No mundo real nós sabemos que os problemas serão muito mais complexos que estes e você com certeza deve estar morrendo de vontade de chamar uma API dentro de um service e passar os resultados para dentro de uma controller pois isso é o que a maior parte das aplicações fazem.
Mas antes você deve saber que o Angular possui seus próprios services. Os mais comuns são $http, $location e $window:
$http – Realiza chamadas via protocolo http. Você verá bastante isso quando for se comunicar com uma API externa, seja para simplesmente pegar alguns valores ou separar as chamadas de um CRUD inteiro de uma entidade.
$location – Esta é responsável por alguns recursos de navegação é um service baseado no window.location do JS. No caso do Angular, window.location se tornaria $location.path().
$window – Responsável por recursos da janela ativa do navegador,o que em JS comum seria um alert(), aqui no Angular seria um $window.alert();
Mas vamos ao que interessa! No exemplo abaixo eu mostro como fazer uma chamada para a API externa Numbers. Esta API retorna curiosidades sobre os números. Basta informar o número e nosso Service enviará uma chamada Http.Get para a API e a mesma retornará um JSON com a resposta:
Teste este exemplo no Plunker.
Nota: O Plunker exige chamadas https e a Numbers API só suporta chamadas http. Para testar esse código copie e cole do Plunker para seu editor favorito, salve e teste em seu navegador.
Mostrarei depois: Se você já tem conhecimento prévio de AngularJS você deve estar se perguntando porque eu não falei das diferenças entre Service e Factory e porque eu não comentei sobre os objetos do tipo $promise e da importância do .then() quando trabalhamos com chamadas HTTP. A resposta para sua pergunta é: Aguarde e confie! Este assuntos serão abordados em posts mais densos, este post já ficou longo demais e meu objetivo é só te mostrar como as coisas se encaixam antes de começarmos a escrever posts baseados em exemplos práticos (do mundo real).
Por enquanto, é só tudo isso! 😉
felippedev.net 
Pingback: AngularJS 1 – 1 Configurando seu ambiente Windows | felippedev.net