![Page 1: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/1.jpg)
ANGULARJSUTILIZANDO O CONCEITO DE WEB
COMPONENTS E BOAS PRÁTICAS NAFRAMEWORK DO GOOGLE
![Page 2: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/2.jpg)
DIEGO (STEVE) MELOFULLSTACK DEVELOPER
UNIVERSIDADE TIRADENTES
![Page 3: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/3.jpg)
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.
![Page 4: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/4.jpg)
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.
![Page 5: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/5.jpg)
CONCEITOS
![Page 6: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/6.jpg)
MODULESPodemos imaginar que um Module é um container onde
temos pedaços de nossa aplicação como controllers,services, filters, directives, etc…
![Page 7: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/7.jpg)
![Page 8: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/8.jpg)
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.
![Page 9: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/9.jpg)
(function() { 'use strict';
angular .module('application') .controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$http'];
function MainCtrl($http) { var vm = this; vm.foo = 'Application works!'; } })();
![Page 10: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/10.jpg)
<div ng-controller="MainCtrl as ctrl"> <h1 ng-bind="ctrl.foo"></h1> ou <h1>{{ ctrl.foo }}</h1> </div>
![Page 11: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/11.jpg)
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.
![Page 12: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/12.jpg)
(function(){ 'use restrict';
angular .module('application') .factory('myFactory', myFactory)
myFactory.$inject = ['$http']; function myFactory($http) { factory = { getData: getData };
return factory;
function getData() { return $http({
![Page 13: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/13.jpg)
VIEWPodemos dizer que essa camada é a que entrega o resultadovisual ao cliente, ou seja, é nela que teremos o nosso HTML.
![Page 14: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/14.jpg)
ANGULARJSCOMPONENTS
Feature adicionada na versão 1.5
![Page 15: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/15.jpg)
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.
![Page 16: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/16.jpg)
(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!'; } })();
![Page 17: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/17.jpg)
<div id="application"> <h1 ng-bind="$ctrl.foo"></h1> ou <h1>{{ $ctrl.foo }}</h1> </div>
![Page 18: AngularJS Components - Semana da Informática 2016](https://reader038.vdocuments.com.br/reader038/viewer/2022100801/589c49a21a28ab227d8b57c7/html5/thumbnails/18.jpg)
LET'S ROCK!!!VAMOS POR A MÃO NA MASSA.