Question

我正在尝试将Angular与RequireJS一起使用，并且我遇到了Angular路由问题。我收到的错误是“Unknown provider：$ routeProvider”，所以我知道ngRoute依赖不起作用。我不知道为什么。以下是我的代码，有人可以帮助我吗？

的index.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>

main.js

require.config({

    paths: {
        'angular': 'vendor/angular',
        'domReady': 'vendor/domready',
        'ngRoute': 'vendor/angular-route'
    },

    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngRoute': {
            deps: ['angular']
        }
    },

    deps: ['./bootstrap']
});

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']);
    });

});

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;

});

routes.js

require(['app'], function(app) {
    'use strict';

    app.config(['$routeProvider', function($routeProvider) {

        $routeProvider.when('/home', {
            templateUrl: './views/home.html',
            controller: 'homeCtrl'
        });

    }]);


});

Answer 1

我自己解决了这个问题。这是我的新main.js和bootstrap.js希望它可以帮助其他人在RequireJS + ngRoute上遇到麻烦。我仍然需要将我的app.config分成另一个文件，但是现在这个解决方案运行良好。谢天谢地。

<强> main.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']
});

<强> 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']);
    });

});

AngularJS + RequireJS。未知提供商：$ routeProvider？

1 个答案: