AngularJS routeProvider无法加载templateUrl问题求助

Hey there! Let's figure out why your routeProvider isn't loading the templateUrl correctly—this is a super common snag when starting out with AngularJS routing, so let's walk through the most likely fixes step by step.

First, let's recap your code (I'll fill in the truncated JavaScript part to make it clearer):

<body ng-app="myapp"> 
  <ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#/second">SECOND</a></li> 
  </ul> 
  <div ng-view></div> 
  <script type="text/javascript">
    var app = angular.module('myapp', ['ngRoute']);
    app.config(function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'home.html'
        })
        .when('/second', {
          templateUrl: 'second.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </script>
</body>

Common Fixes to Try: #

• Make sure you've included the ngRoute module
  AngularJS routing isn't part of the core library—you need to load the separate angular-route.js file AND declare it as a dependency in your app:

  <!-- Load Angular core first, then the route module -->
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  

  And your module declaration must include ['ngRoute'] (like in the code above)—skip this, and routing won't work at all.

• Double-check your templateUrl path
  This is the #1 culprit. If the template file returns a 404 error (check your browser's DevTools > Network tab), your path is wrong:

  • If the template is in the same folder as your main HTML: templateUrl: 'second.html'
  • If it's in a subfolder: templateUrl: 'templates/second.html'
  • Avoid using absolute paths unless you're sure about the domain/port (e.g., http://localhost:3000/second.html for local servers)

• Fix your HOME link's href
  Your current HOME link uses href="#"—this won't trigger the root route. Change it to:

  <li><a href="#/">HOME</a></li>
  

  Otherwise, clicking HOME won't load your home template.

• Check for syntax errors in route config
  Missing commas, unclosed brackets, or typos in method names (like $routeprovider instead of $routeProvider) can break things. Use your browser's DevTools > Console tab to catch any JavaScript errors.

• Avoid using file:// protocol for local development
  If you're opening your HTML file directly in the browser (path starts with file://), some browsers block local AJAX requests (which Angular uses to load templates). Use a simple local server instead—tools like http-server (Node.js) or XAMPP work great for this.

Give these steps a try, and if you're still stuck, share the full error messages from your console and the exact structure of your project files—that'll help narrow it down further!

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