O documento descreve conceitos fundamentais do framework AngularJS, incluindo módulos, controllers, factories e views. Também introduz o conceito de componentes AngularJS, que permite agrupar controllers e views em componentes reutilizáveis.

1. ANGULARJS
UTILIZANDO O CONCEITO DE WEB
COMPONENTS E BOAS PRÁTICAS NA
FRAMEWORK DO GOOGLE

2. DIEGO (STEVE) MELO
FULLSTACK DEVELOPER
UNIVERSIDADE TIRADENTES

3. 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.

4. COMO FUNCIONA?
Ao contrário de frameworks back end (.NET, Rails, Spring..) o
AngularJS roda no client side, ou seja na máquina do
cliente, sendo assim, retirando boa parte da Aplicação do
server side e movendo para o client side, como controle de
rotas e renderização de páginas por exemplo. Com isso o
back end passaria a servir uma API para o front end
consumir.

5. CONCEITOS

6. MODULES
Podemos imaginar que um Module é um container onde
temos pedaços de nossa aplicação como controllers,
services, filters, directives, etc…

8. CONTROLLERS
Camada onde ocorre interação direta com a view, através
dela podemos manipular o DOM(as tags HTML) ou fazer um
data binding de um form por exemplo.

9. (function() {
'use strict';
angular
.module('application')
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$http'];
function MainCtrl($http) {
var vm = this;
vm.foo = 'Application works!';
}
})();

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

11. FACTORY
Camada pela qual podemos retornar objetos com
premissas, ou até mesmo um array de objetos e injetar em
nossos components.
Exemplo: podemos criar uma função(método) que faça uma
requisição GET em uma determinada URL, e usar o Factory
para nos retornar a premissa para que possamos executar
essa ação em nosso component.

12. (function(){
'use restrict';
angular
.module('application')
.factory('myFactory', myFactory)
myFactory.$inject = ['$http'];
function myFactory($http) {
factory = {
getData: getData
};
return factory;
function getData() {
return $http({

13. VIEW
Podemos dizer que essa camada é a que entrega o resultado
visual ao cliente, ou seja, é nela que teremos o nosso HTML.

14. ANGULARJS
COMPONENTS
Feature adicionada na versão 1.5

15. O conceito de Web Components é bem simples, basta
imaginar que tenhamos reaproveitar um conjunto de
camadas como Controller e View em algum momento na
nossa aplicação e ao invés de duplicarmos as mesmas, as
agrupamos em um Compent para possamos reutilizá-lo
quando quisermos.

16. (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!';
}
})();

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

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