I have created a simple Angular Router, but I am facing an issue where the JavaScript is not executing or I am unable to access elements inside the templateUrl. I mostly followed the code from this tutorial, here.
Below is my index file:
<html ng-app="myApp">
<head></head>
<body ng-controller="mainController">
<a id="btnHome" href="#/">Home</a>
<a id="btnPlanner" href="#/planner">Planner</a>
<a id="btnSocial" href="#/social">Social</a>
<div id="main">
<!-- angular content -->
<div ng-view></div>
</div>
<script src="js/routing.js"></script>
</body>
</html>
This is my routing.js file:
// Define the angular module
var myApp = angular.module('myApp', ['ngRoute']);
// Set up the routes
myApp.config(function($routeProvider) {
$routeProvider
// Route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
});
});
// Create the controller and inject angular's $scope
myApp.controller('mainController', function($scope) {
$scope.message = 'This is the HOME page';
});
and here is the template file located at pages/home.html:
<button id="btnTest">Say Hello</button>
<script>
var btnTest = document.getElementById('btnTest');
btnTest.addEventListener('click', function(){
console.log('Hello');
});
</script>
If anyone has any ideas or alternatives, please share them.
Thank you, André