我是 AngularJS 的新手，我正在尝试将 AngularJS 路由与 Flask 服务一起设置，但它似乎不起作用。您可以在此处看到运行应用程序时遇到的错误:
Error: [$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.%24injector%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%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的信息.
关于javascript - 无法在 AngularJS 中实例化模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31891949/