angularjs abraçando o mvc client-side

Sergio Azevedosergio.junior@caelum.com.br

@sergioazevedohttp://sagadoprogramador.com.br

Abraçando o MVC Client Side

Saturday, October 19, 13

Modelo

Arquitetura “padrão”de uma Aplicação Web

Server Side

Controlador

ViewTemplate

View Renderizada

Client Side http request

http response

html / json /xmlSaturday, October 19, 13

Então qual o problema?Saturday, October 19, 13

Qual o problema?JQuery resolve isso muito bem

fonte: http://jster.nethttp://jster.net/blog/why-should-you-use-client-side-mvc-framework#.UmH4-ZTwIjE

“A necessidade de um framework MVC client-side, fica clara quando você começa a manipular em suas

páginas, não só HTML mas também dados.”

E o framework MVC client-side que veremos hoje será:

VISÃO GERAL

VISÃO GERAL• Framework MVC Javascript, para aplicações web dinamicas

• Suporta HTML 5

• Extende o HTML (Diretivas)

• Suporta HTML 5

• Usa abordagem declarativa para expressar logica nas views

• Suporta HTML 5

• Injeção de dependencias (de graça)

• Suporta HTML 5

• Two way data binding

• Suporta HTML 5

• Two way data binding

•Mantido pela Google

COMEÇANDO<!doctype html><html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>script> </head> <body> <div> <p>Digite seu nome: <input ng-model="nome" placeholder="Seu nome aqui..."></p> <p>{{nome}}</p> </div> </body></html>

carrega o angular

bootstrap do angular

cria a variavel de modelo nome

exibe o conteudo da variavel nome

WORK FLOW BASICO

1. O browser recebe o html e faz executa o DOM parser

WORK FLOW BASICO

2. O browser carrega o script do angular.js

WORK FLOW BASICO

3. Angular busca pela diretiva ng-app

WORK FLOW BASICO

4. O angular cria o serviço de compilação da pagina ($compile) e o escopo raiz ($rootScope)

WORK FLOW BASICO

4. O angular cria o serviço de compilação da pagina ($compile) e o escopo raiz ($rootScope)

5. Angular usa o $compile para compilar o DOM e liga-lo ao $rootScope. (HTML Compiler)

HTML COMPILER

Compile: Percorre o DOM em busca de diretivas e entrega como resultado uma função de link

HTML COMPILER

Link: Combina as diretivas com o escopo ($scope) e gera assim a visão. Qualquer atleração em um modelo de um scope será refletida na visão, assim como qualquer interação do usuario com a visão será refletida no scope.

HTML COMPILER

Link: Combina as diretivas com o escopo ($scope) e gera assim a visão. Qualquer atleração em um modelo de um scope será refletida na visão, assim como qualquer interação do usuario com a visão será refletida no scope.

“Two way data binding”

DIRETIVAS

• São o jeito angular de criar páginas dinamicas.

DIRETIVAS

• Angular usa uma abordagem declarativa para expressar o comportamento desejado dentro das views.

DIRETIVAS

• Angular usa uma abordagem declarativa para expressar o comportamento desejado dentro das views.

• Você deve focar em descrever o comportamento desejado.

ALGUMAS DIRETIVAS

ALGUMAS DIRETIVAS• ng-app - bootstrap do angular

• ng-model - define/associa uma nova variavel no escopo corrente

• ng-init - incializar uma variavel atribuindo um valor

• ng-repeat - o foreach do Angular

• ng-click - registra um evento de click

• ng-disable - recebe uma expressão que se avaliada positivamente desabilita o elemento.

• ng-controller - delcara a criacao de um novo escopo de controlador.

Exemplo:Exibir um text area e garantir que

o botao enviar so funcione quando o usuario preencher no

minimo 10 caracteres

EXEMPLO DIRETIVAS<!doctype html><html ng-app> <head> <script src="../angular.js"></script> </head> <body> <div ng-init="descricao =''"> <textarea ng-model="descricao">{{descricao}}</textarea> </div>

<p ng-show='descricao.length < 10'>Minimo de 10 caracteres</p> <div> <button ng-disabled="descricao.length < 10">Enviar</button> </div> </body></html>

cria a variavel de descricao atribuindo o valor vazio

Associa o variavel ao conteudo do text area

declara que a mensagem só pode ser exibida enquanto o usuario nao digitar no minimo 10 caracteres

