angular.js - Encountering some problems when using requireJS module angularjs code

Question

The original angularjs project is available, but an error occurred when using requireJS.
The error is app.js
The app.js code in the original angularjs code is

angular.module('todomvc', ['ngRoute', 'ngResource'])
    .config(function ($routeProvider) {
        'use strict';

        var routeConfig = {
            controller: 'TodoCtrl',
            templateUrl: 'todomvc-index.html',
            resolve: {
                store: function (todoStorage) {
                    // Get the correct module (API or localStorage).
                    return todoStorage.then(function (module) {
                        module.get(); // Fetch the todo records in the background.
                        return module;
                    });
                }
            }
        };

        $routeProvider
            .when('/', routeConfig)
            .when('/:status', routeConfig)
            .otherwise({
                redirectTo: '/'
            });
    });

After using requirejs
main.js

(function  () {
    require.config({
        paths: {
            'angular': '../node_modules/angular/angular',
            'angular-route': '../node_modules/angular-route/angular-route',
            'angular-resource': '../node_modules/angular-resource/angular-resource'
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'angular-route': {
                deps: ['angular'],
                exports: 'angular-route'
            },
            'angular-resource': {
                deps: ['angular'],
                exports: 'angular-resource'
            }
        },
        deps: ['bootstrap']
    })
})()

app.js

(function  () {
    define(['angular','angular-route','angular-resource'],function (angular){
        var moduleName = 'myAppModule';
        angular.module(moduleName, ['angular-route','angular-resource'])
    .config(function ($routeProvider) {
        'use strict';

        var routeConfig = {
            controller: 'TodoCtrl',
            templateUrl: 'todomvc-index.html',
            resolve: {
                store: function (todoStorage) {
                    // Get the correct module (API or localStorage).
                    return todoStorage.then(function (module) {
                        module.get(); // Fetch the todo records in the background.
                        return module;
                    });
                }
            }
        };

        $routeProvider
            .when('/', routeConfig)
            .when('/:status', routeConfig)
            .otherwise({
                redirectTo: '/'
            });
    });
    return moduleName;
    })
})()

The browser reported an error with the injection. . . I have been in contact with requirejs for a while. Is there anyone who can teach me how to change it?

Answer 1

The problem is obviously here:

angular.module(moduleName, ['angular-route','angular-resource'])

Your dependencies should still be written['ngRoute', 'ngResource'].

Answer 2

I don’t understand, since ng has already done DI, why do we need to use another loader?