Looking for assistance with applying JavaScript changes to ng-routed pages in AngularJS without using a controller.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/routing/about">About</a>
</li>
<li>
<a href="/routing/services">Services</a>
</li>
<li>
<a href="/routing/contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section ng-view="" class="top-page">
</section>
<script src="script/jquery.min.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/jquery.easing.min.js"></script>
<script src="script/angular.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="script/app.js"></script>
<script src="script/controller.js"></script>
<script>
$("#home").html("Home page");
</script>
home.html
<h1 id="home"></h1>
app.js
var app = angular.module("LearnRouting", ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider.html5
$routeProvider
.when("/",{
templateUrl:"pages/home.html",
controller:"homeController"
})
.when("/about",{
templateUrl:"pages/about.html",
controller:"homeController"
})
.when("/contact",{
templateUrl:"pages/contact.html",
controller:"homeController"
})
$locationProvider.html5Mode(true);
});
Seeking help on how to ensure that when home.html loads, the id value of 'home' is properly affected by the JavaScript code. Assistance on this matter is crucial for my project. Thank you.