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.
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.
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
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!