<!DOCTYPE html>
<html ng-app="agenda">
<head>
<meta charset="utf-8">
<title>Agenda</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
">
</head>
<body>
<div ng-view></div>
<script type="text/javascript" src="http://code.angularjs.org/1.3.15/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.3.15/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
/* Styles go here */
#Agenda, parte 1
## Curso: AngularJS, Aplicações JS mais simples
---------
**Autor:** Jean Lucas de Carvalho
**Slides:** [https://slides.com/jeanlucasdecarvalho/curso-angularjs/](https://slides.com/jeanlucasdecarvalho/curso-angularjs/)
**Github:** [JLCarvalho](http://github.com/jlcarvalho)
**Twitter:** [JLCarv](http://twitter.com/JLCarv)
(function(){
var tabs = angular.module('tabs', []);
tabs.directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
controller: function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
},
template:
'<div class="tabbable">' +
'<ul class="nav nav-tabs">' +
'<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
'<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
'</li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
};
});
tabs.directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsController) {
tabsController.addPane(scope);
},
template:
'<div class="tab-pane" ng-show="selected" ng-class="{active: selected}" ng-transclude>' +
'</div>'
};
});
var app = angular.module('agenda', ['ngRoute', 'tabs']);
app.config(function($routeProvider){
$routeProvider
.when('/agenda', {
template: '<agenda></agenda>'
})
.when('/pessoa/:id', {
template: '<pessoa info="true"></pessoa>'
})
.otherwise({redirectTo:'/agenda'});
});
app.service('contatosService', function(){
var contatos = [], id = 1;
this.getAll = function(){
return contatos;
}
this.getOne = function(id){
for(var i = 0, len = contatos.length; i < len; i++){
if(contatos[i].id === id){
return contatos[i];
}
}
return false;
}
this.post = function(contato) {
contato.id = id++;
contatos.push(contato);
return contato;
}
this.update = function(contato) {
for(var i = 0, len = contatos.length; i < len; i++){
if(contatos[i].id === contato.id){
contatos[i] = contato;
return contato;
}
}
return false;
}
this.remove = function(id) {
for(var i = 0, len = contatos.length; i < len; i++){
if(contatos[i].id === id){
contatos.splice(i, 1);
return true;
}
}
return false;
}
});
app.directive('agenda', function(){
return {
restrict: 'E',
templateUrl: 'agenda.html',
controller: function($scope, contatosService){
// Iniciamos nosso contador de ids
var id = 1;
// Lista/Array de contatos
$scope.contatos = [contatosService.getAll();]
// Método para cadastro de novo contato
$scope.salvarContato = function(contato){
if(!contato.id){
contatosService.post(contato);
} else {
contatosService.update(contato);
}
};
// Método para excluir um contato
$scope.excluirContato = function(id){
contatosService.remove(id);
};
$scope.editarContato = function(id){
// Passa por todos os contatos da lista
// em busca do contato que possui o id igual
// ao informado
for(var i = 0, len = $scope.contatos.length; i < len; i++){
if($scope.contatos[i].id === id){
$scope.form = angular.copy($scope.contatos[i]);
}
}
};
}
}
});
app.directive('customForm', function() {
return {
restrict: 'E',
scope: {
submitForm: '&',
form: '=' // Objeto de cadastro de novo contato
},
templateUrl: 'form.html',
controller: function($scope) {
$scope.addpessoa = function(form) {
$scope.submitForm({
$form: form
});
// Limpa os inputs do formulário
$scope.limparForm();
}
$scope.limparForm = function() {
$scope.form = {};
}
}
}
})
app.directive('pessoa', function(){
return {
restrict: 'E',
scope: {
contato: '=?',
editar: '&',
excluir: '&',
info: '@'
},
templateUrl: 'contato.html',
controller: function($scope, $routeParams, contatosService){
if($routeParams.id){
$scope.contato = contatosService.getOne($routeParams.id);
console.dir($scope.contato);
}
$scope.editarPessoa = function(id){
$scope.editar({$id: id});
}
$scope.excluirPessoa = function(id){
$scope.excluir({$id: id});
}
}
}
});
})()
<div class="contato">
<img ng-src="{{contato.foto}}" ng-alt="{{contato.nome}}" class="img-responsive">
<h1>
<a href="" ng-click="varEsconder = !varEsconder" ng-if="info">
{{contato.nome}}
</a>
<a ng-href="#/pessoa/{{contato.id}}" ng-if="!info">
{{contato.nome}}
</a>
<button class="btn btn-info" ng-click="editarPessoa(contato.id)">Editar</button>
<button class="btn btn-danger" ng-click="excluirPessoa(contato.id)">Excluir</button>
</h1>
<tabs ng-show="varEsconder" ng-if="!info">
<pane title="Informações">
<ul class="contato-info">
<li>
<span>Telefone</span>
<h2>{{contato.telefone}}</h2>
</li>
<li>
<span>E-mail</span>
<h2>{{contato.email}}</h2>
</li>
</ul>
</pane>
<pane title="Social">
<ul class="contato-social">
<li>
<span>Facebook</span>
<h2>{{contato.telefone}}</h2>
</li>
<li>
<span>Twitter</span>
<h2>{{contato.email}}</h2>
</li>
</ul>
</pane>
</tabs>
</div>
<div class="container">
<custom-form submit-form="salvarContato($form)" form="form"></custom-form>
<div class="contatos">
<pessoa ng-repeat="item in contatos"
editar="editarContato($id)"
excluir="excluirContato($id)"
contato="item"></pessoa>
</div>
</div>
<div class="form-container">
<form name="formName" ng-submit="addpessoa(form)">
<div class="form-group">
<label for="inputNome">Nome</label>
<input type="text" ng-model="form.nome" required class="form-control" id="inputNome" placeholder="Nome">
</div>
<div class="form-group">
<label for="inputTelefone">Telefone</label>
<input type="text" ng-model="form.telefone" class="form-control" id="inputTelefone" placeholder="Telefone">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" ng-model="form.email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group text-right">
<input type="submit" class="btn btn-lg btn-success" id="iptSubmit" value="Adicionar Contato">
<input type="button" ng-click="limparForm()" class="btn btn-lg btn-danger" value="Limpar Campos" id="iptSubmit">
</div>
</form>
</div>