Geek Answers Handbook

Placing applications, controllers, and services in separate files

I am trying to move angular code into separate files before the project gets too big.

I tried moving the app , controllers and services to separate files, but the errors stopped referring to points in the code (or they were too general).

I decided to put the contents of the file on a large <script> tag so that I could work with errors and make it work. Unfortunately, I came across this (Failed to instantiate protonApp module due to ...) and don’t know how to track the problem (I'm new to angular)

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

I have code because the (small) research I did says that you should have code between them when they are in separate files.

 (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

Further digging shows that I cannot access $rootScope or $scope in any of my controller files

+6
source share
2 answers

In your module injection you do not need to add $ scope and $ http:

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

Insert them into the controller, but not in the module declaration

+3
source

  • You do not need to enter anything when declaring the module, you can use them in your controller, as indicated by @ThibauDL

  • I usually prefer to declare modules just above the angular application declaration.

I changed your code in plnkr , which should give you an idea of ​​how the code should be organized.

 (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.imtqy.com/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>

You can also place them in separate files as you wish.

Hope this helps.

+1
source

More articles:


All Articles