javascript - 无法在AngularJS中实例化模块

我是AngularJS的新手，正在尝试与flask服务一起设置angularjs路由，但它似乎不起作用。在这里，您可以看到运行应用程序时遇到的错误：

错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.25/ $ injector modulerr？p0 = scotchApp＆p1 =％5B％24injector％3Aunpr％5D％20http％3A％2F％2Ferrors.angularjs.org％2F1.2.25％2F％24injector％2Funpr％ 3Fp0％3D％2524routeProvider％0AD％2F％3C％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A6％3A450％0Agc％2Fl。％24injectoror ％3C％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A36％3A202％0Ac％40https％3A％2F％2Fajax.googleapis.com％2Fajax ％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A34％3A305％0Ad％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A35 ％3A1％0Ae％2F％3C％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A33％3A386％0Ar％40https％3A％2F％2Fajax .googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A7％3A288％0Ae％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular .min.js％3A33％3A207％0Agc％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％ 2F1.2.25％2Fangular.min.js％3A36％3A309％0Afc％2Fc％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A18％3A170％ 0Afc％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A18％3A387％0AXc％40https％3A％2F％2Fajax.googleapis.com％2Fajax％ 2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A17％3A415％0A％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A214％ 3A469％0Aa％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A145％3A67％0Aoe％2Fc％2F％2F％3C％40https％3A％2F％ 2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A31％3A223％0Ar％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％ 2Fangular.min.js％3A7％3A288％0Aoe％2Fc％40https％3A％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.2.25％2Fangular.min.js％3A31％3A207％0A

这是我的项目结构：

 angular_routing/
      flask_service.py
      static/
        script.js
      templates/
        index.html
        ....

这是我的script.js文件：

var scotchApp = angular.module('scotchApp', [""]);
    // configure our routes
    scotchApp.config(function($routeProvider, $locationProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'templates/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'templates/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'templates/contact.html',
                controller  : 'contactController'
            });

            $locationProvider.html5Mode(true);
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
    });

    scotchApp.controller('aboutController', function($scope) {
        $scope.message = 'Look! I am an about page.';
    });

    scotchApp.controller('contactController', function($scope) {
        $scope.message = 'Contact us! JK. This is just a demo.';
    });

这是我的index.html文件：

<html ng-app="scotchApp">
<head>
    <title>
        Hello world!
    </title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

    <script src="static/script.js"></script>

</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="/">Angular Routing Example</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">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>

</body>
</html>

最后，这是我的flask_service.py文件：

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

最佳答案

您应该使用var scotchApp = angular.module('scotchApp', ['ngRoute']);而不是var scotchApp = angular.module('scotchApp', [""]);，否则您将无法实例化该模块。

阅读有关AngularJS modules的更多信息。