Inserire app, controller e servizi in file separati

Question

Sto provando a spostare il codice angolare in file separati prima che il progetto cresca troppo.

Ho provato a spostare lo app, controllers e in file separati ma gli errori hanno fermato i punti di riferimento nel codice (o erano troppo generici).

Ho deciso di inserire il contenuto del file sul grande tag <script> in modo che possa risolvere gli errori e farlo funzionare. Purtroppo mi sono imbattuto this(Impossibile creare un'istanza del modulo protonApp a causa di ...) e non so come monitorare il problema verso il basso (Sono nuovo di angolare)

Il

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

Ho arrotondato il codice perché la (piccola) ricerca che ho fatto dice che dovresti avere il tuo codice tra questi quando sono in file separati.

(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

Ulteriori scavo rivela Non riesco ad accedere $rootScope o $scope all'interno di qualsiasi dei miei file del controller

Answer 1

Nella vostra iniezione modulo che non c'è bisogno di aggiungere $ portata e $ http :

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

Inietti questi nel controller ma non nel modulo dichiarati su

Answer 2

1. Non avete bisogno di iniettare qualsiasi cosa pur dichiarando un modulo, li potrebbe usare in voi controllore come già detto @ThibauDL

2. Io di solito preferisco dichiarare i moduli appena sopra la dichiarazione di applicazione angolare.

ho modificato il tuo codice in plnkr che dovrebbe dare un'idea di come il codice deve essere organizzato.

(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>

Inoltre si potrebbe ora metterli in file separati, come si voleva.

Spero che questo aiuti.