Combining angular with require

Question

I went through this tutorial. Now I am attempting incorporate require

I found this explanation.

I am currently getting an error

Object #<Object> has no method 'unshift'

Here is the code that is causing the error

require(['jquery', 'angular', 'app/routes/app'], function ($, angular, mainRoutes) {
    //tried this way as well
    //$(function () { // using jQuery because it will run this even if DOM load already happened
    //   angular.bootstrap(document, ['mainApp']);
    //});
    require(['Scripts/app/modules/mainApp.js'], function (mainApp) {
         angular.bootstrap(document.body, [mainApp]);//based of orginal answer
    })
});

my app.js file

define(['app/modules/mainApp', 'app/controller/controllers'], function (mainApp) {
  return mainApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'Templates/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'Templates/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
   }]);
});

and my mainApp.js file

define(['angular', 'angular-resource'], function (angular) {
    return angular.module('mainApp', ['ngResource']);
});

there are other files that I didnt show (controllers, services) but I dont think the problem lies their

UPDATE

I am now getting an error of undefined injector.

This is the only break point that gets hit, but the item is not undefined. enter image description here

UPDATE 2

I updated my project to more resemble this

my main.js now is this

require.config({
  baseUrl: '/Scripts/',
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    'jquery': 'lib/require-jquery',
    'angular': 'lib/angular/angular.min',
    'angular-resource': 'lib/angular/angular-resource.min',
  },
  shim: {
     'angular': { 'exports': 'angular' },
     'angular-resource': { deps: ['angular'] },
     'jQuery': { 'exports': 'jQuery' },
  },
  priority: [
     'angular'
  ]

});

 require(['angular', 'app/modules/app', 'app/routes/routes'], function (angular, app, routes) {
       var $html = angular.element(document.getElementsByTagName('html')[0]);
       angular.element().ready(function () { //breakpoint here
           $html.addClass('ng-app');
           angular.bootstrap($html, [app.name]);
       });
    });

if i put a break point on angular element and run a test in console

(app == routes)
 true

should app be equal to routes?

Jonathan de M. · Accepted Answer · 2013-11-21 00:00:46Z

6

The second argument of bootstrap method should be an array, I made the change on the code below.

require(['jquery', 'angular', 'app/routes/app'], function ($, angular, mainRoutes) {
    //tried this way as well
    //$(function () { // using jQuery because it will run this even if DOM load already happened
    //   angular.bootstrap(document, ['mainApp']);
    //});
    require(['Scripts/app/modules/mainApp.js'], function (mainApp) {
         angular.bootstrap(document.body, [mainApp]);
    })
});

edited Nov 21, 2013 at 0:00

answered Nov 20, 2013 at 23:52

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dan_vitch Over a year ago

that took fixed original error but now I am getting a new error.

dan_vitch Over a year ago

I think angular.bootstrap(document.body, [mainApp]); is executed too soon

Jonathan de M. Over a year ago

check these files github.com/roine/angularJS-requirejs-grunt-h5bp/tree/master/app/…, especially app and main

Collectives™ on Stack Overflow

Combining angular with require

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related