newDinossaurModal

#Introdução

Este é um service bem simples para a criação de um ionic modal para a adição de um novo dinossauro no banco de dados.

Ele depende dos serviços firebaseService, $ionicModal e $rootScope. Aqui seguimos o padrão de injetar primeiro as dependencias nativas do ionic/cordova (geralmente elas são precedidas por um sinal $);

NewDinoModal.$inject = ['$ionicModal', '$rootScope', 'dinossaursService'];
function NewDinoModal($ionicModal, $rootScope, dinossaursService){
  ...
}

##showModal Cria e mostra um modal para a adição de um novo dinossauro. Retorna uma promise contendo um modal a ser exibido.

Ela utiliza o $rootScope.$new() para a criação de um escopo isolado para o modal evitando assim a poluição do escopo pai (geralmente de um controller).

O modal é criado utilizando a função $ionicModal.fromTemplateUrl(template_url, configs).

Onde:

• template_url: path para o template do modal
• configs: configurações do modal, como seu escopo e animações (ver docs para mais referências).

Exemplo [criando um modal]:

let modalPromise = $ionicModal.fromTemplateUrl('templates/modals/new_dino.html', {
  scope: $scope,
  animation: 'slide-in-up',
  focusFirstInput: false,
})
.then(modal => {
  $scope.modal = modal;

  return modal;
});

...

return modalPromise;

###Observações Importantes

• $scope.dinossaur: modelo de dinossauro a ser salvo no banco de dados.
• $scope.openModal: função que permite exibir este modal.
• $scope.closeModal: função que fecha o modal e o remove da memória. É invocada quando o dinossauro é salvo no Firebase.
• $scope.saveDinossaur: salva um dinossauro no firebase quando o botão Done é pressionado na header bar do modal. Ele utiliza a função createDinossaurWithAngularFire do dinossaursService para salvar o dinossauro no banco.

Exemplo de Form

<form name="new_dino" ng-submit="saveDinossaur()">
  <label class="item item-input item-floating-label">
    <span class="input-label">Name</span>
    <input type="text" name="name" ng-model="dinossaur.nome" placeholder="Dinossaur Name" required>
  </label>

  <label class="item item-input item-floating-label">
    <span class="input-label">Height</span>
    <input type="number" name="height" ng-model="dinossaur.altura" placeholder="Dinossaur Height" required>
  </label>

  <label class="item item-input item-floating-label">
    <span class="input-label">Length</span>
    <input type="number" name="length" ng-model="dinossaur.comprimento" placeholder="Dinossaur Length" required>
  </label>

  <input type="submit" name="submit-form" id="submit-form" />
</form>