Running the code as a single entity works fine, but separating it causes issues with no error output on the console. Even in a separate viewroute.js file, I can debug but not achieve normal behavior. The problem seems to lie in separating services from the main codebase. Any advice or suggestions would be appreciated. I've also experimented with loading jQuery before AngularJS.
The default localhost address is: http://localhost:3000/#!/
The folder structure is as follows: public> 1. controllers> membershipcontroller 2. mgRoute > viewroute.js views - index.html
The index.html file contains the following script loading order:
<!DOCTYPE html>
<html ng-app="tdmModule">
<head>
<title>welcome</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="ngRoute/viewroute.js" type="text/javascript"></script>
<script src="controllers/app.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div>
<div class="container pt-5">
<div ng-view></div>
</div>
</div>
</body>
</html>
Here's the content of my app.js file:
var app = angular.module("tdmModule", ["ngRoute"]);
app.config(['$qProvider', function($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
//This section needs to be separated into its own file
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "home",
controller: 'homeController'
})
.when("/membershipdetails", {
templateUrl: "membershipdetails",
controller: 'membershipController'
})
.when("/help", {
templateUrl: "help",
controller: 'helpController'
}).otherwise({
redirectTo: '/'
});
}
]);
// End separation
app.controller('membershipController', function($scope, $filter, $http,
$httpParamSerializer, $location, membershipService, setnotanoption,
compileservice) {
// Controller logic here...
});
I attempted to isolate the following code into the viewroute.js file: I can confirm that the debugger hits, indicating it loads correctly. However, when commented out from the app.js file, the page fails to load without any errors appearing in the console.
var app = angular.module("tdmModule", ["ngRoute"]);
//Error handling configuration
app.config(['$qProvider', function($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
debugger; ///this debugger is being hit
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home",
controller: 'homeController'
})
.when("/membershipdetails", {
templateUrl: "membershipdetails",
controller: 'membershipController'
})
.when("/help", {
templateUrl: "help",
controller: 'helpController'
}).otherwise({
redirectTo: '/'
});
});