AngularJS Abraçando o MVC Client-Side

Sergio [email protected]

@sergioazevedohttp://sagadoprogramador.com.br

Abraçando o MVC Client Side

Saturday, October 19, 13

mailto:[email protected]


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


http://jster.net/

http://jster.net/

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

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

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



• 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>


https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js





carrega o angular









bootstrap do angular













cria a variavel de modelo nome













exibe o conteudo da variavel nome












WORK FLOW BASICO


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


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


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


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

e

ng-init. Faç

a as

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

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.



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

• 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:





}

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:




arquivo index.html:




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>




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




•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

JSON


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

JavaRuby.Net

Node.jsPhyton

JSON

Os serviços

$http e

$resource do

AngularJS,s

ão

opções para

realizar est

a

comunicação


ANGULARJS NÃO É BALA DE PRATA


CONSIDERAÇÕES


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


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

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

Sergio [email protected]

@sergioazevedohttp://sagadoprogramador.com.br

Obrigado!




Technology

AngularJS Abraçando o MVC Client-Side