Angular js

Superheroic JavaScript MVW Framework

O que é AngularJs AngularJs é um framework baseado em Java Script usado para criar aplicações web de forma dinâmica . Trabalha dinamicamente com SPA (Single Page Application) . O vinculo direto de dados e injeção de dependência Guice elimina muito código que deveria ser escrito . Tudo isto acontece dentro do browser tornando fácil o uso de qualquer tecnologia de servidores . Ele é o que o html deveria ser ! Tem o objetivo de tornar mais rápido o desenvolvimento e teste de aplicações web .

Ligação de dados entre camadas

História do AngularJs AngularJS foi originalmente desenvolvido em 2009 por Misko Hevery e Adam Abrons como um software por trás de um serviço de armazenamento JSON(JavaScript Object Notation) online, que teria preço estimado por megabyte, para aplicações pré-construídas (easy-to- make) para as empresas. Este empreendimento foi disponibilizado em "GetAngular.com", e teve alguns inscritos, antes de os dois decidirem abandonar a ideia comercial e distribuir Angular como uma framework open-source. Abrons deixou o projeto, mas Hevery, que trabalha no Google continuou seu desenvolvimento e manteve o framework em conjunto com alguns colegas do Google como Igor Minár e Vojta Jína .

História do AngularJs O Angular encontra-se hoje na versão estável 1.4.8 e já possui a versão beta 2.0 Com a versão 2.0 espera-se : Aumento de velocidade no desenvolvimento e performance. X Plataform : IOS , Android , Desktop e web . Ganhos com a padronização Mais simplicidade no desenvolvimento Time de desenvolvimento

SPA - Single Page Application As SPAs são aplicações completas, desenvolvidas em JavaScript, que funcionam quase como se estivessem sendo executadas nativamente no desktop. O Google foi pioneiro nesta tecnologia e o mundo o seguiu. Atualmente, a maior parte das aplicações “web 2.0” usam este modelo: o Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o FourSquare, o Instagram, blogs, sites corporativos, dentre outros.

Abordagem do AngularJs O HTML trabalha apenas com páginas estáticas o que limita muito o seu uso e para utilizar recursos dinâmicos com o HTML temos duas possibilidades : Bibliotecas : Onde carregamos junto com nosso código como por exemplo , a JQuery . Framework : Que disponibiliza recursos para o uso de recursos dinâmicos O AngularJS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio.

Abordagem do AngularJs O framework Angular adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views . Como resultado, AngularJS abstrai a manipulação do DOM(Document Object Model) e melhora os testes. Com isso é possivel : Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código.

Abordagem do AngularJs Considera os testes do aplicativo tão importantes quanto seu desenvolvimento. A dificuldade do teste é diretamente afetada pela maneira como o código é estruturado. Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento do aplicativo evolua em ambos os lados, de forma paralela, e permite o reuso de código. Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação.

