Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema ao recarregar a página de nova foto

Quando eu recarrego a página com F5 ela aparece sem formatação do css, como se não recarregasse o css, mas acompanhando pelo console o css é carregado.

Só consigo acessar a página corretamente se eu recarregar a principal e depois clicar no botão nova foto

main.js

angular.module('alurapic', ['minhasDiretivas', 'ngAnimate', 'ngRoute'])
    .config(function($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.when('/fotos', {
            templateUrl: 'partials/principal.html',
            controller: 'FotosController'
        });

        $routeProvider.when('/fotos/novo', {
            templateUrl: 'partials/foto.html',
            controller: 'FotoController'
        });

        $routeProvider.otherwise({redirectTo: '/fotos'});

    });

foto.html

<div class="page-header">
    <h1>{{foto.titulo}}</h1>
</div>

<form ng-submit="submeter()" name="form" class="row">
    <div class="col-xs-12 col-md-6">
        <div class="form-group">
            <label for="titulo">Título:</label>
            <input ng-model="foto.titulo" class="form-control" type="text" id="titulo" name="titulo" placeholder="Digite o título da Foto">
        </div>
        <div class="form-group">
            <label for="descricao">Descrição:</label>
            <input ng-model="foto.descricao" class="form-control" id="descricao" type="text" name="descricao" placeholder="Digite a Descrição da Foto">
        </div>
        <div class="form-group">
            <label for="url">URL:</label>
            <input ng-model="foto.url" class="form-control" id="url" type="text" name="url" placeholder="Digite a URL ou caminho da Foto">
        </div>
        <a href="/" class="btn btn-default">Voltar</a>
        <button type="submit" class="btn btn-primary">Salvar</button>
        <hr>
    </div>
    <div class="col-xs-12 col-md-6">
        <minha-foto></minha-foto>
    </div>
</form>

index.html

<!DOCTYPE html>
<!-- o navegador sabe que o modulo precisa carregar-->
<html lang="pt-br" ng-app="alurapic">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Alurapic</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <base href="/">
</head>
<body>
    <div class="container">
        <ng-view></ng-view>
    </div> <!-- fim container -->       
    <script src="js/lib/angular.min.js"></script> 
    <script src="js/lib/angular-animate.min.js"></script>
    <script src="js/lib/angular-route.min.js"></script>
    <script src="js/main.js"></script> 
    <script src="js/controllers/fotos-controller.js"></script>
    <script src="js/controllers/foto-controller.js"></script>
    <script src="js/directives/minhas-diretivas.js"></script>
</body>
</html>
3 respostas
solução!

Eta! Esse problema é novo, nunca vi. No entanto, tenho aqui algumas perguntas:

1 - Você apagou todo o cache do navegador para ver se funciona? Algo pode estar no cache, por exemplo, de algum erro na criação do projeto que você corrigiu depois.

2 - Você esta usando o servidor disponibilizado pelo curso?

3 - Depois de ter respondido às duas perguntas, mova a tag <base> como primeira tag dentro do head e veja se o problema continua (apague o cache mais uma vez do browser antes de continuar).

Grande Flávio, excelente curso... a dinâmica do curso online não mudou muito das tuas aulas presenciais... :)

Foi só colocar o <base href="/"> no começo do head que funcionou...

Oi Bruno! Eu tento gravar os vídeos como se eu estivesse dando aula presencial. Que bom que gostou! Sucesso e bom estudo, meu aluno!