Duvida na Aula 3 - Erros | AngularJS: crie webapps poderosas

Bom dia Pessoal,

Minha pagina so carrega o jumbotron e mais nada. O console está retornando alguns erros e não consigo descobrir de jeito nenhum..

Segue os erros:

GET file:///C:/Users/lc/Desktop/alurapic/public/%7B%7Bfoto.url%7D%7D net::ERR_FILE_NOT_FOUND

XMLHttpRequest cannot load file:///C:/Users/lc/Desktop/alurapic/public/js/directives/meu-painel.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

XMLHttpRequest cannot load file:///C:/Users/lc/Desktop/alurapic/public/v1/fotos. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: [$compile:tpload] http://errors.angularjs.org/1.3.15/$compile/tpload?p0=js%2Fdirectives%2Fmeu-painel.html
 at angular.min.js:6
 at angular.min.js:137
 at angular.min.js:112
 at n.$eval (angular.min.js:126)
 at n.$digest (angular.min.js:123)
 at n.$apply (angular.min.js:126)
 at angular.min.js:17
 at Object.e [as invoke] (angular.min.js:36)
 at d (angular.min.js:17)
 at uc (angular.min.js:18)

Meu código:

minhas-diretivas.js

angular.module('minhasDiretivas', [])
    .directive('meuPainel', function () {
        var ddo = {};
        ddo.restrict = "AE"; //DDO pode ser usado como Attr ou Element 

        ddo.transclude = true; //Manter os elementos filho de quem esta com ng-transclude
        ddo.scope = {
            titulo : '@'
        };

        ddo.templateUrl = 'js/directives/meu-painel.html';

        return ddo;
    });

meu-painel.html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{titulo}}</h3>
    </div>
    <div class="panel-body" ng-transclude>
    </div>
</div>

index.html

<!DOCTYPE html>
<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" type="text/css" href="css/estilos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="jumbotron">
            <h1 class="text-center">Alurapic</h1>
        </div>
        <div class="container foto-media">
            <div class="row">
                <meu-painel class="col-md-2" titulo="{{foto.titulo}}" ng-repeat="foto in fotos">
                    <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </meu-painel>
            </div>
        </div> <!-- fim container -->        
    </body>
</html>

Alguém poderia me ajudar?

Leonardo, vamos por parte.

Primeiramente a mensagem:

GET file:///C:/Users/lc/Desktop/alurapic/public/%7B%7Bfoto.url%7D%7D net::ERR_FILE_NOT_FOUND

Não é um erro. Isso acontece porque o navegador tentou buscar a foto antes do Angular alterar a AE (Angular Expression). Se quiser resolver, mude de src para ng-src. A tag da sua imagem fica assim:

 <img class="img-responsive center-block" ng-src="{{foto.url}}" alt="{{foto.titulo}}">

No mais, a mensagem que você esta recebendo indica que você não esta abrindo a aplicação Angular diretamente do servidor disponibilizado pelo curso. Se você não acessar a aplicação Angular a partir do servidor, ela não funcionará.

A mensagem de erro evidenciou que você esta abrindo a aplicação diretamente pelo servidor.