2016-03-21 11 views
1

別々のファイルに分割するとき、私のコントローラを見つけることができません:私はまだ別々のファイルに私のコントローラを分割することはできませんよしかしHow to create separate AngularJS controller files?角度は、私がここに同様の質問に対して答えを投稿次られた

。私は、残りの部分から1つのコントローラをそれ自身のファイルに分割することから始めましたが、コントローラのどれもがロードされていません。

私のjsファイルは、index.htmlファイルの適切な順序でロードされており、app.jsがコントローラファイルの前に来ています。

<script src="libraries/jquery/1.11.3/jquery-1.11.3.min.js"></script> 
    <script src="libraries/angular/1.4.8/angular.min.js"></script> 
    <script src="libraries/angular-ui-router/0.2.14/angular-ui-router.min.js"></script> 
    <script src="libraries/angular-scroll/angular-scroll.min.js"></script> 
    <script src="libraries/uiboostrap/0.14.3/ui-bootstrap-tpls-0.14.3.min.js"></script> 
    <script src="libraries/dirPagination/dirPagination.js"></script> 
    <script src="libraries/angular-loading-bar/loading-bar.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/app.services.js"></script> 
    <script src="js/app.controllers.js"></script> 
    <script src="partials/events/StageBarCtrl.js"></script> 

マイapp.jsファイル:

angular.module('myWebApp.controllers',[]). 
    controller('TopNavCtrl', function ($scope, $location) { 

    }). 

    controller('scrollCtrl', function($scope, $document) { 

    }). 

    controller('AdminTableCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('EditDivisionsCtrl', function ($scope, coreAPIservice) { 

    }). 


    controller('EditDepartmentsCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('EditTeamsCtrl', function ($scope, coreAPIservice) { 

    }). 

    controller('HomePageCtrl', function ($scope, $location, $http) { 

    }). 

    controller('EventCtrl', function ($scope, $window, $location, $http, coreAPIservice) { 

    }). 

    controller('UserProfilesCtrl', function ($scope, $location, $http, coreAPIservice) { 

    }). 

    controller('TeamProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('DepartmentProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('DivisionProfilesCtrl', function ($scope, $location, $http) { 

    }). 

    controller('NotFoundCtrl', function ($scope, $location, $http) { 

    }); 

私は分離コントローラ:

var app = angular.module('myWebApp', [ 
    'myWebApp.services', 
    'myWebApp.controllers', 
    'ui.router', 
    'duScroll', 
    'ui.bootstrap', 
    'angularUtils.directives.dirPagination', 
    'angular-loading-bar' 
]); 

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/404'); 

    $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: 'partials/home.html', 
      controller: 'HomePageCtrl' 
     }) 
     .state('event', { 
      url: '#/events/event', 
      views: { 
       '': { 
        templateUrl: 'partials/events/event.html', 
        controller: 'EventCtrl' 
       }, 
       '[email protected]' : { 
        templateUrl: 'partials/events/stage-bar.html', 
        controller: 'StageBarCtrl' 
       } 
      } 
     }) 
     .state('userProfiles', { 
      url: '/admin/users', 
      templateUrl: 'partials/admin/user-profiles.html', 
      controller: 'UserProfilesCtrl' 
     }) 
     .state('editTeams', { 
      url: '/admin/teams', 
      templateUrl: 'partials/admin/edit-teams.html', 
      controller: 'TeamProfilesCtrl' 
     }) 
     .state('editDepartments', { 
      url: '/admin/departments', 
      templateUrl: 'partials/admin/edit-departments.html', 
      controller: 'DepartmentProfilesCtrl' 
     }) 
     .state('editDivisions', { 
      url: '/admin/divisions', 
      templateUrl: 'partials/admin/edit-divisions.html', 
      controller: 'DivisionProfilesCtrl' 
     }); 
}]); 

私のメインコントローラファイルapp.controllers.jsは、この(簡潔にするために省略さ内容)のように見えますそれ自体のファイルには次のようになります:

angular.module('myWebApp.controllers', []). 
    controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) { 

    }); 

私が得るエラーは次のとおりです: "引数 'TopNavCtrl'は関数ではありません。未定義です。"は、index.htmlで最初に検出されたコントローラです。二番目のパラメータ(ゲッター)として[]なし

angular.module('myWebApp.controllers'). 
controller('StageBarCtrl', function($scope, $window, $location, $http, eventFactory) { 
    // ... 
}); 

注意、angular.module('myWebApp.controllers'):あなたが別々のファイルでコントローラを宣言する場合

答えて

3

あなたはこの表記を使用する必要があります。以前に登録されたモジュールmyWebApp.controllersを検索することを意味します。ただし、angular.module('myWebApp.controllers', [])(セッター)は、「新規モジュールの作成myWebApp.controllers」を意味し、以前に登録されたものはすべて上書きされます。

+0

あなたは5秒で私を打ちました。angular.module関数は、モジュールを定義するときはセッター([])、モジュール定義を参照するときはゲッター([]なし)にすることができます。 – slackmart

1

あなたは非常に近いです。

分離されたコントローラファイルでは、2回目の引数として「[]」を追加するたびに、親myWebApp.controllersモジュールを上書きします。これにより、最後に分離されたコントローラーのみが注入されます。したがって、あなたのケースで"Argument 'TopNavCtrl' is not a function, got undefined"エラー

あなたがセッターを使用する必要があります...

angular.module一度だけapp.controllers.jsで( 'myWebApp.controllers'、[])

、 。そしてゲッター...

angular.module( 'myWebApp.controllers')分離した各コントローラの

関連する問題