Hola... estoy empezando a trabajar con angularjs y necesito ayuda con un tema...
Al igual que en jsp-include podías meter en un html una linea de código igual para todas las paginas sin tener que cargar todo el rato la barra de navegación, los links... etc,
me gustaría poder hacer lo mismo con angular.
Mi codigo queda así, y se que hay algún punto en el que me pierdo y me confundo... os agradecería vuestra ayuda.
Código:
/////////////codigo de mi index.html
<!DOCTYPE html>
<html ng-app="userIndex">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Hospital</title>
<script src="angular.min.js"></script>
<script> var app = angular.module("userIndex", []);
app.controller("PruebaController", function($scope) {
$scope.urlHeader="header.html"
});
</script>
</head>
<body ng-controller="UserController">
<div ng-controller="PruebaController" ng-include="'header.html'" id="headFragment"></div>
Código:
///////// código pagina donde incluyo todos los links y la barra de navegación que quiero meter en el include
<div id="headerFragment">
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap.css" />
<link rel="stylesheet" href="/resources/css/styles.css" />
<link href="/resources/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="/resources/js/angular.min.js"></script>
<script src="/resources/js/modules/app.js"></script>
<script src="/resources/js/modules/users.js"></script>
<script src="/resources/js/angular-resource.min.js"></script>
<script src="/resources/js/angular-route.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="/resources/js/jquery.ui.datepicker-es.js" type="text/javascript"></script>
<div class="navbar navbar-inverse navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="" >Hospital </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="users"><span class="glyphicon glyphicon-user"></span>Pacientes</a></li>
<li><a href="interventions"><span class="glyphicon glyphicon-user"></span>Intervenciones</a></li>
</ul>
<form id="logout" class="navbar-form navbar-right" action="/logout" method="post" ng-cloak>
<a href="/logout" class="btn btn-default"><span class="glyphicon glyphicon-log-out" ></span> Sign out</a>
</form>
</div>
</div>
</div>
</div>