Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Duvida sobre layout em angular js

E possível ter dois layouts utilizando angular js?

Exemplo, tenho um layout que seria o default e outro que seria para login do sistema.

4 respostas

Oi Ciro!

Quando você diz layout, esta se referindo ao estilo CSS das parciais?

No aguardo para poder responder sua pergunta.

Oi flavio,

vou tentar dar um exemplo, tenho um layout que seria o meu default, onde nele vai conter a barra de menu e o cabeçalho que será visto em todo o sistema.

<!DOCTYPE html>

<html>

<head>
   // css padrão para todo o sistema
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

    </title>

</head>

<body>
//<cabeçario>
//<menu>

<ng-view></ng-view>

</body>

</html>

até ai tudo bem, todas a minha view vão ser renderizadas para esse cabeçario, porém é renderizado também o meu layout de login.

<!DOCTYPE html>
<html>

<head>
   // css para a pagaina de login
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>

    </title>

</head>

<body>

// htm para o login

</body>

</html>

gostaria que a pagina de login não fosse renderizada nesse ng-view e sim carregada como pagina a parte

solução!

Entendi, olha, tem duas soluções. Ou você torna cada um uma aplicação em separado com seu próprio index.html ou usa o que já é feito há anos em SPA.

Cada parcial sua terá uma <div> e nessa div você terá uma classe, por exemplo, parcial-login ou parcial-principal.

No seu arquivo CSS que é único para toda aplicação, você qualifica seus seletores CSS. Tudo que for para estilizar parcial-login você usa esse seletor, tudo que for para parcial-principal, você usa esse seletor.

É algo corriqueiro no mundo CSS. Um exemplo:

// parcia de login, sei lá.. um exemplo

<div class="parcial-login>
<!-- tudo vem aqui dentro -->
</div>

Agora, no CSS que é importado em index.html, você faz:

.pacial-login h1 {
  /* faz alguma coisa com h1 */
}

Ou seja, você é obrigado a qualificar cada seletor seu para aplicar o estilo na página certa.

Pegou o conceito? É conhecimento basicão mesmo de CSS, nada do outro mundo.

Claro!

Eu acabei fazendo algo parecido usando ng-show e ng-hide. Mas mesmo assim, muito obrigado!