6

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?

4
  • Não entendi, poderia ser mais especifico? O que seria um template layout e como deverá funcionar? 22/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 22/09/2015 às 12:41
  • Certo, mais vc vai alterar alguma coisa nesse layout ou será alterado somente o controller? 22/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 22/09/2015 às 12:47

1 Resposta 1

10

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.

2
  • 1
    Obrigado pelo retorno :) 22/09/2015 às 12:48
  • 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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .