Angular 1.6使用ng-route出现空白页无报错问题求助

Hey there! Let’s walk through the most common reasons your ng-route setup is giving you a blank page without errors—this is super common for Angular 1.6 beginners, so don’t stress!

1. Did you add the <ng-view> container? #

This is the #1 mistake I see. Angular needs a dedicated spot to inject your routed templates, and that’s exactly what <ng-view> does. Make sure you have this tag somewhere in your main HTML file, like:

<body ng-app="try">
  <!-- Example navigation links -->
  <a href="#!/home">Home</a>
  <a href="#!/about">About</a>
  
  <!-- This is where routed content will render -->
  <ng-view></ng-view>
</body>

Without this tag, your templates have nowhere to show up—hence the blank page.

2. Verify ngRoute script is loaded correctly #

Angular 1.6 separates ngRoute into a standalone file (it’s not included in the core angular.js). Double-check that you’ve added the script tag after the core Angular script:

<script src="path/to/angular.js"></script>
<script src="path/to/angular-route.js"></script>

If this file is missing or loaded out of order, your ngRoute dependency might fail silently (sometimes browsers don’t throw obvious errors here).

3. Check your <blog-list> directive definition #

Your default route uses a custom directive <blog-list></blog-list>, but if this directive isn’t properly defined, Angular won’t render anything—and might not throw an error. Make sure you’ve created the directive correctly, like:

myApp.directive('blogList', function() {
  return {
    restrict: 'E', // Ensures it works as an element
    template: '<div>Your blog list content here</div>'
    // Or use templateUrl: 'path/to/blog-list.html' for external templates
  };
});

To test if this is the issue, temporarily replace the directive with a simple template:

.when('/', { template: "<h1>Default Page Loaded!</h1>" })

If this shows up, your directive is the problem.

4. Check $locationProvider configuration #

You’re injecting $locationProvider into your config, but if you enabled HTML5 mode without setting a base href, it can break routing silently. If you have this line:

r.html5Mode(true); // r is your $locationProvider

You need to add a <base> tag in your HTML’s <head>:

<head>
  <base href="/">
</head>

If you don’t want HTML5 mode, just remove that line—Angular 1.6 uses hashbang mode (#!/) by default, which works without extra setup.

5. Debug route activation #

To confirm if your routes are even triggering, add a resolve function to log to the console:

myApp.config(["$routeProvider", "$locationProvider", function(e, r) {
  e.when('/home', { 
    template: "<h1>Home</h1>",
    resolve: {
      log: function() {
        console.log('Home route activated!');
        return true;
      }
    }
  })
  // ... other routes
}]);

Open your browser’s console (F12 > Console tab) and navigate to the route. If you see the log, the route is working—so the issue is with your template/directive. If not, the route isn’t being matched (check for typos in paths, or missing hashbang in links).

6. Fix template syntax issues #

In your code, you’re using < and > (HTML entities) for tags in templates. While this might work if copied from an escaped source, it’s better to use actual angle brackets in your JS code:

// Instead of template: "<h1>Home</h1>"
template: "<h1>Home</h1>"

Entity codes can sometimes cause Angular to parse the template incorrectly.

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