Arquivos estáticos

Nessa etapa, iremos adicionar incríveis funcionalidades em nosso site usando o framework AngularJS.

Primeiramente, vamos adicionar o AngularJS em nosso projeto. Para fazer isso, siga os seguintes passos:

Entre na pasta da sua aplicação (nesse exemplo chama-se cliente) e crie uma pasta chamada static
Baixe o angular em fomrato .zip https://angularjs.org/
Extraia o arquivo .zip baixado e mova o arquivo angular.js para a pasta static
Dentro da pasta static, crie uma pasta chamada js
Dentro da pasta js, crie três arquivos. Um chamado app.js, outro chamado catalogoDiretiva.js e o último chamado catalogoControlador.js
Dentro do arquivo base.html, insira em cima da tag <!DOCTYPE html>, o seguinte código:

{% load staticfiles %}

Dentro da tag <head>, insira os seguintes códigos:

    <script src="{% static 'angular.js' %}"></script>
    <script src="{% static "js/app.js" %}"></script>
    <script src="{% static "js/catalogoControlador.js" %}"></script>
    <script src="{% static "js/catalogoDiretiva.js" %}"></script>

Acabamos de adicionar o AngularJS e de chamá-lo usando a linguagem de templates do django.

Criando aplicação em AngularJS

Abra o arquivo app.js e cole o código abaixo:

var app = angular.module ("catalogo",[]);

Abra o arquivo catalogoControlador.js e cole o código abaixo:

    app.controller('catalogoControlador', ['$scope', function($scope, $http){
    $scope.carros = [];
    var isLoaded = false;

    $scope.load = function(cars, infocars, atributos){ // Armazenando características dos carros.
            if(isLoaded) return;

            else{
                for (var autom = 0 ; autom < cars.length ; autom++){
                    $scope.carros.push(new Object());
                    for (var at = 0 ; at < atributos.length ; at++){
                        $scope.carros[autom][atributos[at]] = String(infocars[autom][at]);

                    }
                }
                isLoaded = true;
            };

            console.log($scope.carros);

        };

    $scope.getCarros = function(){
                return $scope.carros;
            };

    }]);

Esse código em JavaScript recebe como parâmetro uma matriz com atributos de carros salvo no banco de dados e guarda os valores em objetos JavaScript.

Exibindo carros

Vá até a pasta da sua aplicação Django e abra o arquivo views.py. Em seguida, apague tudo e cole o seguinte código:

    from django.shortcuts import render
    from django.http import HttpResponse
    from cliente.models import Carro


    # Create your views here.

    def cliente(request):
        data = {}
        data['listagem_de_carros'] = Carro.objects.all() # adiciona todos os carros que estão no banco de dados.
        data['cars'] = [str(n.Modelo) for n in data['listagem_de_carros']]

        data['infocar'] = []

        for carro in data['listagem_de_carros']:
            data['infocar'].append([carro.id, str(carro.Modelo), str(carro.Foto), str(carro.Marca), str(carro.Modelo), str(carro.Ano), str(carro.Velocidade), str(carro.Motor), str(carro.Potencia), str(carro.Consumo), str(carro.Conforto), str(carro.Seguranca)])

        data['atributos'] = ['id','detalhes','imagem','marca','modelo','ano','velocidade','motor','potencia','consumo','conforto','seguranca'];

        return render(request, 'index.html', data)

Esse código lê a tabela do banco de dados e salva o resultado em uma lista do dicionário data e retorna no render.

Agora abra o arquivo index.html e adicione o código abaixo:

    {% block catalogue%}

    <div class="row" ng-controller = "catalogoControlador" style="margin-top: 100px; margin-left: 35px; width: 95%"> <!-- Eu sei que é feio.... -->

    <span ng-bind="load({{cars}}, {{infocar}}, {{atributos}})"></span>

      <span style="font-family: PT Sans">
      <div class="col-sm-6 col-md-4" ng-repeat = "carro in getCarros() | filter: searchText">
        <div class="thumbnail"><a id="carroDetalhe" ng-href="#{{ carro.detalhes }">


          {% verbatim %}
          <img ng-src="{{carro.imagem}}" class="img-responsive"/>
          <div class="caption">
            <h3 class="text-center"><b><span ng-bind="carro.marca + ' ' + carro.modelo + ' ' + carro.motor"></span></b> <small><span ng-bind="carro.ano"></span></small></h3>
            <table class="table table-striped" style="margin-top: 30px">
              <tr>
                <td class="text-uppercase"><b>Velocidade</b> <small>(km/h)</small></td>
                <td class="text-center">
                  <progress max="320" value="{{ carro.velocidade }}"></progress>
                </td>
              </tr>
              <tr>
                <td class="text-uppercase"><b>Potência</b> <small>(cv)</small></td>
                <td class="text-center">
                  <progress max="300" value="{{ carro.potencia }}"></progress>
                </td>
              </tr>
              <tr>
                <td class="text-uppercase"><b>Consumo</b> <small>(km/l)</small></td>
                <td class="text-center">
                  <progress max="20" value="{{ 20 - carro.consumo }}"></progress>
                </td>
              </tr>
              <tr>
                <td class="text-uppercase"><b>Conforto</b> <small>(0 a 5)</small></td>
                <td class="text-center">
                  <progress max="5" value="{{ carro.conforto }}"></progress>
                </td>
              </tr>
              <tr>
                <td class="text-uppercase"><b>Seguraça</b> <small>(0 a 5)</small></td>
                <td class="text-center">
                  <progress max="5" value="{{ carro.seguranca }}"></progress>
                </td>
              </tr>
            </table>{% endverbatim %}
          </div>
        </div>
        </a>
      </div>
      </span>
    </div>

    {% endblock %}

Obs.: Dentro de base.html, substitua a tag por

Agora, preste muita ATENÇÃO! Para o seu site exibir imagens que foram inseridas por upload, abra o arquivo url.py e insira, dentro de urlpatterns, o seguinte código:

url(r'^(?P<path>.*.jpg)/$', 'django.views.static.serve',
    {'document_root': '/home/myNameUser/Project/catalogo_de_carros'}),

Troque /home/myNameUser/Project/catalogo_de_carros pelo diretório do seu projeto.