I'm making a web page with AngularJS , and use a controller with NgRoute , and with Ngview pass page by page as a dynamic website, the problem is that I want to change the title and the metatags for each page that happened, and only shows the title and meta tags of index , that is where you put in the NgRoute controller, I would like to know if there is any way to change that ?.
My code in js:
var app = angular.module('estudiantesDB',['ngRoute']);
app.controller('mainCtrl', ['$scope','$http', function($scope,$http){
$scope.menuSuperior = 'parciales/alumnsCygnuspy.html';
}]);
My config.js that controls the links:
app.config( function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'parciales/estudiantes.html',
controller:'alumnosCtrl',
})
.when('/listalums2018py', {
templateUrl: 'parciales/listalums.html',
controller:'alumnosCtrl'
})
.when('/alumno/:codigo', {
templateUrl: 'parciales/alumno.html',
controller:'alumnoCtrl'
})
.when('/proyecto/:codigo', {
templateUrl: 'parciales/proyecto.html',
controller:'alumnoCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The index.html
<!DOCTYPE HTML>
<html ng-app="estudiantesDB" ng-controller="mainCtrl">
<head>
<title>Estudiantes CYGNUS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="icon" href="images/icono.jpg"/>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,700&subset=latin-ext" rel="stylesheet">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<meta property="og:url" content="http://www.cygnus.com.py/cursos/alumnos.html#/proyecto/{{alumno.codigo}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Proyecto hecho en el curso de CYGNUS" />
<meta property="og:description" content="Mira el gran proyecto hecho por un alumno" />
<meta property="og:image" content="http://www.cygnus.com.py/cursos/images/Identidad02.png" />
<!-- Incluir AngularJS -->
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<!--Controladores de paginas -->
<script src="js/alumnosCtrl.js"></script>
<script src="js/alumnoCtrl.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/functions.js"></script>
</head>
<body class="is-preload">
</style>
<!-- Wrapper -->
<div id="wrapper" >
<header id="header" class="alt">
<a href="index.html" class="logo image"><img src="images/Identidad02.png"></a>
<nav>
<!--<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
</ul> -->
<!--<a href="#menu" class="icon fa-twitter">Menu</a>-->
<a href="tel:+595984927729" target="_blank" class="iconoo alt fas fa-phone Blondie"><span class="label">Facebook</span></a><a href="https://www.facebook.com/cygnuspy/" target="_blank" class="iconoo alt fab fa-facebook-f"><span class="label">Facebook</span></a><a href="https://api.whatsapp.com/send?phone=595984927729" target="_blank" class="iconoo alt fab fa-whatsapp"><span class="label">Whatsapp</span></a> <a href="#menu" class="icon fa-bars" >Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="http://www.cygnus.com.py/">Pagina Principal</a></li>
<li><a href="index.html">Cursos</a></li>
<!--<li><a href="alumnos.html">Estudiantes</a></li>-->
<li><a href="contactos.html">Contactanos</a></li>
</ul>
</nav>
<div class="container" >
<!-- La pagina principal ira aquí -->
<div ng-view class></div>
</div><!-- /.container -->
</div>
</body>
</html>
The page that I want you to have the different
<!DOCTYPE html>
<html ng-app="estudiantesDB" ng-controller="mainCtrl">
<head>
</head>
<body>
<div id="main">
<section id="one">
<div class="inner">
<header class="major" style="font-weight: none; letter-spacing: none;">
<h1>{{alumno.proyecto}}</h1>
<p style="font-weight: none; letter-spacing: none;">Proyecto hecho por: {{alumno.alumno}}
<img ng-src="img/{{ alumno.foto }}" class="image avatar img-circle">
</p>
<p>Proyecto hecho en: {{alumno.proyectohecho}}</p>
</header>
<p></p>
</div>
</section>
<section id="two" class="disenoProgram">
<section>
<div class="content">
<div class="inner">
<h3>{{alumno.descrip}}</h3>
<br>
<h4>Comparte en Facebook:</h4>
<ul class="actions fit small" >
<div class="fb-share-button" data-href="http://www.cygnus.com.py/cursos/alumnos.html#/proyecto/1" data-layout="button" data-size="large" data-mobile-iframe="true"><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.cygnus.com.py%2Fcursos%2Falumnos.html%23%2Fproyecto%2F{{alumno.codigo}}&src=sdkpreparse" class="button primary fit small fb-xfbml-parse-ignore" target="_blank">Compartir <i class="fab fa-facebook-f"></i></a></li>
</ul>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
</div>
</section>
</div>
<style>
.avatar{
width: 75px;
height: 75px;
}
.puntero{
cursor: pointer;
}
</style>
</body>
</html>