RequireJs引用angular-route(1.7.3)模块一直拨错,折磨我三天了
Require加载angular-route的一个十分简单的Demo
相关代码
1、html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/computers">电脑</a></li>
<li><a href="#!/printers">打印机</a></li>
<li><a href="#!/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="bower_components/requirejs/require.js" data-main="require-config.js"></script>
</body>
</html>
2、config文件
require.config({
baseUrl: "./bower_components/",
paths: {
'angular': "angular/angular",
'angular-route': "angular-route/angular-route"
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular'],
exports: 'angular-route'
},
},
urlArgs: "v=20180904&r=" + Math.random()
})
require(["app"]);
3、app的代码
define(["angular",'angular-route'],function (angular) {
console.log(angular);
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
})
4、错误信息:
angular.js?v=20180904&r=0.22845383189839552:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module routingDemoApp due to:
Error: [$injector:nomod] Module 'routingDemoApp' 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.
https://errors.angularjs.org/1.7.3/$injector/modulerr?p0=routingDemoApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'routingDemoApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.3%2F%24injector%2Fnomod%3Fp0%3DroutingDemoApp%0A%20%20%20%20at%20http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A138%3A12%0A%20%20%20%20at%20http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A2289%3A17%0A%20%20%20%20at%20ensure%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A2210%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A2287%3A14)%0A%20%20%20%20at%20http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A5016%3A22%0A%20%20%20%20at%20forEach%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A5000%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A4917%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A1941%3A20)%0A%20%20%20%20at%20bootstrap%20(http%3A%2F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3Fv%3D20180904%26r%3D0.22845383189839552%3A1962%3A12)
at angular.js?v=20180904&r=0.22845383189839552:138
at angular.js?v=20180904&r=0.22845383189839552:5040
at forEach (angular.js?v=20180904&r=0.22845383189839552:387)
at loadModules (angular.js?v=20180904&r=0.22845383189839552:5000)
at createInjector (angular.js?v=20180904&r=0.22845383189839552:4917)
at doBootstrap (angular.js?v=20180904&r=0.22845383189839552:1941)
at bootstrap (angular.js?v=20180904&r=0.22845383189839552:1962)
at angularInit (angular.js?v=20180904&r=0.22845383189839552:1847)
at angular.js?v=20180904&r=0.22845383189839552:36223
刚开始学angular和require就碰到这么一个坑,用网上的开源项目试,都能完成,是不是1.7.3的版本有问题还是改接口了?求救各位大神。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论