如何在requirejs中加载angularjs？答案

【问题标题】：How to load angularjs in requirejs?如何在requirejs中加载angularjs？
【发布时间】：2013-12-27 19:01:14
【问题描述】：

我的angular 测试代码单独与angular 一起工作正常。但是当我想使用requirejs 加载angular 的代码/应用程序时出现错误。

HTML，

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RequireJS + AngularJS</title>
        <meta charset="utf-8">

        <script data-main="js/main" src="js/lib/require/require.js"></script>

        <!--
        <script src="js/angular/angular.min.js"></script>
        <script src="js/angular/angular-route.js"></script>
        <script src="js/app.js" type="text/javascript"></script>
        -->

    </head>

    <body>

        <div ng-app='MyTutorialApp'>
            <ng-view></ng-view>
        </div>

    </body>

</html>

main.js，

require.config({
    baseUrl: 'js',

    paths: {
        jquery: 'lib/jquery/jquery-min',
        angular:'lib/angular/angular.min',
        angularrouter:'lib/angular/angular-route'
    },

     shim: {
        jquery: {
          exports: '$'
        },
        angular: {
          exports: 'angular'
        },
        angularrouter: {
          deps:["angular"],
          exports: 'angularrouter'
        }
      }
});

require([
    'app',
    'angularrouter'
], function(App){

});

app.js，

define([
    'angular'
], function(angular){

    var app = angular.module('MyTutorialApp',['ngRoute']);

    app.config(function($routeProvider){

        $routeProvider
        .when("/",
        {
            templateUrl: "template/index.html",
            controller: "MainController"
        })
        .when("/list1",
        {
            templateUrl: "template/app.html",
            controller: "AppCtrl"
        })
        .when("/list2",
        {
            templateUrl: "template/app.html",
            controller: "AppCtrl2"
        })
        .when("/:module/:method/",
        {
            templateUrl: "template/app.html",
            controller: "AppCtrl2"
        });
    });

    app.controller("AppCtrl", function($scope, $route){
        //console.log($route);
        $scope.model = {
          message: "This is my app!!!"
        };
    });

    app.controller("AppCtrl2", function($scope, $route){
        console.log($route.current.params.module);
        console.log($route.current.params.method);
        //console.log($param);
        $scope.model = {
          message: "Hellw world! This is my app!!!"
        };
    });

    app.controller("MainController", function($scope){

        //$scope.thisIsAScopeProperty = 'template/index.html';

        $scope.people = [
            {
                id: 0,
                name: 'Leon',
                music: [
                    'Rock',
                    'Metal',
                    'Dubstep',
                    'Electro'
                ],
                live: true
            },
            {
                id: 1,
                name: 'Chris',
                music: [
                    'Indie',
                    'Drumstep',
                    'Dubstep',
                    'Electro'
                ],
                live: true
            },
            {
                id: 2,
                name: 'Harry',
                music: [
                    'Rock',
                    'Metal',
                    'Thrash Metal',
                    'Heavy Metal'
                ],
                live: false
            },
            {
                id: 3,
                name: 'Allyce',
                music: [
                    'Pop',
                    'RnB',
                    'Hip Hop'
                ],
                live: true
            }
        ];
        $scope.newPerson = null;
        $scope.addNew = function() {
            //alert(1);
            console.log($scope.newPerson);
            if ($scope.newPerson !== null && $scope.newPerson !== "") {
                //alert(2);
                $scope.people.push({
                    id: $scope.people.length,
                    name: $scope.newPerson,
                    live: true,
                    music: [
                        'Pop',
                        'RnB',
                        'Hip Hop'
                    ]
                });
            }
        };
    });

    return app;
});

错误，

错误：[$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=MyTutorialApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.6%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3D %255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.6%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250As%252F%253C%2540%252F%2540%253A%2Ftest %252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A6%250ATc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%2 %252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A20%250ATc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost %252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A20%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252F23.55 %252Fjs%252Flib%252Fangular%252Fangular.min.js%253A29%250Aq%2540http%253A%252F%252Flocalhost%252Ftest% 252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A7%250Ae%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252FAngular%252F2Flib%252Fangular%252F2Flib%3% 252Fangular%252Fangular.min.js%253A29%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%2 250Aq%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A7%250Ae%2540http%253A%2252F%252F201%23 252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A29%250AYb%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252FangularFjs%2%2 252Fangular.min.js%253A32%250AXb%252Fc%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A17%250AXb% 253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangu lar%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A18%250ARc%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Fangular252Fangular2%. min.js%253A17%250A%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A200%250Aa%225%F%253A%2 252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A129%250A%0As%2F%3C%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs% 2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A6%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib% 2Fangular%2Fangular.min.js%3A29%0Aq%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A7%0Ae%40http% 3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A29%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Ftest%2F2013% 2Fjs%2Fangular%2F2.3%2Fjs%2Fli b%2Fangular%2Fangular.min.js%3A29%0Aq%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A7%0Ae% 40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A29%0AYb%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs% 2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A32%0AXb%2Fc%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular% 2Fangular.min.js%3A17%0AXb%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A18%0ARc%40http%3A% 2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A17%0A%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2。 3%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A200%0Aa%40http%3A%2F%2Flocalhost%2Ftest%2F2013%2Fjs%2Fangular%2F2.3%2Fjs%2Flib%2Fangular%2Fangular.min.js% 3A129%0A

...c-1)+"="+encodeURIComponent("function"==typeof arguments[c]?arguments[c].toStrin...

我正在使用 AngularJS v1.2.6。

我应该添加或更改什么以便 Angular 应用程序可以在要求下运行？

【问题讨论】：

标签： javascript angularjs requirejs

【解决方案1】：

首先需要 Angular 加载器，然后需要所有其他 Angular 文件和您的文件。

然后从 DOM 中删除 ng-app="yourApp"。加载完 requirejs 的所有模块后，使用 angular.bootstrap 来初始化你的应用。

【讨论】：

【解决方案2】：

尝试手动初始化 angularjs 应用：

例如angular.bootstrap(obj.rootElement.find('html'), ['payment']);

【讨论】：

谢谢。您可以建议任何可行的示例吗？我在网上找不到任何好的...

【解决方案3】：

如果你去 github 搜索 angular require seed 或 angular require bootstrap seed，你会发现很多例子

这是我发现的最简单的一个，它有足够的代码让我开始。 https://github.com/Matthew-Odette/angular-require-bootstrap-seed

【讨论】：