Categoria: AngularJs
AngularJS é um framework front-end que auxilia a criação de Single Page Aplications(SPA), e vem ganhando destaque desde de seu surgimento em 2011-2012 por Misko Every e Adam Ebrons, cujo objetivo era facilitar a criação de aplicações web. É baseado em um modelo MVW(Model View Whatever), uma brincadeira da Google dando um ponto final a uma longa discussão entre a comunidade de desenvolvedores que não chegavam em um acordo sobre o modelo utilizado cujos principais eram: MVC(Model View Controller), MVP(Model View Presenter) e MVVM(Model View View Model).
Vantagens:
1.Por ser feito em JS é um framework de fácil aprendizado.
2.O framework comparado com outras tecnologias como Java, por exemplo, possui em ganho enorme de performance, visto que são necessários muito menos linhas de código, além de não precisar de um arquivo xml controlando o acesso das chamadas na aplicação.
3.Devido a sua expansão, existem várias empresas utilizando além de possuir um vasto conteúdo disponível na internet.
4.Possui o sistema Two-Way-Data-Binding, que faz uma ligação entre a view e controller a partir de uma variável de escopo em tempo de execução, evitando assim uma maior quantidade de código para mostrar os dados pelo servidor.
Diretivas:
O framework possui um sistemas de códigos responsáveis por facilitar o acesso de variáveis/dados dentro da view.
1.ng-app – Declara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag.
2.ng-bind – Muda/Exibe o texto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras de negócio.
3.ng-model – É similar ao ng-bind, mas permite ligação direta bidirecional (two-way data binding ) entre a view e o escopo do aplicativo.
4.ng-click – Permite instanciar o evento de click, semelhante ao onclick.
5.ng-controller – Especifica um controller JavaScript para aquele HTML em questão.
6.ng-repeat – Instancia um elemento por item de um array.
Iniciando com a ferramenta:
1.Primeiramente vá no site http://www.angular.org e faça o download da ferramenta.
2.Descompacte o arquivo e crie uma pasta com o nome do seu projeto. Em seguida copie o arquivo “angular.js” do arquivo que foi baixado para a pasta do seu projeto.
3.Dentro da pasta principal “PrimeiroProjetoAngular” crie um arquivo html e crie o código a seguir:
Abra no navegador, se ele estiver exibindo a mensagem “Hello World!” então seu framework está funcionando perfeitamente. Caso dê algum erro abra o console do seu navegador e veja qual o problema em seu código.
Explicação:
Um código simples usando apenas 2 das principais diretivas em ng-app=”helloWorld” e ng-controller=”helloWorldCtrl”, onde a segunda faz a ligação com o controller criado dentro js onde existe uma função que exibe a mensagem Hello World na tela e por fim sendo exibido no html pela mensagem: “{{message}}”.
Augusto Programmer 