ngRoute无内容显示故障排查：多视图路由实现问题求助

Hi there, I'm learning and experimenting with AngularJS multi-view and routing functionality, and I've written three files: test.html, controllers.js, and app.js. Ideally, when I run the app, view1 should display a message and view2 should show the current datetime. But right now, only the "view1" and "view2" tabs are displayed—none of the message or datetime content shows up. Here's my code:

test.html #

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Routing</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>

app.js #

'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/view1',{
controller: 'Controller1',
templateUrl: 'partials/view1.html'
}).when('/view2',{
controller: 'Controller2',
templateUrl: 'partials/view2.html'
});
});

controllers.js #

'use strict';
angular.module('myApp.controllers',[]).
controller('Controller1',function($scope){
$scope.message="Hello, world";
}).controller('Controller2',function($scope){
$scope.now=new Date();
});

What's Causing the Issue & How to Fix It #

Let's break down the possible problems and their solutions step by step:

1. Missing Partial View Files (Most Likely Cause) #

Your route configuration references partials/view1.html and partials/view2.html, but you haven't included their code or confirmed they exist. If these files are missing, or if they don't use the $scope variables you defined in your controllers, nothing will show up in the ng-view container.

Fix:
Create a partials folder in your project root (same directory as test.html), then add these two files:

partials/view1.html

<!-- Use the $scope.message variable from Controller1 -->
<h2>{{ message }}</h2>

partials/view2.html

<!-- Use the $scope.now variable from Controller2, add a date filter for readability -->
<p>Current Date & Time: {{ now | date:'MM/dd/yyyy hh:mm:ss a' }}</p>

2. No Default Route Configuration #

Right now, when your app first loads, there's no matched route (the URL is just /#/ or empty), so ng-view stays empty. Even if you click the tabs, adding a default route ensures content loads immediately on initial page load.

Fix:
Update your app.js route config to include an .otherwise() clause:

'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider
  .when('/view1',{
    controller: 'Controller1',
    templateUrl: 'partials/view1.html'
  })
  .when('/view2',{
    controller: 'Controller2',
    templateUrl: 'partials/view2.html'
  })
  // Redirect to view1 by default
  .otherwise({ redirectTo: '/view1' });
});

3. Verify File Paths #

Double-check that all your file paths are correct:

• Ensure angular-route.js exists at lib/angular/angular-route.js (match the version of your angular.js file—mixing versions can cause unexpected errors)
• Confirm the partials folder and its files are in the correct location relative to test.html
• Make sure app.js and controllers.js are in the js/ folder as referenced

4. Check for Console Errors #

Open your browser's developer tools (F12) and go to the Console tab. Any errors (like 404s for missing partial files, or AngularJS module initialization issues) will give you direct clues about what's wrong.

Once you fix these items, your view content should display as expected when you click the tabs or load the app.

内容的提问来源于stack exchange，提问作者bhaskar das