destaque

AngularJS: Criando um Catálogo de Imóveis com AngularJS e Bootstrap – Frontend

Após construir o Backend utilizando o Phreeze, resolvi dar continuidade na minha aplicação construindo um Frontend utilizando Bootstrap e AngularJS. Este artigo irá tratar exatamente o Frontend visando que nossa api Restful já está disponível em nosso Backend conforme o artigo Criando um Catálogo de Imóveis com o Phreeze – Backend

Se tratando de um Frontend, o design gráfico é primordial. O AngularJS é indispensável para a criação de aplicações modernas e permite que a área de design trabalhe livremente respeitando apenas algumas diretivas na construção das páginas.

O AngularJS é um framework javascript sob manutenção da Google. Ele trabalha sob o padrão MVC explicado anteriormente aqui Entendendo o Backend. O Framework faz a leitura do HTML interpretando as tags especiais do framework contidas no mesmo como por exemplo a ng-repeat que realiza a iteração de uma lista de valores, “imprimindo” as informações no HTML.

Você pode visitar o site oficial do AngularJS clicando aqui AngularJS. No site, você vai encontrar uma vasta documentação além de exemplos e tutoriais em vídeos. Vamos ao nosso exemplo.

Entendendo o Frontend

Como nosso Backend foi construído para a realização do cadastro de imóveis, resolvi que o Frontend seria uma página simples de uma imobiliária com dados da empresa, formulário de contato e um catálogo básico de imóveis disponíveis. Não me preocupei com o negócio em si, este é apenas um exemplo onde preocupações como paginação e busca foram deixadas de lado.

Ajustando nossa aplicação Backend

Primeiramente, teremos de ajustar a segurança na nossa aplicação construída no Phreeze conforme link no início deste tutorial. Como dito no primeiro artigo desta série, o Phreeze já incluiu a autenticação e segurança em nossas páginas então, ao tentar acessar a api para busca dos dados vamos ter como retorno o resultado abaixo:

URL: http://[servidor]:[porta]/imoveis/api/imovels
“success”:false,”message”:”Login requerido para acessar esta pagina”…

Ou seja, a segurança está habilitada e não permite a busca dos imóveis cadastrados no nosso Backend. Vamos então desabilitar a segurança em alguns pontos da aplicação.

No nosso exemplo vamos realizar a busca dos imóveis cadastrados na aplicação e retorna-los para o Frontend da página em forma de imagens com a possibilidade de detalhamento do mesmo em uma pop-up (modal) ao clicarmos em cima do registro. Vamos desabilitar a segurança nos métodos de busca e leitura dos registros na api e em contrapartida, vamos habilitar a segurança nos métodos de manutenção como criação, atualização e remoção do registro para que assim, ações de administração não fiquem disponíveis. Siga os passos:

  1. Remova a segurança padrão do método Init()
  2. Inclua a segurança no método Create()
  3. Faça o mesmo para o método Update()
  4. Finalize inserindo a segurança no método Delete()

Pronto, se acessarmos agora a api URL: http://[servidor]:[porta]/imoveis/api/imovels iremos ter o retorno dos nossos registros cadastrados no Backend do nosso catálogo de imóveis. Isto significa que nosso Backend está pronto. Daremos início a construção do nosso Frontend.

