How to load angularjs in requirejs?

3
votes

My angular test codes work fine with angular alone. But I get errors when I want to use requirejs to load angular's code/ app.

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

error,

Error: [$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%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A6%250ATc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A20%250ATc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A20%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%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%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A29%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%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%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A29%250AYb%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A32%250AXb%252Fc%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A17%250AXb%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A18%250ARc%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A17%250A%2540http%253A%252F%252Flocalhost%252Ftest%252F2013%252Fjs%252Fangular%252F2.3%252Fjs%252Flib%252Fangular%252Fangular.min.js%253A200%250Aa%2540http%253A%252F%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%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%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...

I am on AngularJS v1.2.6.

What should I add or change so that angular app can work under require?

3
javascriptangularjsrequirejs

3 Answers

3
votes

Require angular loader first, then require all other angular files and your file.

Then remove ng-app="yourApp" form your DOM. After all modules of requirejs are loaded, use angular.bootstrap to init your app.

0
votes

try to init angularjs app manually:

e.g. angular.bootstrap(obj.rootElement.find('html'), ['payment']);

0
votes

if you go to github and search for angular require seed or angular require bootstrap seed you'll find a number of examples

this one I've found the simplest to follow, it has just enough code to get me started. https://github.com/Matthew-Odette/angular-require-bootstrap-seed