在AngularJS中实例化模块失败
Failed to instantiate module in AngularJS
我是AngularJS的新手,我试图将AngularJS路由与flask服务一起设置,但它似乎不起作用。下面你可以看到我在运行应用程序时得到的错误:
错误:[$注射器:modulerr] http://errors.angularjs.org/1.2.25/喷射器美元modulerr ? p0 = scotchApp& p1 = 24喷射器% % 5 b % 3 aunpr % 5 d % 20 ferrors.angularjs.org http % 3 % 2 f % 2 % 2 f1.2.25 % 2 f % 24喷射器% 2 funpr % 2524 routeprovider fp0 % 3 d % % 0广告% 2 f % 3 c % 40 https % 3 % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a6 % 3 a450 % 0 agc % 2液体% 24喷射器% 3 c % 40 https % % 2 f % 2 3 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a36 % 3 a202 ac % 40 https % % 0 3 a % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a34 % 3 a305 % 0广告% 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a35 % 3 a1 % 0 ae % 2 f % 3 c % 40 https % 3 % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3, a33 % 3 a386 % 3 0 ar % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a7 % 3 a288 % 3 0 ae % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3, a33 % 3 a207 % 3 0 agc % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a36 % 3 a309 % 0亚足联% 2 3 fc % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3那么% 3 a170 % 3 0亚足联% 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3那么% 3 a387 % 3 0 axc % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3第a17 % 3 a415 % 0 a % 40 https % 3 a % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a214 % 3 a469 % 3 0 aa % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs fangul % 2 f1.2.25 % 2ar.min.js % 3 a145 % 3 a67 % 0效果范围% 2 fc % 2 f % 3 c % 40 https % 3 % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a31 % 3 a223 % 3 0 ar % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a7 % 3 a288 % 0效果范围% 2 3 fc % 40 https % % 2 f % 2 fajax.googleapis.com % 2 fajax % 2 flibs % 2 fangularjs % 2 f1.2.25 % 2 fangular.min.js % 3 a31 % 3 a207 % 0 a
下面是我的项目结构:
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', [""]);
,否则您将无法实例化模块。
- 导入模块失败's css文件
- AngularJS加载模块失败
- Angular--实例化模块失败
- 实例化模块失败错误:[$injector:unpr]
- 实例化app模块失败.处理步骤为什么
- 未捕获错误:[$injector:modulerr]实例化模块失败,原因是:
- Angularjs、Typescript、Uglify实例化myApp模块失败未知提供商:a
- 实例化myApp模块失败
- Angular js错误:[$injector:modulerr]实例化ngroute模块失败,原因是:
- 加载模块失败.处理步骤
- 意味着js应用在被推送后实例化AngularJS模块失败
- 在AngularJS中实例化模块失败
- 错误:[$injector:modulerr]实例化routerApp ui-router模块失败
- Angularjs: [$injector:modulerr]实例化ui-router模块失败
- AngularJS和cordova: web应用工作,但不能cordova:实例化模块失败
- Angular: 'modulerr', "实例化模块失败
- 使用相对路径加载模块失败
- 实例化ngAnimate模块失败,原因是:
- angular js $injector:modulerr用mangle实例化模块失败
- 用angular js几乎可以分页任何东西,实例化模块失败错误