Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Criando um Web App do Zero usando AngularJS e Firebase: Parte 4

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase: Part 3
Creating a Web App From Scratch Using AngularJS and Firebase: Part 5

Portuguese (Português) translation by Henrique P. Machado (you can also view the original English article)

No tutorial anterior, nós implementamos a funcionalidade de registro e também vimos como usar os AngularJS services para compartilhar dados entre controllers. Nesta parte da série de tutoriais, criaremos uma interface para o usuário logado criar um post do blog.

Iniciando

Vamos começar clonando a terceira parte do tutorial, disponível no GitHub.

Depois de clonar o código fonte, navegue até o diretório do projeto e instale as dependências requisitadas.

Assim que estiverem instaladas, inicie o servidor.

Aponte seu navegador para http://localhost:8000/app/#/home e você deverá ver o aplicativo em execução.

Criando uma página para adicionar um post

Necessitamos de uma página para que o usuário possa criar e publicar os posts do blog. Vamos adicionar os modelos requisitados e os arquivos para criar a página Adicionar Post.

Navegue até o diretório AngularJS_Firebase_Part3/app e crie uma pasta chamada addPost. Dentro de addPost, crie um arquivo HTML chamado addPost.html e outro, chamado addPost.js. No arquivo addPost.html, adicione o seguinte código HTML:

Dentro de addPost.js, iremos definir as rotas para a visão Add Post. $routeProvider tem um método chamado when, que usaremos para criar uma rota para nossa visão addPost. Iremos definir uma templateUrl que será renderizada no arquivo index.html. Vamos também definir um controller (lógica que controla uma visão) para o recém-criado $scope da visão addPost. Aqui está como o arquivo addPost.js finalmente deve ficar:

Inclua o módulo myApp.addPost no arquivo app.js.

Adicione também, uma referência ao arquivo addPost.js na página app/index.html.

Salve as alterações, reinicie o servidor e aponte seu navegador para http://localhost:8000/app/#/addPost e você deverá estar pronto a ver a página para adicionar um post.

Add Post page of AngularJS Firebase app

Validando os campos de Adicionar Post

Em primeiro lugar, precisamos adicionar uma diretiva ngModel aos campos textbox e textarea na página de postagem, para habilitar o two-way data binding.

Quando um usuário publica um post no blog, ele deve ter um título e um texto. Então, vamos adicionar uma validação para verificar se um post no blog tem um título e um texto. Se o título e o texto forem fornecidos, iremos habilitar o botão de publicação e o usuário poderá publicar sua postagem. Usaremos uma diretiva ngDisabled para desabilitar o botão de publicação. Adicione a diretiva ngDisabled ao botão de publicação como exibido.

Como visto no código acima, ngDisabled desabilitaria o botão de publicação quando o título ou o texto do arquivo não estivesse disponível.

Implementando a funcionalidade para adicionar um post

A seguir, iremos salvar o título e o texto do arquivo no Firebase quando o usuário clicar no botão de publicação. Para salvar os dados no Firebase, iremos usar a API $push.

Adicione a diretiva ngController ao corpo do arquivo addPost.html e também a diretiva ngSubmit ao formulário, no addPost.html.

Abra o arquivo addPost.js e adicione uma nova função chamada AddPost, dentro do controller AddPostCtrl, como exibido:

Nós vamos precisar de $firebase para mover os dados para o BD do Firebase. Para isso, injete o módulo $firebase no controller AddPostCtrl.

Crie um objeto Firebase usando sua URL do Firebase.

Utilizando firebaseObj vamos criar uma instância de $firebase que iremos usar para mover os dados para o Firebase.

Leia o título e o texto digitado pelo usuário utilizando $scope.

Assim que tivermos o título e o texto, iremos chamar a API push, para salvar os dados no Firebase.

Agora, salve as alterações, reinicie o servidor e tente adicionar um novo post ao blog. Assim que você clicar no botão de publicação, verifique o console do navegador para ver os objetos referenciados. Depois disso, acesse sua conta do Firebase e você poderá ver os dados.

Add Post data in Firebase

Concluindo

Nesta parte da série, nós criamos uma interface para adicionar ou publicar os posts do blog. Na próxima parte iremos criar uma interface para buscar e exibir todos os posts adicionados pelos usuários.

O código fonte deste tutorial está disponível no GitHub. Deixe suas considerações nos comentários abaixo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.