AngularJS + RequireJS.未知提供商:$routeProvider

AngularJS + RequireJS. Unknown provider: $routeProvider?

本文关键字：routeProvider 提供商 未知 RequireJS AngularJS      更新时间：2023-09-26

我正在尝试将Angular与RequireJS一起使用，并且遇到Angular路由问题。 我收到的错误是" 未知提供程序：$routeProvider"，因此我知道ngRoute依赖项不起作用。 我不知道为什么。 这是我下面的代码，有人可以帮我吗？

索引.html 

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="main">
            <div ng-view>
        </div>
        <script data-main="js/main" src="js/vendor/require.js">
    </body>
</html>

主.js

require.config({
    paths: {
        'angular': 'vendor/angular',
        'domReady': 'vendor/domready',
        'ngRoute': 'vendor/angular-route'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngRoute': {
            deps: ['angular']
        }
    },
    deps: ['./bootstrap']
});

引导.js

/**
 * bootstraps angular onto the window.document node
 */
require([
    'require',
    'angular',
    'ngRoute',
    './app',
    './routes'
], function (require, ng) {
    'use strict';
    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

应用.js

define('app',
[
    'angular',
    'ngRoute'
], function(ng) {
    'use strict';
    console.log('app.js loaded');
    var app = ng.module('app', ['ngRoute']);
    console.log(app);
    return app;
});

路线.js

require(['app'], function(app) {
    'use strict';
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/home', {
            templateUrl: './views/home.html',
            controller: 'homeCtrl'
        });
    }]);

});

我自己解决了这个问题。 这是我的新主.js和引导程序.js 希望它可以帮助其他人在使用 RequireJS + ngRoute 时遇到问题。 我仍然需要将我的 app.config 分离到另一个文件中，但目前这个解决方案运行良好。 谢天谢地。

主.js 

require.config({
    paths: {
        'angular': 'vendor/angular',
        'domReady': 'vendor/domready',
        'angularRoute': 'vendor/angular-route'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angularRoute': {
            deps: ['angular'],
            exports: 'angularRouter'
        }
    },
    deps: ['./bootstrap']
});

引导.js

require(['angular', 'angularRoute'], function (angular, angularRoute) {
    'use strict';
    var app = angular.module('myApp', ['ngRoute']);
    app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'js/views/home.html'
        })
        .otherwise('/');
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
});
相关文章：