Umieszczanie aplikacji, kontrolerów i usług w oddzielnych plikach

Question

Próbuję przenieść kod kątowy do osobnych plików, zanim projekt stanie się zbyt duży.

Próbowałem przenieść app, controllers i services do oddzielnych plików, ale błędy przestały wskazywać punkty w kodzie (lub były zbyt ogólne).

Postanowiłem umieścić zawartość pliku na dużej etykiecie <script>, aby móc pracować z błędami i sprawić, aby działało. Niestety mam natknąć this(Failed instancji modułu protonApp powodu ...) i nie wiem, jak śledzić problem w dół (jestem nowy kątowy)

(function() { 
    'use strict'; 
    ... 
}()); 

Mam cały kod, ponieważ (małe) badania, które zrobiłem mówi, że powinieneś mieć swój kod między tymi, gdy są w oddzielnych plikach.

(function() { 
    'use strict'; 
    var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']); 

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
     ... 
    }]); 

    app.value('debug',true); 

    app.run(function($rootScope,$state,$http,debug,LeftMenuService) { 
     ... 
    }); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppServices', ['$rootScope','$http']); 
}()); 

(function() { 
    'use strict'; 
    angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){ 
     ... 
    }]); 
}()); 

(function() { 
    angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){ 
     ... 
    }]); 
}()); 

(function() { 
    'use strict'; 
    angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){ 
     ... 
    }]); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){ 
     ... 
    }); 
}()); 

EDIT

Dalsze kopania odsłania Nie mogę uzyskać dostępu $rootScope lub $scope wewnątrz każdego z moich plików sterownika

Answer 1

W wstrzyknięciu modułu nie trzeba dodać $ i $ http zakresu :

angular.module('protonAppServices', []); 

Wstrzyknij je w kontrolerze, ale nie w module deklarati na

Answer 2

1. Nie trzeba wstrzyknąć niczego podczas deklarowania modułu, można ich używać w was sterownika jak wspomniano @ThibauDL

2. I zazwyczaj wolą deklarowania modułów tuż nad kątowej deklaracji aplikacji.

zmodyfikowałem swój kod w plnkr które powinny dać wyobrażenie, jak kod musi być zorganizowane.

(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers', []); 
 
    angular.module('protonAppServices', []); 
 

 
    var app = angular.module('protonApp', ['ui.router', 'protonAppControllers', 'protonAppServices']); 
 

 
    app.config(['$stateProvider', '$urlRouterProvider', 
 
    function($stateProvider, $urlRouterProvider) { 
 
     //... 
 
    } 
 
    ]); 
 

 
    app.value('debug', true); 
 

 
    app.run(function($rootScope, $state, $http, debug, LeftMenuService) { 
 
    //... 
 
    }); 
 
}()); 
 

 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppServices').service('LeftMenuService', function($http, $rootScope) { 
 
    //... 
 
    }); 
 
}()); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers').controller('loginController', ['$scope', '$http', '$state', 
 
    function($scope, $http, $state) { 
 
     $scope.login = "Hi Please login!"; 
 
     // ... 
 
    } 
 
    ]); 
 
}()); 
 

 
(function() { 
 
    angular.module('protonAppControllers').controller('surveyListController', ['$scope', '$http', 'LeftMenuService', 
 
    function($scope, $http, LeftMenuService) { 
 
     //... 
 
    } 
 
    ]); 
 
}()); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers').controller('surveyHelpController', ['$scope', '$http', 'LeftMenuService', 
 
    function($scope, $http, LeftMenuService) { 
 
     $scope.test = "Hxxxxi"; 
 
     //... 
 
    } 
 
    ]); 
 
}());

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app="protonApp"> 
 
    <div ng-controller="loginController"> 
 
    <input type="text" ng-model='login' /> 
 
    </div> 
 
</body>

Również można teraz umieścić je w oddzielnych plikach, jak chciałeś.

Nadzieję, że pomaga.