This is the first time I am trying out AngularJS, and I found an example through W3. I am looking to use it to create routing for a new Bootstrap project I will be working on for a client.
The problem is that it doesn't seem to load the javascript I'm using. I'm not all that familiar with javascript and DOM, so not sure why this isn't working.
To show an example of what I'm talking about, I removed everything and just tried it with an image and tooltip. The image on the index page works correctly, but when the test page is loaded, the tooltip stops working. I tried to track if there was an error through developer tools, but nothing is showing up.
INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.php"
})
.when("/home", {
templateUrl : "main.php"
})
.when("/test", {
templateUrl : "test.php"
})
});
</script>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body ng-app="myApp">
<p><a href="#!home">Main</a> | <a href="#!test">Test</a></p>
<p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>
<div ng-view></div>
</body>
</html>
TEST:
<p><strong>Test</strong></p>
<p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>
Tooltip showing on index before the ng-view DIV.
Tooltip not showing on test ng-view.
UPDATE
Experiencing another issue where when I am trying to revisit /home that calls main.php, it only loads a blank screen with the latest posts and nothing else.
Homepage
About
Back Home
No errors are showing either.
ui.bootstrap, which implements tooltips (with templates) usinguib-tooltip-template. After adding a script, don't forget to inject the module:angular.module("myApp", ["ngRoute", "ui.bootstrap"])