declara que o botao so deve estar habilitado se o texo ultrapasar o minimo de 10 caracteres

CONTROLADORES

• São objetos Javascript convencionais

CONTROLADORES

•Nao precisam herdar de nenhuma classe

CONTROLADORES

• As responsabilidades de um controlador são:

CONTROLADORES

• Incializar objetos do escopo ($scope). *(principal)

CONTROLADORES

• disponibilizar comportamento para UI através de funções ligadas ao $scope.

CONTROLADORES

• disponibilizar comportamento para UI através de funções ligadas ao $scope.

Você deve ev

itar o uso d

ng-init. Faç

inicializaçõ

es de modelo

dentro de co

ntroladores

EXEMPLO USANDO CONTROLLER<!doctype html><html ng-app> <head> <script src="../angular.js"></script> <script src="message-controller.js"></script> </head> <body ng-controller="MessageController"> <div> <textarea ng-model="descricao">{{descricao}}</textarea> </div> <p ng-show='naoTemQuantidadeMinimaDeCaractres()'>Minimo de 10 caracteres</p> <div>

<button ng-disabled="naoTemQuantidadeMinimaDeCaractres()">Enviar</button>

</div> </body></html>

arquivo index2.html:

carrega o arquivo que define o controlador

declara o uso do controlador

faz uso de uma funcao do $scope

EXEMPLO USANDO CONTROLLER

