Question

如果我的app.js中有一条.when()路由，则会加载testApp模块，并且网站可以运行。但是，当我添加另一个.when()时，（例如，关于并联系），我的模块将无法加载。

见：

 angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to: Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我安装了AngularJS和Angular-Routes，并指定ngRoute依赖项（在app.js中）：

├── angular#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)
├─┬ angular-route#1.5.6 extraneous (1.5.7-build.4844+sha.cd3673e available)

有什么想法吗？

以下是代码：

app.py

from flask import Blueprint, make_response

mod = Blueprint('main', __name__)


# Pass routing onto the Angular app
@mod.route('/')
@mod.route('/about')
@mod.route('/contact')
def main(**kwargs):
    return make_response(open('app/static/index.html').read())

的index.html

    <!DOCTYPE html>
    <html ng-app="testApp">
    <head>

      <!-- load bootstrap and fontawesome via CDN -->
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

      <!-- load angular and angular route -->
          <script src="bower_components/angular/angular.js"></script>
          <script src="bower_components/angular-route/angular-route.min.js"></script>
          <script src="app.js"></script>

      <meta charset="utf-8">
      <base href="/">

    </head>

    <body ng-controller="mainController">

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Test App</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="/about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- this is where template content will be injected -->
            <ng-view></ng-view>

        </div>

    </body>
    </html>

app.js

// Create the module
var testApp = angular.module('testApp', ['ngRoute']);

// Routes
testApp.config(function($routeProvider, $locationProvider) {
    $routeProvider

    // Home page
    .when('/', {
        templateUrl : 'templates/home.html',
        controller  : 'mainController'
    });

    // About
    .when('/about', {
        templateUrl : 'templates/about.html',
        controller  : 'aboutController'
    });

    // Contact
    .when('/contact', {
        templateUrl : 'templates/contact.html',
        controller  : 'contactController'
    });

    $locationProvider.html5Mode(true)
});


// Controllers
// create the controller and inject Angular's $scope
testApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'It works!';
});

testApp.controller('aboutController', function($scope) {
    // create a message to display in our view
    $scope.message = 'About page here';
});

testApp.controller('contactController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Contact page here';
});

Answer 1

你有语法错误;在以.结尾的行之后，您不能立即以;开头的行。在每个when子句后删除那些分号。

当我向AngularJS应用添加多条路线时，为什么会出现模块错误？

1 个答案: