<!-- Código main.js -->
angular.module('alurapic', ['minhasDiretivas', 'ngRoute'])
.config(function($routeProvider, $locationProvider){ //configurando uma rota
$locationProvider.html5Mode(true);
$routeProvider.when('/fotos', { // chamando a rota e definindo que QUANDO (when), o usuario acessar a rota de '/fotos'...
templateUrl: 'partials/principal.html', // enviaremos um tampleteUrl (nosso html) na view parcial
controller: 'FotosController' //indicando o controlador para a parcial chamada acima
});
$routeProvider.when('/fotos/news',{ // quando for acessada a rota fotos/news
templateUrl: '/partials/foto.html', //vamos enviar esse tamplate
controller: 'FotoController'
});
$routeProvider.when('/fotos/edit/:fotoId',{ //para linkar com o id da foto
templateUrl : 'partials/foto.html',
controller : 'FotoController'
});
$routeProvider.otherwise({redirectTo: '/fotos'}); //Se for digitada uma URL não existente, ele nos jogará para essa url determinada
}); //todas as diretivas criadas da sua aplicação,precisa ser definidas aqui
<!-- minhas diretivas -->
angular.module('minhasDiretivas', [])
.directive('meuPainel',function(){ // nomeda diretiva recebendo uma função para definir uma diretiva
var ddo = {};
ddo.restrict = "AE"; //definindo que nossa diretiva será usada como atributo e elemento (AE)
ddo.scope={
titulo:'@'
};
ddo.transclude =true;
ddo.templateUrl = 'js/directives/meu-painel.html'
return ddo; //toda diretiva deve retornar sempre um objeto
})
.directive('minhaFoto',function(){
var ddo ={};
ddo.restrict ="AE";
ddo.scope={
url:'@',
titulo: '@'
};
ddo.transclude = true;
ddo.template = '<img class="img-responsive center-block" src="{{url}}" alt="{{titulo}}">';
});