Abordagem do AngularJs Usando injeção de dependencia Guice, o Angular traz serviços comumente designados ao lado servidor da aplicação, como controllers para os componentes visuais, para o lado cliente da aplicação. Consequentemente, o peso do backend é radicalmente reduzido, tornando as aplicações muito mais leves. Angular ensina o navegador nova sintaxe através de uma construção que chamamos de directivas. Angular trabalha facilmente com múltiplas arquiteturas como MVC , MVP e MVVM . Nasceu com o objetivo de acelerar o desenvolvimento de CRUD(Create ,

Não sofra mais com ... Registro de retorno de Callback : Remover código clichê comum, tais como chamadas de retorno é uma coisa boa porque reduz a quantidade de codificação JavaScript você tem que fazer, e isso torna mais fácil para ver o que seu aplicativo faz. Manuseio do DOM : DOM é o pilar de aplicações AJAX, mas é complicado e propenso a erros. Pela abordagem declarativa que descreve como a UI(Interface do Usuário) deve mudar à medida que as suas alterações ocorrem você se livra do baixo nível tarefas de manipulação DOM. A maioria dos aplicativos escritos com Angular nunca tem que manipular programaticamente o DOM, embora você possa se você quiser.

Não sofra mais com ... Empacotamento de dados para UI : operações CRUD compõem a maioria das tarefas dos aplicativos Ajax(Asynchronous Javascript and XML). O empacotamento feito pelo Angular padroniza e elimina quase todo código clichê , permitindo o gerenciamento do fluxo geral da aplicação, em vez de todos os detalhes de implementação. Inicio da aplicação e ambiente : Normalmente você precisa escrever um monte de código só para ter um exemplo "Hello World" em AJAX. Com Angular você pode inicializar facilmente os serviços, que são auto-injetado em seu aplicativo . Isso permite que você comece a desenvolver rapidamente. Como um bônus, você tem controle total sobre o processo de inicialização em testes automatizados.

Arquitetura - MVC MVC é um padrão de arquitetura de software (design pattern) que separa a representação da informação da interação do usuário com ele. O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e funções. Uma visão (view) pode ser qualquer saída de representação dos dados, como uma tabela ou um diagrama. É possível ter várias visões do mesmo dado, como um gráfico de barras para gerenciamento e uma visão tabular para contadores. O controlador (controller) faz a mediação da entrada, convertendo-a em comandos para o modelo ou visão. As ideias centrais por trás do MVC são a reusabilidade de código e separação de conceitos.

Arquitetura - MVP MVP é uma evolução do MVC que se comunica bidirecionalmente com as outras camadas, evitando que o Model tenha que se comunicar diretamente com o View sem passar pelo Controller e este último é fundamental para a interação com o usuário. O MVP desacopla as funções e torna a arquitetura ainda mais modular. A camada Presenter é ciente de tudo o que ocorre nas outras duas camadas e deixa-as cientes do que ela está fazendo. A interação com usuário é feita primariamente pelo View, e este pode delegar ao Presenter determinadas tarefas. Há uma relação um-para-um entre estas camadas. Nesta relação há uma referência do View para o Presenter mas não o oposto. É possível vincular dados do View com o Model através de data binding. Isto ocorre na variação Supervising Controller, em oposição à variação Passive View onde a View essencialmente só possui o desenho da UI. O View pode conter código para manipular a UI. Por causa do total desacoplamento, testar se torna uma tarefa mais simples.

Arquitetura - MVVM MVVM é uma pequena evolução do MVP em um lado e um retrocesso em outro. Nele o ViewModel não está ciente do que ocorre no View mas este está ciente do que ocorre no ViewModel. No caso do Model ambos estão cientes do que ocorre em cada um. O nome se dá porque ele adiciona propriedades e operações ao Model para atender as necessidades do View, portanto ele cria um novo modelo para a visualização. É possível associar vários Views para um ModelView. É comum que os Views sejam definidos de forma declarativa (HTML/CSS, XAML, etc.). O data binding é feito entre o View e o ViewModel. Com este padrão é possível reduzir a quantidade de código para manter. Algumas automações são possíveis por ter todas as informações necessárias no ViewModel. É um padrão que está intimamente ligado ao WPF (Windows Presentation Foundation)

Arquitetura - MVW Exposto os modelos de arquitetura podemos afirmar que o AngularJs trabalha com qualquer arquitetura e por isso ele também é conhecido como framework MVW (Model - View - Whatever )

Pontos positivos do Angular Mantido pelo Google Documentação , API e plugins em abundância Utilização de Java Script Uso do html como um template de Java Script Orientado para o SPA Curva de aprendizado rápido Integração com testes

Pontos negativos do Angular Retrocompatilidade da versão 2 com as anteriores Maior integração com o DOM Client-Side pode ter consequências negativas como : Dependência do ambiente e browser do usuário. Lentidão com os indexadores de redes sociais que demandam mais trabalho para contornar o problema. Estatisticas e monitoramento fragmentado Não é trivial o seu uso adaptado em aplicações já concebidas Arquitetura da aplicação

Visão Geral Templates São os arquivos html que recebem as tags(marcadores) do Angular . Compilador Efetua o processamento do template , renderiza o DOM e exibe a View Diretivas São marcadores em um elemento DOM que atribui um comportamento especifico a esse elemento ou até mesmo aos seus herdeiros . Angular usa diversas diretivas de diversos tipos ng-app : Trata da aplicação

Visão Geral Módulos São containers para diferentes partes da sua aplicação como controllers , serviços , etc Injeção de dependência É um design pattern que lida como os componentes administram e resolvem suas dependências. Services Services são objetos substituíveis que estão ligados entre si usando a injeção de dependência . Você pode usar os services para organizar e compartilhar código em seu aplicativo.

Visão Geral Scope Scope é um objeto que se refere ao model da aplicação. É um contexto de execução à manifestação. Scopes estão dispostos na estrutura hierárquica que imitam a estrutura dos DOM a aplicação. Scopes podem suportar expressões e propagar eventos. $watch - observa a alteração no model $apply - propaga alteração no model $scope - propriedade de dados Filter Um filtro formata o valor de uma expressão para exibição para o usuário.

SEGURANÇA Angularjs expressões são SandBoxed(acesso restrito) não por razões de segurança, mas para manter adequadamente a separação de responsabilidades de aplicação. No entanto, este sandbox não pretende parar ataques que podem editar o modelo antes de ser processado por Angular. Recomendamos na criação de sua aplicação : Não misture modelos Client-Side com Server-Side. É possivel mas não misture ! Não use a entrada do usuário para gerar modelos dinamicamente Não execute a entrada do usuário com $scope.$eval Considere o uso de CSP - Content Security Policy , mas não confie apenas nisso .

MEAN MEAN M - Mongo DB : Banco de dados orientado a documentos E - Express : Framework de desenvolvimento web para Node A - AngularJs : Client Side aplicação N - Node.JS : Server Side aplicação com Java Script Temos a vantagem de não precisar saber nenhuma linguagem além do JavaScript que também é uma grande vantagem quando queremos utilizar um banco de dados NoSql, como o MongoDB, já que estaremos trabalhando direto com objetos muito similares ao JSON. Essas características tornam o MEAN ideal para rápida prototipação de software e desenvolvimento de aplicações escaláveis com abordagem Client-Side e Server-Side de forma segura . Por ser usado

Fontes e referências https://docs.angularjs.org/guide/introduction https://pt.wikipedia.org/wiki/MVC https://pt.wikipedia.org/wiki/AngularJS http://pt.stackoverflow.com/questions/21539/o-que-%C3%A9-mvp-e-mvvm https://medium.com/android-news/android-architecture-2f12e1c7d4db#.cmef7qd9n http://imasters.com.br/desenvolvimento/single-page-applications-e-outras-maravilhas-da-web- moderna/?trace=1519021197 http://blog.caelum.com.br/conhecendo-a-stack-mean-mongodb-express-angular-e-node/

Onde aprender e treinar https://www.codecademy.com/pt/learn/learn-angularjs https://angular.io/docs/ts/latest/quickstart.html

Contato Emerson Rodrigues da Silva e-mail : emerson.rodsilva@gmail.com twitter : @emerson_rsilva Linkedin : linkedin.com/in/emersonrsilva

Angular js

Mais conteúdo relacionado

Mais procurados

Semelhante a Angular js

Angular js