AngularJS - Sobre o Angular

Um exemplo de código AngularJS

Agora vamos discutir sobre como configurar a biblioteca AngularJS para ser usada no desenvolvimento de aplicações web. Também estudaremos brevemente a estrutura de diretórios e seu conteúdo.

Importante realizar o download do framework antes de começar.

Agora vamos ver um exemplo simples usando a biblioteca AngularJS. Vamos criar um arquivo HTML como abaixo

teste.html

Incluindo AngularJS

Nós incluímos uma referência ao arquivo AngularJS JavaScript na página HTML para que possamos utilizar o AngularJS.

Em seguida nós indicamos que parte do HTML contém a referência ao aplicativo AngularJS. Este é adicionando o atributo ng-app para o elemento HTML. Você pode adicioná-lo ao corpo do html. Como no exemplo abaixo:

View

A view é esta parte:

O componente ng-controller avisa o controller AngularJS para usar a view. 'helloTo.title' diz ao AngularJS para escrever na model o "Olá To.title" nessa parte do HTML.

Controller

Parte do controller:

Este código registra a função de controller chamando o controller HelloController no module angular chamado teste. Mais a frente será abordado de forma mais clara sobre controllers e modules. A função do controlador está registrada no angular através do angular.module (...) , controller(...) , function(...).

O parâmetro $scope passado para a função do controller é a model. A função de controller é adicionar um objeto JavaScript helloTo, nesse objeto que ele adiciona um campo de título.

Quando a página é carregada no navegador algumas coisas acontecem.

• O documento HTML é carregado e avaliado pelo navegador. O arquivo AngularJS JavaScript é carregado, o objeto global angular é criado. Em seguida, o JavaScript registra qual função do controller é executada.
• Depois, o AngularJS varre o código HTML procurando apps e view. Uma view é localizada, ele se conecta a essa view com a função do controller correspondente.
• Em seguida, o AngularJS executa as funções do controller. Depois, ele mostra as views com os dados da model preenchida pelo controller. A página agora está pronta!

Próxima

AngularJS - Inicio

Características

• Introduz o conceito de RIA - Rich Internet Application
• Fornece opções aos desenvolvedores de escreverem aplicativos do lado do cliente (usando JavaScript) de uma maneira limpa MVC (Model View Controller).
• A aplicação escrita com AngularJS é cross-browser

Recursos

• Data-Binding - É a sincronização automática de dados entre a Model e os componentes da View.

• Scope - Objetos que fazem referência a Model. Eles agem como um intermediário entre o Controller e a View.

• Controller - Funções JavaScript vinculadas a um escopo específico.

• Services - O AngularJS vêm com vários serviços internos, por exemplo $http para fazer um XMLHttpRequests. Estes são objetos únicos que são instanciados apenas uma vez no aplicativo.

• Filters - Selecionam um subconjunto de itens de um array e retorna um novo array.

• Directives - São marcadores de elementos DOM (tais como elementos, atributos, css, e mais). Eles podem ser usados ​​para criar tags HTML personalizadas que servem como novos, widgets personalizados. O AngularJS tem directives internas (ngBind, ngModel ...)

• Templates - Onde a view é renderizada com informações do controller e da model. Estes podem ser um único arquivo (como index.html) ou múltiplas views em uma página usando "partial".
• Routing - Conceito de troca de view.

• Model-View-Controller - O MVC é um padrão de design para dividir uma aplicação em diferentes partes (chamada Model, View e Controller), cada uma com responsabilidades distintas. O AngularJS não implementa MVC no sentido tradicional, mas sim algo mais próximo de MVVM (Model-View-ViewModel).

• Deep Linking - Codifica o estado da aplicação na URL para que ele possa ser marcada. A aplicação pode então ser restaurada a partir do URL para o mesmo estado.

• Dependency Injection - O AngularJS tem um subsistema de dependency injection interno que ajuda o desenvolvedor, tornando a aplicação mais fácil de desenvolver, compreender e testar.

Conceitos

O diagrama abaixo mostra algumas partes importantes do AngularJS que iremos discutir em detalhe nos capítulos seguintes.

Vantagens do AngularJS

• Fornece a capacidade de criar a aplicação com uma  única página, de uma forma muito limpa e sustentável.

• Fornece capacidade de ligar os dados com o HTML, dando assim ao usuário uma experiência rica e responsiva.

• Fornece Teste de Unidade.

• Usa dependency injection e faz uso de separação de interesses.

• Fornece componentes reutilizáveis.

• O desenvolvedor escrever menos código e obtêm mais funcionalidade.

• No AngularJS, views são páginas de html puro, e os controllers escritos em JavaScript fazem o processamento de negócios.

• Aplicativos podem ser executados nos principais navegadores e smartphones, incluindo Android e iOS, tablets e etc.

Desvantagens da AngularJS

• Falta de segurança - Aplicações escritas em AngularJS não são seguras. A autenticação e autorização do lado do servidor é obrigatório para manter uma aplicação segura.
• Dependente - Se o usuário estiver com o JavaScript desativado, verá apenas a uma página normal.

Componentes

O framework AngularJS pode ser dividido em três partes:

• ng-app - Define e linka uma aplicação AngularJS com o HTML.
• ng-model - Linka os valores de dados da aplicação AngularJS com o HTML para inserir dados.
• ng-bind - Linka os dados da aplicação com as tags HTML.

Próxima