Top Posts

Série Dropbox: Conectando com DropBox API Java

Continue lendo

Série AngularJS Criando um dialog com AngularJS + AngularUI

Posted by camilolopes | Posted in AngularJS, Series | Posted on 12-12-2013

0

 

Olá Pessoal,

Mais um post da série AngularJS e hoje vamos ver como criar um dialog. Eu lembro que uma vez tentei fazer isso em JavaScript puro e foi muito sofrimento, mas      o angular-ui nos facilita muita coisa.

Lets go..

 

Starting…

Como sempre, vou considerar que você já vem acompanhando a série e entende a estrutura básica com o angular e rotas. O projeto que tem os exemplos da série está no meu GitHub

Requisitos

  • – angular-ui-bootstrap-modal.js
  • – angular-ui.js

Para o dialog, é desse cara que precisamos. Você pode baixá-lo no projeto pegando o arquivo no meu github.

Na página do angular-ui tem exemplos bacanas usando o modal http://angular-ui.github.io/bootstrap/

Vamos agora colocar a mão na massa

Development

Step 1

Antes de começar, a estrutura aqui é baseada no meu projeto que está no github. Se você tem o seu basta fazer a adaptação onde atualizar. (O que?)

Primeiro passo é atualizarmos a declaração do module no arquivo app.js  deixando assim:

var app = angular.module(“myapp”, [ “ui”, “ui.directives”,”ui.bootstrap.modal” ]);

Adicionamos o “ui.bootstrap.modal”  (o “ui.directives” não é requerido para esse exemplo).

Step 2

Agora vamos atualizar o index.html informando para carregar .js  que tem a funcionalidade do dialog:

<head>

<script src=“js/lib/angular-ui-bootstrap-modal.js”></script>

<link rel=“stylesheet” href=“css/bootstrap.css”>

</head>

No meu caso esse é o caminho.  Adicionei o css do bootstrap para ficar com layout agradável.

Step  3

Vamos criar o controller que vai cuidar do dialog. No meu arquivo recipeController.js adicionei o seguinte controller:

var MyCtrlDialog = function($scope) {

$scope.open = function() {

$scope.showModal = true;

};

$scope.ok = function() {

$scope.showModal = false;

};

$scope.cancel = function() {

$scope.showModal = false;

};

};

A leitura é bem simples: quando a função open for chamada ele deve mostrar o modal, quando a função  ok ou cancel for chamada o modal deve ser fechado.

Step 4

Como estou usando rotas, vou adicionar uma para o dialog. Não é requerido que seja feito com rotas, desde que ao carregar o HTML os .js sejam carregados, tudo vai funcionar.

No arquivo app.js adicionei a rota:

when(“/dialog”, {

templateUrl : “dialog.html”,controller:MyCtrlDialog

}).

Step 5

Agora vamos criar o arquivo dialog.html para vermos o resultado:

<!– In this dialog is using angularui –>

<body>

<!– Criando um botão para abrir o modal –>

<button class=“btn” ng-click=“open()”>Open Dialog</button>

<!– My dialog Content –>

<div modal=“showModal” close=“cancel()”>

<div class=“modal-header”>

<h4>Modal Dialog</h4>

</div>

<div class=“modal-body”>

<p>Teste dialog. Are you sure?</p>

</div>

<div class=“modal-footer”>

<button class=“btn btn-success” ng-click=“ok()”>Ok</button>

<button class=“btn” ng-click=“cancel()”>Cancel</button>

</div>

</div>

</body>

 

Testando

 

angularjsdialog

 

angularjsdialogopened

 

Simples, não?

Abraços, see ya!!

 

Related Posts with Thumbnails

Write a comment