AngularJS Components - Semana da Informática 2016
Click here to load reader
-
Upload
diego-melo -
Category
Technology
-
view
66 -
download
0
Transcript of AngularJS Components - Semana da Informática 2016
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.