preciso de um template padrão para todas as telas da minha aplicação front-end como faço isso com angular-js? tem como?
-
Não entendi, poderia ser mais especifico? O que seria um template layout e como deverá funcionar?– Emir Marques22/09/2015 às 12:40
-
eu tenho uma página onde eu vou criar o layout somente uma vez, e as outras páginas vão herdar o layout dessa página entende? @EmirMarques– Jose Vieira Neto22/09/2015 às 12:41
-
Certo, mais vc vai alterar alguma coisa nesse layout ou será alterado somente o controller?– Emir Marques22/09/2015 às 12:43
-
No layout não vou alterar nada só quando houver ajustes de layout , nenhuma interação vai ser feito nele , só nas páginas que herdaram dele @EmirMarques– Jose Vieira Neto22/09/2015 às 12:47
Adicione um comentário
|
1 Resposta
Tem como sim @Jose. É só usar o $routeProvider
.
Exemplo:
$routeProvider.when("/home", {
templateUrl: "public/view/home.html",
controller: "principalCtrl"
});
Dai na sua página (index.html
) você coloca um ng-view
no body
Exemplo:
<html ng-app="exemplo">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="public/libs/bootstrap/dist/js/bootstrap.js"/>
<link rel="stylesheet" href="public/styles/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="public/libs/angular/angular.js"></script>
<script src="public/libs/angular-route/angular-route.js"></script>
<script src="public/libs/angular/angular-locale_pt-br.js"></script>
<script src="public/libs/angular/angular-messages.js"></script>
<script src="public/libs/angular/angular-flash.min.js"></script>
<script src="public/libs/angular-animate/angular-animate.js"></script>
<script src="public/js/app.js"></script>
<script src="public/js/controller/loginController.js"></script>
<script src="public/js/controller/modalController.js"></script>
<script src="public/js/config/routeConfig.js"></script>
<script src="public/js/services/loginAPIService.js"></script>
<script src="public/js/value/configValue.js"></script>
</head>
<body>
<div ng-view></div>
</body>
<html>
Resumindo, essa página index.html
poderá se tornar seu template padrão, e voce chamará todas as outras páginas dentro dela.
-
1
-
Por nada, se tiver alguma dificuldade pra implementar essa solução é só comentar aqui que eu te ajudo a entender melhor. 22/09/2015 às 12:50