別々のファイルに分割するとき、私のコントローラを見つけることができません:私はまだ別々のファイルに私のコントローラを分割することはできませんよしかし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')
:あなたが別々のファイルでコントローラを宣言する場合
あなたは5秒で私を打ちました。angular.module関数は、モジュールを定義するときはセッター([])、モジュール定義を参照するときはゲッター([]なし)にすることができます。 – slackmart