结合角度与要求

时间:2013-11-20 23:49:59

标签: angularjs requirejs

我参加了this教程。现在我正在尝试合并require

我找到this解释。

我目前收到错误

Object #<Object> has no method 'unshift'

以下是导致错误的代码

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

我的app.js文件

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

和我的mainApp.js文件

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

还有其他文件我没有显示(控制器,服务),但我不认为问题在于他们

更新

我现在收到未定义注射器的错误。

这是唯一被击中的断点,但该项目未定义。 enter image description here

更新2

我将项目更新为更像this

我的main.js现在就是这个

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

如果我在角度元素上设置断点并在控制台中运行测试

(app == routes)
 true

app应该等于路线吗?

1 个答案:

答案 0 :(得分:6)

bootstrap方法的第二个参数应该是一个数组,我对下面的代码进行了更改。

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