2014-09-22 133 views
0

我是AngularJS的noob,我想用Angular和RequireJS啓動一個應用程序。 我讀過很多關於它的東西,但不是我正在尋找的東西。AngularJS + RequireJS啓動

我用Yeoman和generator-angular-require啓動了一個應用程序。 問題是我要組織我的應用程序是這樣的:

app 
|__ scripts 
    |__ controllers 
     |__ index.controller.js 
     |__ user.controller.js 
     |__ include.js 
     |__ ... 
    |__ directives 
    |__ services 
    |__ templates 
     |__ index.template.html 
     |__ user.template.html 
     |__ ... 
    |__ init.js 
    |__ app.js 

Init.js(需要配置)

require.config 
({ 
    baseUrl: 'scripts', 
    paths: 
    { 
     'angular' : '../bower_components/angular/angular.min', 
     'angular-route' : '../bower_components/angular-route/angular-route.min', 
     'angular-cookies' : '../bower_components/angular-cookies/angular-cookies.min', 
     'angular-sanitize' : '../bower_components/angular-sanitize/angular-sanitize.min', 
     'angular-resource' : '../bower_components/angular-resource/angular-resource.min', 
     'angular-animate' : '../bower_components/angular-animate/angular-animate.min', 
     'angular-touch' : '../bower_components/angular-touch/angular-touch.min', 

     'foundation' : '../bower_components/foundation/js/foundation.min', 
     'angular-foundation' : '../bower_components/angular-foundation/mm-foundation.min' 
    }, 
    shim: 
    { 
     'angular' : 
     { 
      'exports' : 'angular' 
     }, 
     'angular-route': 
     [ 
      'angular' 
     ], 
     'angular-cookies': 
     [ 
      'angular' 
     ], 
     'angular-sanitize': 
     [ 
      'angular' 
     ], 
     'angular-resource': 
     [ 
      'angular' 
     ], 
     'angular-animate': 
     [ 
      'angular' 
     ], 
     'angular-touch': 
     [ 
      'angular' 
     ], 
     'angular-mocks': 
     { 
      deps:['angular'], 
      'exports':'angular.mock' 
     } 
    }, 
    priority: 
    [ 
     'angular' 
    ] 
}); 

window.name = 'NG_DEFER_BOOTSTRAP!'; 

require(['app'], function(app) 
{ 
    'use strict'; 

    app.init(); 
}); 

app.js

define(function(require) 
{ 
    'use strict'; 

    var angular = require('angular'); 
    var services = require('./services/include'); 
    var controllers = require('./controllers/include'); 
    var directives = require('./directives/include'); 

    var app = angular.module('MyApp', ['services', 'controllers', 'directives']); 

    app.init = function() 
    { 
     angular.bootstrap(document, ['MyApp']); 
    }; 

    app.config 
    ([ 
     '$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) 
     { 
      $httpProvider.responseInterceptors.push('httpInterceptor'); 

      $routeProvider 
       .when('/', { templateUrl: 'templates/index.template', controller: 'IndexCtrl' }) 
       .otherwise({ redirectTo: '/' }); 

      $locationProvider.html5Mode(true); 
     } 
    ]); 

    app.run(function($window) 
    { 

    }); 

    return app; 
}); 

這接縫沒問題。但是,我不知道如何定義我的控制器以及如何放入我的controllers/include.js文件。

我已經嘗試了很多東西,如定義一個模塊,並把所有的控制器,但沒有任何工作。

控制器/ include.js

define 
([ 
    'angular', 

    'controllers/index.controller', 
    'controllers/user.controller' 
], function(angular) 
{ 
    return angular.module('MyApp.Controllers', []); 
}); 

控制器/ index.controller.js

define(['angular'], function(angular) 
{ 
    'use strict'; 

    angular.module('MyApp.Controllers').controller('IndexCtrl', function($scope) 
    { 

    }); 
}); 

每次我嘗試新的東西,我已經得到了同樣的錯誤:

未被捕獲的錯誤:[$ injector:nomod] http://errors.angularjs.org/1.2.25/ $ injector/nomod?p0 = MyApp

我現在是關於一個模塊不存在的東西。我很確定這是關於我的MyApp.Controllers模塊。但我不知道該怎麼做我的代碼纔是正確的。

有人有想法嗎?我真的迷失了那兩個文件。我不知道如何將所有控制器定義在單獨的文件中,並將它們包含在一個文件中。

感謝您的幫助。

回答