O que é AngularJS?
AngularJS é um poderoso e estrutural framework JavaScript que é mais fácil de implementar em aplicações web simples e permite organizar grandes, cliente pesadas aplicações em algo controlável. É um framework de aplicações web open source, livre e utilizada por milhares de desenvolvedores ao redor do mundo.
AngularJS baseia-se na MVC (Modelo de Controle Vista) padrão que se destina a construir aplicações web ricas para internet e simplificar o desenvolvimento e teste de aplicações usando a arquitetura MVC e separa suas aplicações ricas para internet em modelos, pontos de vista e controladores. AngularJS cria aplicações de uma única página, o que significa que o navegador vai carregar uma única página, independentemente do tamanho do seu aplicativo.
AngularJS foi desenvolvido pela Miskohevery e Adam Abron,mantido por Google; usado internamente por eles e MIT. É licenciado sob a versão de licença Apache 2.0. Ele foi inicialmente lançado em 2009 e a versão estável atual é 1.3.5 (Decemeber 1, 2014).
AngularJS: Nesta secção, vamos resumir os conceitos básicos de AngularJS.
- É uma biblioteca escrita em JavaScript
- não é uma plataforma ou linguagem
- não é um plug-in ou extensão
- Estende-se HTML, CSS e JavaScript
- não é uma biblioteca de manipulação de DOM como jQuery
- Não exige jQuery ou herança
- Não necessita de uma via de ligação de dados e código clichê
Por AngularJS?
- Ele é baseado no padrão de projeto MVC que fornece inúmeras maneiras de construir aplicações web no lado do cliente.
- Ela ajuda a criar aplicações do lado do cliente com menos código e mais flexibilidade.
- Estende-se HTML usando a funcionalidade de directivas, atributos, expressões e modelos para HTML.
- AngularJS é uma arquitetura MVC que simplifica o desenvolvimento e teste de aplicativos facilmente para o lado do cliente.
- É bom para o desenvolvimento de aplicativos de uma única página e front-ends para aplicações baseadas na web.
- Ele tem estrutura flexível e características versáteis. Por isso, é utilizado tanto para grandes projetos de aplicativos e pequenas aplicações pequenas.
Features:
AngularJS (estrutura baseada JavaScript) cria aplicações de forma mais rápida, utilizando vários recursos, como:
- É uma tecnologia do lado do cliente que fornece coisas poderosas para criar aplicações web dinâmicas.
- É uma estrutura baseada MVC, permite aos usuários construir arquitetura adequada e aplicações web sustentáveis.
- É um framework de aplicações web de código aberto usado por milhares de desenvolvedores ao redor do mundo.
- Ele permite o uso de componentes reutilizáveis e reutilização de código.
- Faz criação de interface de usuário (UI) fácil através de processo de ligação de dados.
- abordagem HTML declarativa.
- Ela ajuda a dividir sua aplicação em partes menores.
Diagrama de arquitetura e Componentes: Vamos ter um olhar para o diagrama da arquitetura do quadro AngularJS e seus componentes.
Figure: AngularJS Arquitetura
AngularJS contém módulos que actuam como um recipiente para os diferentes tipos de aplicações, tais como controladores, visualizações, directivas, fábricas, etc.. Módulo especifica como um aplicativo deve ser bootstrapped. usando módulos, processos será mais fácil de entender; você pode reutilizar o código, fim a testes de acabar usa módulos para substituir a configuração etc. É o local para a criação de, registrar e recuperar módulos angulares.
configuração componente aceita apenas fornecedores de módulos, significa que cada serviço, fábrica etc são instâncias de provedor. Ele fornece todos esses casos às rotas.
The rotas são usados para ligar o URL do para controladores e visões.
The Visualizações são usados para adicionar manipulação sofisticada de eventos do usuário. Ela usa ng-viewdirectiva que complementa o serviço via pela template da rota atual para o layout principal (index.html) arquivo.
The controlador controla os dados de aplicações AngularJS que são objetos regulares do JavaScript. AngularJS define ng-controladordirectiva que cria novos objetos de controlador usando a função do controlador. E nova criança está disponível para a função de controlador como $escopocomo mostrado no diagrama.
The visualizações envia elemento ou atributo para o directivas que conta compilador HTML das AngularJS para anexar um comportamento específico para o elemento DOM e seus filhos.
The fábrica é utilizado para definir o serviço AngularJS e é chamado quando um serviço tem de ser instanciada.
Começando com AngularJS:
AngularJS é fácil de começar com. Ele oferece recursos como dois dados forma vinculativa, o que torna marcas personalizadas, atributos que encapsular directivas internas que fazem ampliar a funcionalidade de HTML mais fácil.
- É distribuída arquivo JavaScript e pode ser usado em uma página da Web, incluindo biblioteca AngularJS como mostrado abaixo:
[código]
<script src =”http:// AngularJS ajax.googleapis.com/ajax/libs/~~number=plural /1.2.26/ angular.min.js”>
</escrita>
[/código]
Você também pode verificar a última versão do AngularJS em seu site oficial.
- Você pode criar aplicativo AngularJS como mostrado abaixo:
[código]
<htmlng-app></html>
Ou
<html ng-app = "MyApp"></html>
Ou
<divng-app></div>
Ou
<div ng-app = "MyApp"></div>
[/código]
The ng-app atributo é o elemento raiz do aplicativo AngularJS.
- O controlador pode ser definido como abaixo mostrado:
[código]
<div ng-app = "" ng-controller = "MyController">
<input type = "text"-modelo ng = "mensagem">
</div>
[/código]
The ng-controladordirectiva define o controlador de aplicação. The ng-modelodirectiva vincula o valor dos controles HTML tais como campos de entrada, selecione etc para os dados do aplicativo.
- Implementar o controlador usando $escopo objeto como escrito abaixo:
[código]
functionMyController($escopo){
$scope.message = "Digite seu nome";
}
[/código]
The $escopo objeto refere-se ao modelo de aplicação que invoca o controlador que cria mensagem propriedade no escopo.
Conceitos Básicos:Nesta seção, vamos ter uma discussão detalhada sobre os principais componentes e os conceitos por trás deles.
- módulos
- directivas
- Escopo
- controladores
- Expressões
- Modelos
- Routing
- filtros
módulos:
Módulos fornecem excelente mecanismo para dividir a aplicação em pequenos componentes reutilizáveis e especificar como um aplicativo deve ser bootstrapped. Módulos especificar como você definir os componentes na aplicação e torna a aplicação mais legível. Cada módulo é identificada por um nome único.
directivas:
Directivas são blocos de construção fundamentais da AngularJS que são usados para criar tags HTML personalizadas e podem ser colocados em nomes de elementos, atributos e comentários. Directivas podem ser usados como diretrizes HTML que constroem os widgets complexos com a funcionalidade em camadas.
Escopo:
Âmbito é um objecto que se liga a uma vista ao controlador. Na estrutura MVC, refere-se ao modelo de aplicação. Scopes pode assistir expressões e propagar eventos como eles são organizados em estrutura hierárquica.
controladores:
Controladores são objetos JavaScript que define o comportamento real do seu aplicativo. É responsável pela definição de propriedades e funções modelo usando $escopo objeto. O controlador não armazenar o estado e não interagir com serviços remotos.
Expressões:
As expressões são escritas dentro de chaves "{{ }}"Denotam ligações que referências ao nosso modelo de aplicação. Expressões não suportam demonstrações de fluxo de controle. AngularJS saída será os dados onde eles são usados.
Modelos:
Modelo é apenas old-plain-HTML que não inclui quaisquer modelos específicos de arquivos angulares. Ele vem com um conjunto de modelos vivos para criar controladores etc usando mecanismo de modelo. Os modelos são usados para mostrar informações do modelo e do controlador.
Routing:
Ele é usado para ligar o URL do ao controlador e vista. Routing é cuidado pelos prestadores de serviços chamados $operador de rota para lidar com roteamento que é o provedor do $rota serviço. Em outras palavras, é o carregamento de sub-modelos, dependendo o URL da página.
filtros:
Os filtros são usados com expressões para transformar ou alterar os dados dos modelos. Podemos adicionar expressões ou directivas usando caractere pipe. AngularJS tem alguns dos filtros vulgarmente utilizados tais como:
- moeda: converte o número para o formato de moeda.
- maiúscula: converte seqüências para maiúsculas.
- minúsculas: converte seqüências para minúsculas.
- filtro: seleciona subconjunto de itens de série.
- ordenar por: ordens conjunto pela expressão tais como ordenados alfabeticamente para cordas e numericamente para os números.
Exemplo:
Vamos criar um exemplo simples usando a biblioteca AngularJS e criar um arquivo HTML como FirstExample.html como mostrado abaixo:
Listing1: aplicação AngularJS simples
[código]
<!html DOCTYPE>
<html>
<cabeça>
<script src = “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></escrita>
</cabeça>
<corpo>
<div ng-app =”” ng-controller =”MyController”>
Insira o nome: <input type =”texto” ng-model =”userName”><br>
<br>
Nome completo: {{userName}}
</div>
<escrita>
functionMyController($escopo) {
$scope.userName = “David”;
}
</escrita>
</corpo>
</html>
[/código]
como discutido, nós incluímos AngularJS arquivo JavaScript na página HTML que é definido dentro do <cabeça> tag. A parte seguinte contém app AngularJS que é definido usando o ng-app atributo é executado dentro do <div> tag.
The ng-controlador directiva define o controlador de aplicação. Os AngularJS irá invocar o "MyController” com $escopo objeto que cria propriedade chamada "nome de usuário” no escopo.
Definir o nome do modelo usando ng-modeloDirectiva definido no <entrada> tag. Liga-se o campo de entrada para a propriedade do controlador "nome de usuário”.
Abra o FirstExample.html no navegador e ver o resultado como mostrado na captura de tela abaixo:
Figure: Exemplo AngularJS
Conclusão: Nós já discutimos todos os aspectos da AnguarJS. Antes de concluirmos, vamos resumir os pontos. AngularJS (também conhecido como angular)é um framework de aplicações web open source. Ele fornece lado do cliente MVC arquitetura juntamente com componentes comumente utilizados necessários para aplicações ricas para internet. AngularJS segue modelo de programação declarativa para a construção de interfaces de usuário. O principal objectivo deste quadro é fazer com que o desenvolvimento e teste mais fácil.
Espero que você tem uma compreensão clara do quadro AngularJS. Aprecie a leitura em www.techalpine.com
