RequireJs引用angular-route(1.7.3)模块一直拨错,折磨我三天了

发布于 2022-09-07 22:02:46 字数 4820 浏览 12 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文