ANGULARJSUTILIZANDO O CONCEITO DE WEB

COMPONENTS E BOAS PRÁTICAS NAFRAMEWORK DO GOOGLE

DIEGO (STEVE) MELOFULLSTACK DEVELOPER

UNIVERSIDADE TIRADENTES

O QUE É?AngularJS é um framework baseado em javascript onde

podemos manipular os elementos HTML através do DOM,injetar módulos e componentes, criar elementos HTML

customizados (directives) e até usar rotas.

COMO FUNCIONA?Ao contrário de frameworks back end (.NET, Rails, Spring..) o

AngularJS roda no client side, ou seja na máquina docliente, sendo assim, retirando boa parte da Aplicação do

server side e movendo para o client side, como controle derotas e renderização de páginas por exemplo. Com isso o

back end passaria a servir uma API para o front endconsumir.

CONCEITOS

MODULESPodemos imaginar que um Module é um container onde

temos pedaços de nossa aplicação como controllers,services, filters, directives, etc…

CONTROLLERSCamada onde ocorre interação direta com a view, através

dela podemos manipular o DOM(as tags HTML) ou fazer umdata binding de um form por exemplo.

(function() { 'use strict';

angular .module('application') .controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$http'];

function MainCtrl($http) { var vm = this; vm.foo = 'Application works!'; } })();

<div ng-controller="MainCtrl as ctrl"> <h1 ng-bind="ctrl.foo"></h1> ou <h1>{{ ctrl.foo }}</h1> </div>

FACTORYCamada pela qual podemos retornar objetos com

premissas, ou até mesmo um array de objetos e injetar emnossos components.

Exemplo: podemos criar uma função(método) que faça umarequisição GET em uma determinada URL, e usar o Factorypara nos retornar a premissa para que possamos executar

essa ação em nosso component.

(function(){ 'use restrict';

angular .module('application') .factory('myFactory', myFactory)

myFactory.$inject = ['$http']; function myFactory($http) { factory = { getData: getData };

return factory;

function getData() { return $http({

VIEWPodemos dizer que essa camada é a que entrega o resultadovisual ao cliente, ou seja, é nela que teremos o nosso HTML.

ANGULARJSCOMPONENTS

Feature adicionada na versão 1.5

O conceito de Web Components é bem simples, bastaimaginar que tenhamos reaproveitar um conjunto de

camadas como Controller e View em algum momento nanossa aplicação e ao invés de duplicarmos as mesmas, asagrupamos em um Compent para possamos reutilizá-lo

quando quisermos.

(function() { 'use strict';

angular .module('application') .component('application', { templateUrl: '/app/application.template.html', controller: MainCtrl });

MainCtrl.$inject = ['$http'];

function MainCtrl($http) { var vm = this; vm.foo = 'Application works!'; } })();

<div id="application"> <h1 ng-bind="$ctrl.foo"></h1> ou <h1>{{ $ctrl.foo }}</h1> </div>

LET'S ROCK!!!VAMOS POR A MÃO NA MASSA.