function MessageController($scope){

$scope.descricao = "";

$scope.naoTemQuantidadeMinimaDeCaractres = function(){ return $scope.descricao.length < 10; }

arquivo message-controller.js:

incializa a variavel de escopo descricao

inclui uma funcao no $scope para ser utilizada na UI

arquivo message-controller.js:declaracao do controlador recebendo $scope por parametro

ESCOPOS ($SCOPE)

ESCOPOS ($SCOPE)• são objetos AngularJS usados para expor modelos (dados) e funções

para a view.

• São conceitualmente parecidos com o ViewModel do padrão MVVM (Model View ViewModel)

para a view.

• Novos escopos são criados sempre que o Angular encontra a diretiva ng-controller

para a view.

• Todos os escopos possuem referencias para seus “pais”

para a view.

• Ou seja eles são organizados em uma arvore de escopos

para a view.

• Ou seja eles são organizados em uma arvore de escopos

• Onde o nó raiz é o $rootScope

MODELOS

• Modelos também sao objetos Javascript comuns.

MODELOS

•Não é necessario herdar de nenhum tipo especifico

MODELOS

•Na pratica qualquer variavel associada ao escopo é um modelo para o Angular

MODELOS

•Na pratica qualquer variavel associada ao escopo é um modelo para o Angular

• É possivel utilizar como modelos, os seus objetos de dominio Javascript já existentes. Basta associa-los ao $scope.

EXEMPLOS DE MODELOS

function OutroController($scope){

$scope.descricao = ""; //modelo

$scope.usuario = { nome: “Joao”, idade: 20 }; //modelo

$scope.cidades = [“rio de janeiro”,”sao paulo”]; //modelo

$scope.produto = new Produto(); //modelo*

arquivo outro-controller.js:

* considerando que exista a definição para o classe Produto.

EXEMPLO:EXIBINDO UMA LISTAGEM DE

EMPREGADOS

LISTA DE EMPREGADOS - 1

function EmpresaController($scope){

$scope.empregados = [ {nome: 'Zoraide', idade: 31}, {nome: 'Joao', idade: 20}, {nome: 'Maria', idade: 25}, {nome: 'Mario', idade: 30}, {nome: 'Flavia', idade: 22}, {nome: 'Percival', idade: 50}, {nome: 'Euclides', idade: 44}, {nome: 'Aristoteles', idade: 27} ];

arquivo empresa-controller.js:

... <body> <div ng-controller="EmpresaController"> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div>...

arquivo index.html:

EXIBINDO A LISTAGEM DE EMPREGADOS.

PERMITINDO O CADASTRO DE NOVOS EMPREGADOS

$scope.adicionarEmpregado = function(){ var novo = {nome: $scope.nome, idade: $scope.idade}; $scope.empregados.push(novo); };

arquivo empresa-controller2.js:

$scope.adicionarEmpregado = function(){ var novo = {nome: $scope.nome, idade: $scope.idade}; $scope.empregados.push(novo); };

<div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div>

MELHORANDO O CODIGO

LISTA DE EMPREGADOS - 1function EmpresaController($scope){ $scope.novoEmpregado = new Empregado({});

$scope.empregados = obterListaDeEmpregados();

$scope.adicionarEmpregado = function(){ $scope.empregados.push($scope.novoEmpregado); $scope.novoEmpregado = new Empregado({}); };}

function obterListaDeEmpregados(){ var lista = [ new Empregado({nome: 'Zoraide', idade: 31}), new Empregado({nome: 'Joao', idade: 20}), new Empregado({nome: 'Maria', idade: 25}), new Empregado({nome: 'Mario', idade: 30}), new Empregado({nome: 'Flavia', idade: 22}), new Empregado({nome: 'Percival', idade: 50}), new Empregado({nome: 'Euclides', idade: 44}), new Empregado({nome: 'Aristoteles', idade: 27}) ]; return lista;}

function Empregado(args){ this.nome = args.nome || undefined; this.idade = args.idade || undefined;}

<div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='novoEmpregado.nome'/> <label>Idade</label><input ng-model='novoEmpregado.idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div>

FILTROS

FILTROS• São recursos do Angular para permitir a construção de

expressões mais complexas.

•O Angular ja vem “de fabrica” com alguns bons filtros.

• São dividios em 2 tipos:

• Formating Filters

• currency, date, number, lowercase, uppercase e json

• Array Transforming filters

ORDENANDO A LISTA DE EMPREGADOS

<div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados | orderBy:[nome]"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div>

arquivo filtro1.html:

<div ng-controller="EmpresaController"> <div> <form> <label>Nome</label><input ng-model='nome'/> <label>Idade</label><input ng-model='idade'/> <button ng-click="adicionarEmpregado()">Incluir</button> </form> </div> <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados | orderBy:[nome]"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> </div>

PESQUISANDO NA LISTA DE EMPREGADOS

<div ng-controller="EmpresaController"> ... <div> <table> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr ng-repeat="empregado in empregados |filter:criteria | orderBy:[nome]"> <td>{{empregado.nome}}</td> <td>{{empregado.idade}}</td> </tr> </table> </div> <label> Pesquisar Por: <input ng-model="criteria"/> </div>

OUTROS RECURSOS DO ANGULAR

• Services

• $http, $timeout, $window, $route entre outros...

• Custom Directives

• Uma forma de extender o HTML, e criar seus proprios “componentes”

• Modules

• Factories

• Dependency Injection

COMO FICA A COMUNICAÇÃO COM O SERVER SIDE?

JavaRuby.Net

Node.jsPhyton

COMO FICA A COMUNICAÇÃO COM O SERVER SIDE?

JavaRuby.Net

Node.jsPhyton

Os serviços

$http e

$resource do

AngularJS,s

opções para

realizar est

comunicação

ANGULARJS NÃO É BALA DE PRATA

CONSIDERAÇÕES

Cada caso é um caso, avalie bem antes de decidir que abordagem utilizar. Existem relatos positivos e negativos quanto ao uso de frameworks MVC client-side

CONSIDERAÇÕES

Client-Side MVC is not a silver bullet, é um post bem famoso

CONSIDERAÇÕES

Client-Side MVC is not a silver bullet, é um post bem famoso

http://mir.aculo.us/2013/02/26/client-side-mvc-is-not-a-silver-bullet

Sergio Azevedosergio.junior@caelum.com.br

@sergioazevedohttp://sagadoprogramador.com.br

Obrigado!

angularjs abraçando o mvc client-side

Technology

scope angularjs

http interceptors com angularjs

abraçando a imperfeição

performance com angularjs

testando uma aplicação angularjs utilizando o karma

frigorífico side by side

desenvolvimento fácil com angularjs devfestsul

tutorial angularjs - episódio 6 - filtros

abraÇando a escola do mundo ao avesso: …

abraçando a mudança com código

abraçando o sofrimento, por john piper.pdf

apresentação west side

angularjs ii

angularjs - just digital

introdução angularjs

suzana | side story

construindo aplicativos sharepoint 2013 com angularjs

“acolhendo pessoas, abraÇando culturas e construindo …

meetup angularjs rio - testes e2e para apps angularjs com...

apresentando angularjs