Solucionado
Fala pessoal,
Acabei de ver a aula número 4, que fala sobre rotas. Mas no exemplo passado não fala sobre o principal uso do sistemas nos dias de hoje, que é o uso de Header e o Footer. Não gostaria de criar uma página html sempre colocando o Header e o Footer, visto que seus botões e títulos são dinâmicos.
Como faria nesse caso?
hoje, com a Alura e o Google Gemini
Não entendi a relação das rotas com header e footer (não vejo relação alguma). Viajei total aqui. Pode detalhar melhor?
Sobre o header e footer eles ficam no índex.html e serão usados em todas as páginas. Você só define em um lugar apenas.
Se quiser mudar o conteúdo do header e do footer que nem sempre são dinâmicos, mas se quiser associa um controller em cada um deles e forneça os dados que desejar.
Era essa sua dúvida?
Flávio,
Obrigado pela resposta. Entendi o que você quis dizer.
Mas vamos imaginar a seguinte situação. Tenho um Header que possui um título que muda de acordo com a página. Esse header tem controller associado a ele e a página usa o esquema de rotas, onde cada página tem um controller associado.
Como o controller do header vai pegar o título da página?
Esse exemplo é muito utilizado em páginas mobile.
Desde já agradeço a ajuda.
Acho que eu entendi o que você quer. Uma solução é na rota você adicionar uma propriedade que guardará o título da página. Depois, quando o sistema de rotas do angular for executado, ele verifica o valor dessa propriedade e joga no escopo pai de todos os controller, o $rootScope. Como a info está no $rootScope, você poderá acessar através de AE em qualquer lugar. Veja um exemplo, pegando o main.js final da aplicação (quando termina o curso):
angular.module('alurapic', ['minhasDiretivas','ngAnimate', 'ngRoute', 'ngResource', 'meusServicos'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/fotos', {
titulo: 'Listagem de Fotos',
templateUrl: 'partials/principal.html',
controller: 'FotosController'
});
$routeProvider.when('/fotos/new', {
titulo: 'Novo foto',
templateUrl: 'partials/foto.html',
controller: 'FotoController'
});
$routeProvider.when('/fotos/edit/:fotoId', {
titulo: 'Alterando foto',
templateUrl: 'partials/foto.html',
controller: 'FotoController'
});
$routeProvider.otherwise({redirectTo: '/fotos'});
}).run(['$rootScope', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
alert(current.$$route.title);
$rootScope.titulo = current.$$route.titulo;
});
}]);A novidade é o .run.
Agora, no index.html basta acessar esse valor em qualquer lugar, inclusive fora da diretiva ng-view:
<body>
<h1>{{titulo}}</h1>
<div class="container">
<ng-view></ng-view>
</div> <!-- fim container -->
</body>Pronto, agora cada parcial que você visitar esse valor estará disponível. Você pode usar essa info onde quiser.
Testei aqui e funcionou perfeito.
Só não concordo com você que o principal uso de rotas é header e footer, longe disso.
Opa, me expressei mal mesmo. Talvez tenha sido influenciado por frameworks mobile que estão usando muito o angular, como o Ionic, e também por ver muitos sistemas usando Header fixo, com alguma coisa dinâmica.
Mas é exatamente o que eu preciso. Obrigado mesmo. Acho que seu exemplo vai ajudar muitos usuários aqui no Alura.
Abraços.
Tranquilo Eduardo! Que bom que tenha gostado da solução. Nem sempre o instrutor passa pelos mesmos problemas dos alunos e por isso as vezes elr custa a entender com clareza o problema.
Agora é continuar o treinamento !
Bom estudo !