CODEWITHSUNDEEP
javascriptangularjs
RobiminusMaximus
RobiminusMaximus

Reputation: 91

Views are not loading with ngRoute

Hi I am having an issue with my code here where I can't seem to get my views to load within my template.

Here are my tags:

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>

Here is my JS:

angular.module('dnsApp', ["ngRoute"])

var app = angular.module('dnsApp');

app.config(['$routeProvider', function($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/reporting.html'
  })
  .when('/reporting', {
    templateUrl: 'views/reporting.html'
  })
  .when('/detectionSummary', {
    templateUrl: 'views/detection-summary.html'
  })
  .when('/operationalMetrics', {
    templateUrl: 'views/operational-metrics.html'
  });
}]);

Here is my HTML:

 <ul class="nav navbar-nav">
    <li class="active"><a href="#!reporting"><i class="fa fa-dashboard"></i> <span class="sr-only">(current)</span></a></li>
    <li><a href="#!detectionSummary"><i class="fa fa-bolt"></i></a></li>
    <li><a href="#!operationalMetrics"><i class="fa fa-bar-chart"></i></a></li>
  </ul>

Nothing shows up and I am relatively new to AngularJs so any help would be much appreciated. Thanks!

Upvotes: 1

Views: 89

Answers (2)

Jose Luis Varon
Jose Luis Varon

Reputation: 16

you should add your module js to your tags in your "index".

also a ng-view in your main index.

documentation:https://docs.angularjs.org/api/ngRoute/directive/ngView

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

You should not declare the module again, change it as

//remove this line angular.module('dnsApp', ["ngRoute"])
var app = angular.module('dnsApp', ["ngRoute"])

app.config(['$routeProvider', function($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/reporting.html'
  })
  .when('/reporting', {
    templateUrl: 'views/reporting.html'
  })
  .when('/detectionSummary', {
    templateUrl: 'views/detection-summary.html'
  })
  .when('/operationalMetrics', {
    templateUrl: 'views/operational-metrics.html'
  });
}]);

Upvotes: 1

Related Questions