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
Simples, não?
Abraços, see ya!!
