为何AngularJS代码中出现‘angular is undefined’报错？

Hey there! Let's break down why you're hitting that frustrating 'angular is undefined' error—it's a super common gotcha when you're just starting out with AngularJS, so don't worry, we'll fix it quickly.

The Root Cause #

Browsers parse HTML from top to bottom. Right now, your custom JavaScript code (where you're creating the weather module) is running before the AngularJS library has finished loading. When the browser hits var weather = angular.module(...), it has no idea what angular is yet—hence the error.

Step-by-Step Fixes #

Let's go through the changes you need to make:

1. Reorder Your Scripts
   Move your custom JS code after the AngularJS library script tag, and ideally right before the closing </body> tag. This ensures AngularJS is fully loaded before your code tries to use it.

2. Add the ngRoute Dependency File
   You're using ngRoute in your module, but AngularJS's routing module is a separate script. You need to include it after the main AngularJS file, otherwise you'll get another error once you fix the first one.

3. Fix the Route Path Typo
   Your home route has a stray dot: ./ should just be /—this will make sure your home route matches correctly.

Corrected Code Example #

Here's what your updated code should look like:

HTML File

<!DOCTYPE html>
<html lang="en" ng-app="weather">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Weather</title>
  <link rel="stylesheet" href="./bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="/" class="navbar-brand">Weather</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
        <li><a href="#!/forecast">Forecast</a></li> <!-- Added forecast link with AngularJS hashbang -->
      </ul>
    </div>
  </nav>
</header>
<div class="container">
  <div ng-view>
  </div>
</div>

<!-- Load AngularJS first -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<!-- Load ngRoute module -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js"></script>
<!-- Now load your custom app code -->
<script>
// Weather app module creation
var weather = angular.module('weather', ['ngRoute', 'ngResource'])
// config
weather.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.htm',
      controller: 'homeC'
    })
    .when('/forecast', {
      templateUrl: 'fore.html',
      controller: 'foreC'
    })
})
</script>
</body>
</html>

Quick Extra Tip #

I added a proper link to the forecast route using AngularJS's hashbang (#!/forecast) since AngularJS 1.6 uses this format by default—this will make sure your navigation works as expected. Also, double-check that your home.htm and fore.html files exist in the correct location relative to your main HTML file.

That should get rid of the 'angular is undefined' error and set you up for success with your weather app!

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