URL: http://[servidor]:[porta]/imoveis/api/imovels
{“orderBy”:””,”orderDesc”:false,”rows”:[{“id”:”1″,”titulo”:”Casa Padr\u00e3o 3 Quartos Copacabana”…

Construindo nosso Frontend

Crie um novo projeto ou pasta no seu servidor http com o nome que desejar. Você pode baixar o projeto utilizado neste tutorial como referência para utilização das libs js e css do angular e Bootstrap. Clique aqui para baixar Código Fonte Aplicação Frontend Simples AngularJS

Como dito, o AngularJS segue o padrão MVC portanto, vamos iniciar a criação dos nossos arquivos. O primeiro será o app.js que irá conter os módulos do angular e as suas configurações. Também inseri neste código, uma lista de constantes para utiliza-las nas chamadas https dos meus serviços com as URLs especificas para cada um. Note que disponibilizei minha aplicação na web, se você desejar pode utiliza-la para realizar este tutorial sem seguir os passos do artigo I.

//Declaracao do modulo indicando o uso de services e controladores.
angular.module('imoveis', ['imoveis.services', 'imoveis.controllers'])
	 
	//Crio uma constante para inserir aqui as urls utilizadas nos meus services
	.constant("apiUrl",(function() {
	    var resource = 'http://www.ticarpa.com.br/demo/imoveis/';
		    return {
		    	RETORNA_IMOVEIS: resource + "api/imovels",
		    	RETORNA_IMOVEL: resource + "api/imovel/:id" 
		    }
	  })())
	
	//Configuracao das rotas
    .config(['$routeProvider', function ($routeProvider) {
    	//Rota para lista de imoveis
        $routeProvider.when('/lista-imoveis', {templateUrl: 'templates/lista-imoveis.html', controller: 'ListaImoveisCtrl'});
        //Rota para o detalhe do imovel
        $routeProvider.when('/detalhe-imovel/:id', {templateUrl: 'templates/detalhe-imovel.html', controller: 'DetalheImovelCtrl'});
        //Rota inicial
        $routeProvider.otherwise({redirectTo: '/lista-imoveis'});
    }]);

Neste arquivo temos definido o nome da aplicação “imoveis”, os módulos que vamos utilizar onde neste caso, será “services e controllers” além das rotas que de acordo com a URL, realizam a chamada da página HTML e atribuem um controle responsável por determinada rota conforme exemplo acima.

Vamos agora criar nosso arquivo controller.js, ele será responsável por fazer a integração entre nossa página html e o service seguindo o padrão MVC. Comentei o código para que fique claro o que cada trecho faz. Note que basicamente, temos um controle que realiza a busca da lista de imóveis e outro que busca o imóvel com base no id.

/* Controllers */

//Aqui estou dizendo que este arquivo sera o modulo controller
var app = angular.module('imoveis.controllers', []);


// Funcao para limpeza do cach do browser correspondente ao problema abaixo
// http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
app.run(function ($rootScope, $templateCache) {
    $rootScope.$on('$viewContentLoaded', function () {
        $templateCache.removeAll();
    });
});

//Aqui e realizado a criacao do controller ListaImoveisCtrl com os modulos de ImoveisFactory (Service) 
app.controller('ListaImoveisCtrl', ['$scope', 'ImoveisFactory', '$location',
    function ($scope, ImoveisFactory, $location) {

		//Aqui e criada a funcao para detalhe do imovel passando o id.
        $scope.verImovel = function (id) {
        	
        	//Aqui ele redireciona para rota detalheimovel passando id.
            $location.path('/detalhe-imovel/' + id);
        };

        //Eh recebido a lista de imoveis do service
        $scope.imoveis = ImoveisFactory.query();
    }]);

//Criado o controle para Detalhe passando o escopo e os parametros de rota
app.controller('DetalheImovelCtrl', ['$scope', '$routeParams', 'ImovelFactory', '$location',
    function ($scope, $routeParams, ImovelFactory, $location) {
		//Imovel recebe o imovel do service passando o id.
        $scope.imovel = ImovelFactory.show({id: $routeParams.id});
    }]);

Há a possibilidade neste caso de não utilizarmos a busca do imóvel pelo id, visto que podemos passar o objeto todo pelo controle pois o mesmo encontra-se carregado na lista. Resolvi manter a busca visto que por questão de performance, podemos ter um serviço para trazer dados mínimos na lista e o modelo completo no detalhamento do registro.

O próximo arquivo a ser criado é o arquivo services.js. Ele faz parte da camada de modelo e será responsável por realizar as chamadas nos serviços json e retornar os dados para nosso controle. É utilizado o módulo ngResource para realização das chamadas http. Você pode conferir a documentação da api do ngResource e todos os outros módulos clicando ngResource API. O exemplo é muito simples, é realizada apenas a chamada http GET retornando os dados para o controle. Note que utilizei a apiUrl criada no app.js como constante.

/* Services */

//Este arquivo sera o service e utilizarei o modulo ngResource utilizado para chamadas em servicos json
var services = angular.module('imoveis.services', ['ngResource']);

//Service de recuperacao dos imoveis. Faz um get no servico de lista retornando os dados para o controle
services.factory('ImoveisFactory', function ($resource, apiUrl) {
    return $resource(apiUrl.RETORNA_IMOVEIS, {}, {
        query: { method: 'GET'}
    })
});

//Service de imovel. Faz um get no servico passando a url retornando o imovel do id respectivo.
services.factory('ImovelFactory', function ($resource, apiUrl) {
    return $resource(apiUrl.RETORNA_IMOVEL, {}, {
        show: { method: 'GET' }
    })
});

Agora, basta criarmos as nossas páginas html. Vamos criar a página principal index.html, ela será responsável por carregar as libs e nossa aplicação. Como tags do angular, temos aqui o ng-app que deve respeitar o mesmo nome de aplicação utilizado no app.js e a ng-view que indica onde nossos templates HTMLs devem ser exibidos. Nossa página ficará assim:

<!doctype html>
<!-- ng-app responsavel pelo nome da aplicacao inserida no app.js -->
<html lang="pt-br" ng-app="imoveis">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Im&oacute;veis Exemplo</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
</head>
<body>
<!-- ng-view responsavel por carregar o template da rota atual -->


<div ng-view></div>



<!-- Arquivos do Bootstrap ================================================== -->
<script src="js/bootstrap/bootstrap.js"></script>

<!-- Arquivos do AngularJS ================================================== -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>

<!-- Arquivos da Aplicacao ================================================== -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>

</body>
</html>

Crie o template lista-imoveis.html utilizado para listagem dos imóveis disponíveis. Basicamente o template é um fragmento da aplicação. Em termos de AngularJS, nossa página possuirá apenas a tag ng-repeat que funciona iterando a lista de imóveis e imprimindo as linhas de acordo com o retorno de dados. Também utilizamos {{ model.atributo }} para exibir os atributos carregados e por fim, temos um link com a tag ng-click que funciona como o onclick padrão. Nosso HTML ficará assim:

<div>
	<h3 style="text-align: center;">Lista de Im&oacute;veis</h3>
    <table class="table table-striped table-condensed">
        <thead>
        <tr>
            <th style="min-width: 20%;">Titulo</th>
            <th style="min-width: 20%;">Valor</th>
            <th style="min-width: 20%;">Telefone</th>
            <th style="min-width: 20%">Email</th>
            <th style="width:10%;">&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="imovel in imoveis.rows">
            <td>{{ imovel.titulo }}</td>
            <td>{{ imovel.valor }}</td>
            <td>{{ imovel.telefoneContato }}</td>
            <td>{{ imovel.emailContato }}</td>
            <td><a ng-click="verImovel(imovel.id)" class="btn btn-small btn-danger">Ver</a></td>
        </tr>
        </tbody>
    </table>
</div>

Por fim vamos criar o detalhe-imovel.html que irá detalhar nosso registro. Não há nada de complexo aqui.

<div class="container">
    <h1 style="text-align: center;">{{imovel.titulo}}</h1>
    <form novalidate="novalidate" class="form-horizontal">
		<div class="control-group">
			<label class="control-label" for="inputValor">Descri&ccedil;&atilde;o:</label>
            <div class="controls">
            	{{imovel.descricao}}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputValor">Valor:</label>
            <div class="controls">
                {{imovel.valor}}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputValor">Data:</label>
            <div class="controls">
                {{imovel.dataDisponibilidade}}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputValor">Telefone:</label>
            <div class="controls">
                {{imovel.telefoneContato}}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputValor">Email:</label>
            <div class="controls">
                {{imovel.emailContato}}
            </div>
        </div>
        	<center><img src={{imovel.imagem}} /></center>
    </form>
	<a href="#/lista-imoveis" >Voltar</a>
</div>

Pronto, nosso Frontend em AngularJS com Bootstrap está criado e funcional. A estrutura de diretórios e arquivos ficou conforme Figura 1.

 

Figura 1. Estrutura de Diretórios.

Figura 1. Estrutura de Diretórios.

Nossa lista de imóveis pode ser visualizada conforme Figura 2.

Figura 2. Lista de imóveis.

Figura 2. Lista de imóveis.

E nosso detalhe de imóvel é visualizado conforme Figura 3.

Figura 3. Detalhe do imóvel.

Figura 3. Detalhe do imóvel.

Veja o exemplo construído clicando neste link  Ver Exemplo

Provavelmente você deve estar se perguntando onde está o “design gráfico é primordial” descrito no início deste artigo visto que nosso Frontend mais se parece com uma aplicação Backend. Isto ocorreu pois construí este exemplo como se fosse um profissional de desenvolvimento sem grandes conhecimentos em design ou seja, me preocupei em criar as funcionalidades necessárias imaginando que a equipe de design, está trabalhando em um template bonito e funcional.

Buscando “Temas Bootstrap” ou “Templates Bootstrap” no Google, podemos verificar que há inúmeras opções de designs prontos para utilização em nossas aplicações AngularJS. Há possibilidades de layouts simples ou complexos com versões gratuitas e pagas, basta verificar qual opção se encaixa melhor em seu projeto.

Encontrei este site Start Bootstrap que disponibiliza templates gratuitos e pagos porém, recomendo a leitura do tipo de licença utilizado em cada tema. Como a ideia era criar algo simples e funcional, utilizei este tema aqui Tema Bootstrap Freelancer que é voltado para um portfólio pessoal. No nosso caso vamos utilizar o mesmo para criar um site exemplo de uma imobiliária.

Após baixar o tema, realizei pequenas modificações para que minha aplicação AngularJS fosse exibida no tema baixado. Realizei modificações básicas de textos apenas para tradução.

As modificações foram as seguintes:

  1. Foram criadas as pastas app, libs/angular e modal na raiz do tema, copiando os arquivos da aplicação anterior para as pastas criadas conforme Figura 4.

    Estrutura Bootstrap Tema

    Estrutura Bootstrap Tema

  2. Criei o arquivo detalhe-modal.html que substitui o detalhe-imovel.html do exemplo anterior com seguinte código:
                            <div class="modal-header">
                            	<h2 style="text-align: center;">{{imovel.titulo}}</h2>
                            </div>	
                            <div class="modal-body">
    							<div>
    								<hr class="star-primary">
    								<img src="{{imovel.imagem}}" class="img-responsive img-centered" alt="">
    								<p>{{imovel.descricao}}</p>
    								
    								<hr class="star-primary">
    								<h2 style="text-align: center;">Dados do Im&oacute;vel</h2>
    								<ul class="list item-details">
    									<li>Valor:
    									<strong>{{imovel.valor}}
    									</strong>
    									</li>
    									<li>Data:
    									<strong>{{imovel.dataDisponibilidade}}
    									</strong>
    									</li>
    									<li>Telefone:
    									<strong>{{imovel.telefoneContato}}
    									</strong>
    									<li>Email:
    									<strong>{{imovel.emailContato}}
    									</strong>
    									</li>
    								</ul>
    							</div>
                            </div>
    
  3. Modifiquei as rotas do app.js visto que precisarei apenas da principal pois o modal é chamado no controller e seu template e controlador é atribuído nesta função.
    //Declaracao do modulo indicando o uso de services e controladores.
    angular.module('frontend-imoveis', ['frontend-imoveis.services', 'frontend-imoveis.controllers', 'ui.bootstrap'])
    	
    	//Crio uma constante para inserir aqui as urls utilizadas nos meus services
    	.constant("apiUrl",(function() {
    	    var resource = 'http://www.ticarpa.com.br/demo/imoveis/';
    		    return {
    		    	RETORNA_IMOVEIS: resource + "api/imovels",
    		    	RETORNA_IMOVEL: resource + "api/imovel/:id" 
    		    }
    	  })())
    	
    	//Configuracao das rotas
    	.config(['$routeProvider', function ($routeProvider) {
    		//Rota para lista de imoveis
            $routeProvider.when('/home', {templateUrl: 'index.html', controller: 'ListaImoveisCtrl'});
            //Rota inicial
            $routeProvider.otherwise({redirectTo: '/home'});
        }]);
    
  4. Inseri a chamada do modal na função “open” passando como parâmetro o id do imóvel clicado .
    /* Controllers */
    
    //Aqui estou dizendo que este arquivo sera o modulo controller
    var app = angular.module('frontend-imoveis.controllers', []);
    
    
    //Funcao para limpeza do cach do browser correspondente ao problema abaixo
    //http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
    app.run(function ($rootScope, $templateCache) {
        $rootScope.$on('$viewContentLoaded', function () {
            $templateCache.removeAll();
        });
    });
    
    //Aqui e realizado a criacao do controller ListaImoveisCtrl com os modulos de ImoveisFactory (Service) 
    app.controller('ListaImoveisCtrl', ['$scope', 'ImoveisFactory','$location', '$modal',
        function ($scope, ImoveisFactory, $location, $modal) {
    	
        // Modal do detalhamento do imovel
        $scope.open = function (_id) {
    
            var modalInstance = $modal.open({
              controller: "DetalheImovelCtrl",
              templateUrl: 'modal/detalhe-modal.html',
                resolve: {
                    id: function()
                    {
                        return _id;
                    }
                }
                 });
    
        	};
        	 //Eh recebido a lista de imoveis do service
            $scope.imoveis = ImoveisFactory.query();
        }]);
    
    //Criado o controle para Detalhe passando o escopo e os parametros
    app.controller('DetalheImovelCtrl', ['$scope', '$modalInstance', 'id', 'ImovelFactory',
        function ($scope, $modalInstance, id, ImovelFactory) {
    		 //Imovel recebe o imovel do service passando o id.
    		 $scope.imovel = ImovelFactory.show({id: id});
        }]);
    
  5. No index.html, inclui o ng-app na tag html e o ng-controller na tag body e inclui as libs do angular e da minha aplicação no final da página.
    <!-- nome da app -->
    <html lang="pt-br" ng-app="frontend-imoveis">
    .
    .
    .
    <!-- Informo o controller da pagina -->
    <body id="page-top" class="index" ng-controller="ListaImoveisCtrl">
    
  6. Removi o trecho de código que exibia as imagens estáticas do tema e inseri no lugar o código responsável por exibir as imagens da minha aplicação com a possibilidade do detalhamento do modal ao clicar em um imóvel.
                <div class="row">
                    <div class="col-sm-4 portfolio-item" ng-repeat="imovel in imoveis.rows">
                        <a ng-click="open(imovel.id)" class="portfolio-link" >
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="{{ imovel.imagem }}" class="img-responsive" alt="">
                        </a>
                    </div>
                </div>
    
  7. Removi os modais do index.html pois o mesmo será chamado dinamicamente através da aplicação.

O resultado pode ser visualizado aqui.  Ver Exemplo com Tema

O Download desta aplicação pode ser realizado diretamente no Github através do link Download Código Fonte Tutorial com Tema Start Bootstrap

Finalizamos assim, mais um artigo demonstrando como é possível utilizar o AngularJS para construção de aplicações com interfaces bonitas e funcionais. No próximo artigo, vamos realizar a construção da nossa aplicação mobile utilizando o Ionic framework. Não deixem de comentar. Até a próxima.

Tiago Carpanese
Tiago Carpanese
Criador deste site, apaixonado por tecnologia, busco contribuir para a segregação do conhecimento. Não deixe de curtir este site no Facebook clicando em Curtir na Barra da Direita. Siga-me no Twitter para ficar por dentro das novidades. Não deixe de comentar !
  • Eduardo Viana Dória

    Excelente artigo Tiago!

    • Tiago Carpanese

      Muito obrigado Eduardo.

      • Joao

        Thiago as informações nao aparece no app quando colocado pelo localhost http://localhost/imoveis/api/imovels se eu colocar do seu site http://www.ticarpa.com.br/demo/imoveis/api/imovels funciona!sendo que pelo meu localhost gera o json

        • Tiago Carpanese

          Utilize o Chrome e aperte F12 para abrir o debug. Clique na aba console e execute o que não esta aparecendo para saber se ele retorna algum erro. Verifique também na aba network para que você veja as requisições e respostas. Qualquer coisa me avise. Abraço

          • Igor Silva

            Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://localhost/appimoveis/api/imovels. (Motivo: o cabeçalho CORS ‘Access-Control-Allow-Origin’ não está presente).

          • Tiago Carpanese

            Olá amigo.

            Veja neste artigo quase no final da página:

            http://ticarpa.com.br/php/php-criando-um-catalogo-de-imoveis-com-o-phreeze-parte-iii-entendendo-o-backend/

            No seu app backend (Gerado pelo Phreeze), você deve inserir na classe php AppBaseController.php o seguinte trecho de código.

            após o require_once(“verysimple/Phreeze/Controller.php”);

            /** CORS */
            header(‘Access-Control-Allow-Origin: *’);
            header(“Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept”);

            Isso irá habilitar seu backend para qualquer origem de chamada.

          • Igor Silva

            Olá Tiago.

            Já tinha inserido os header´s antes para permissão de acesso, porém continua bloqueando a requisição

          • Robson

            Estou com o mesmo problema Igor Silva. Você conseguiu resolver?

          • Igor Silva

            Robson, não cheguei a resolver o problema, me add no skype(igor.ti.web) que podemos tentar resolver.

  • hugo azevedo

    Ola amigo muito bom estou com dificuldades para achar o api rest ful pois voce nao demonstrou ela conforme citou “. Este artigo irá tratar exatamente o Frontend visando que nossa api
    Restful já está disponível em nosso Backend conforme o artigo Criando um Catálogo de Imóveis com o Phreeze – Backend ”

    por favor me indique o link de download da API RESTFUL so me falta ela . aguardo e obrigado

    • Tiago Carpanese

      A API é exposta automaticamente com o uso do Phreeze, veja no link ticarpa.com.br/demo/imoveis/api/imovels isto é a api. Qualquer dúvida estou a disposição.

  • Blanvi

    Fala Thiago, sou eu novamente, estou com dificuldades em desabilitar a segurança no metodos.
    E a minha aplicação não esta acessando a API.
    Sabe me dizer em qual pasta fica os metodos informado no tutorial acima?

    abraço

    • Tiago Carpanese

      [APP]libsController

  • edusalazar

    Parabéns Thiago, excelente tutorial muito bem explicado e conciso.

    • Tiago Carpanese

      Muito Obrigado Eduardo.

  • edusalazar

    Thiago boa tarde, tire me uma duvida ? como proceder para seguir esses passos: Vamos desabilitar a segurança nos métodos de busca e leitura dos registros na api e em contrapartida, vamos habilitar a segurança nos métodos de manutenção como criação, atualização e remoção do registro para que assim, ações de administração não fiquem disponíveis. Siga os passos:
    Remova a segurança padrão do método Init()
    Inclua a segurança no método Create()
    Faça o mesmo para o método Update()
    Finalize inserindo a segurança no método Delete() Obrigado pela atenção.

    • Tiago Carpanese

      Olá eduardo.

      No seu app de imóveis gerado, abra o arquivo ImovelController.php ou o arquivo correspondente ao seu app.

      Remova o método de segurança do Init. O método de segurança deve ser parecido com isso:

      $this->RequirePermission(User::$PERMISSION_ADMIN,
      ‘Secure.LoginForm’,
      ‘Login requerido para acessar esta pagina’,
      ‘Permissao de leitura e obrigatoria’);

      Você vai remover a segurança do método Init() que neste caso aplicaria a segurança para todas as requisições.

      E irá aplicar para o método Create, Update e Delete pois assim, toda vez que as requisições deste nível forem solicitadas, será exigido o login.

      Veja como deverá ficar o arquivo neste link.

      https://github.com/carpanese/imoveis/blob/master/libs/Controller/ImovelController.php

      Qualquer dúvida é só avisar.

      Att,

  • http://www.rangelweb.net46.net Rangel Prado

    Thiago, muito bom!

    Eu gostaria de saber pra chamar os dados no front de maneira bem cru.

    • Tiago Carpanese

      Essa é uma das maneiras bem “cru”. Há frameworks para agilizar o processo, porém está é uma forma básica de utilizar angularJS.

  • Kleber Pereira

    Muito top, demorei pra encontrar um tutorial assim, todos que achei era tudo muito simples, introdução etc… Mas parabéns pelo tutorial, Estou aguardando mais tutoriais sobre AngularJs!

    • Tiago Carpanese

      Muito obrigado. Estou inserindo um novo tutorial porém é java mas todo baseado em AngularJS

  • Edilson Dantas Dias

    Boa tarde Tiago..

    Estou começando agora com front e tals… pode me dar uma ajuda?

    Preciso fazer uma lista de produtos e a visualização dele também, preciso fazer uma forma bem simples. talvez um xml com a informação toda do produto (nome, descrição, valor, foto, preço) etc…

    pode me ajudar estou começando a trabalhar como front sou estag e queria mostrar uma coisa legal aqui no trabalho e será uma forma de aprender também..

    desde já agradeço.

  • Flavio Cardoso

    Olá Tiago. Eu segui os 3 tutoriais e conclui com êxito, porém no front end, eu esperava que o aplicativo desenvolvido acessasse os dados de imoveis cadastrados no backend, entretanto, acessar os dados de remédios. Como altero para que o fornt end desenvolvido utilize a base de dados de imoveis. Grato. Flávio