Javascript angular.js模块化-多个ng应用程序？

我刚刚开始在angular.js中工作，为了模块化，我为我的应用程序的各个模块创建了单独的angular应用程序（使用ng app），这样一个模块中的更改不会影响整个应用程序

var app = angular.module('firstApp');
app.service('myService', function(){
   var self = this;
   return{
       getValue: function(){return self.value},
       setValue: function(value){self.value=value}
   }
});
app.controller('firstController', ['myService', function(myService){.....}]);
app.controller('secondController', ['myService', function(myService){....});

var secondApp = angular.module('otherApp',['firstApp']);
secondApp.controller('otherController', ['myService', function(myService){.....}]);

现在，我遇到了一个问题：从所有模块中通用的搜索表单重定向到特定页面（在特定模块中）。我曾想过将该值保存在$rootScope中，但在调试时，我发现$rootScope是每个ng应用程序的值，因此，它无法工作

我将应用程序设计成单独的角度应用程序是错误的吗？我应该将所有内容移回一个ng应用程序吗？还是我的应用程序结构正确，我应该寻找另一种传递值的方法

编辑：-我想我之前没有提供足够的细节

我的应用程序结构如下：

module1
- controller\controller-module1.js
- service\service-module1.js
- css\module1.css
- view\ <multiple html files>

module2
- same structure

每个模块的控制器和服务在各自的控制器-module.js和服务-module.js中定义，根据上述结构，它们位于不同的目录中

因此，为了包含特定模块（比如模块1）的控制器和服务，我在该模块的视图中声明以下内容

<script src="/APP_GUI/modules/common/service/services-common.js"></script>
<script src="/APP_GUI/modules/reports/service/services-module1.js"></script>
<script src="/APP_GUI/modules/common/controller/controllers-common.js"></script>
<script src="/APP_GUI/modules/reports/controller/controllers-module1.js"></script>

因此，如果我必须将所有ng控制器（根据上面的模块结构在单独的目录中定义）移动到一个ng应用程序（上面的app.js），我将基本上在所有html视图中包含所有controller.js和service.js，这基本上意味着如果任何一个js文件中存在错误，我的整个应用程序都将关闭（我已经尝试过了）

因此，除非我误解了什么，否则我无法在单个app.js下移动所有ng控制器。 我将尝试使用共享服务共享数据。

---

如果有人对我的结论有什么要说的，请告诉我。

我不认为使用许多

ng应用程序是一个好方法。我建议您在单独的文件中使用多个ng控制器

您可以将变量保留在对象中，而不必使用
$scope
，这在大多数在线教程中都没有解释

例如：

/// Define the app
app = angular.module('MyApp',[]);  
///Add a cotroller  

app.controller('MyFirstController', ['$scope', function($scope){  

    /// using 'this' you can write local properties  
    this.firstLocalProperty = 'first Value is acessible only in MyFirstController';
    this.secondLocalProperty = 'second Value is acessible only in MyFirstController';  

    $scope.firstSharedAppProperty = 'This is Shared between all controllers in app';
}]);

app.controller('MySecondController', ['$scope', function($scope){  
  /// here you can use shared and local properties, you may access shared things in $scope  

    this.fistProperty = $scope.firstSharedAppProperty;  

}]);

你会看到的

> MySecondController.firstProperty
'This is Shared between all controllers in app'

但是

MyFirstController.firstProperty
保留其原始值，因为它不是共享的

基本上，您应该为不同的模板使用不同的控制器，而不是使用不同的模块。使用控制器，您可以在
$scope
变量中在它们之间共享项目。或者，您可以使用对象内部的
引用将变量保持为私有

查看一下，您可能会更好地理解这一点。
您应该使用多个控制器，然后使用服务之间共享的公共服务。angular中的服务是单例的，因此它们可以一次又一次地共享，并且在所有应用程序中都是通用的，包括在应用程序之间，如果您将共享功能作为另一个应用程序注入的话

var app = angular.module('firstApp');
app.service('myService', function(){
   var self = this;
   return{
       getValue: function(){return self.value},
       setValue: function(value){self.value=value}
   }
});
app.controller('firstController', ['myService', function(myService){.....}]);
app.controller('secondController', ['myService', function(myService){....});

var secondApp = angular.module('otherApp',['firstApp']);
secondApp.controller('otherController', ['myService', function(myService){.....}]);

更重要的是，如果它做的不仅仅是存储值，那么您可以为更好的测试注入功能
 @AlokSharma，我喜欢这个答案，但我认为在大多数情况下，通过将数据附加到范围来共享数据不是一个好主意。最好将数据存储在工厂/服务中，这样就只有“一个真实来源”。但是使用一个模块和多个控制器的原则是绝对正确的。@JoshBeam，我同意，但我的答案是基于最小努力原则，一旦使用Angular，我认为这是在Angular单位之间共享数据的最简单（也是最有力）的方法，在这里，从模块变为控制器。要在应用程序中共享代码和功能，官方的做法是利用服务。引用：“Angular服务是使用依赖注入（DI）连接在一起的可替代对象。你可以使用服务在你的应用程序中组织和共享代码。”@AndréClaudino-我在我的问题中添加了更多细节，以及为什么我无法实现你的建议的原因。你在应用程序中是如何做到这一点的？尽管官方的做法是利用服务，但在整个应用程序中共享代码和功能。引用：“Angular服务是使用依赖注入（DI）连接在一起的可替换对象。您可以使用服务在应用程序中组织和共享代码。”。下面我的回答中有一个例子，你甚至不能在一个页面上多次使用
ng app
，只有HTML中遇到的第一个
ng app
将被引导。但是，您可以手动引导多个应用程序，但它们都是各自的应用程序。因此，如果我没有为应用程序的每个模块定义ng应用程序，如何防止一个模块中的更改影响另一个模块？感谢您的回答@mikeswright，我会试试看。@AlokSharma如果您遇到困难或对如何优化结构有任何疑问，请随时提问。谢谢mikeswright49。到目前为止，我正在遵循问题中描述的结构，并使用sessionStorage.setItem（和sessionStorage.removeItem）在两个ng应用程序模块之间传递公共数据（因为当我从一个ng应用程序重定向到另一个ng应用程序时，$scope和$rootScope变量会发生变化。此外，由于页面被重新加载，因此，我无法使用任何javascript全局变量）。我会询问是否需要帮助。。。
var app = angular.module('firstApp');
app.service('myService', function(){
   var self = this;
   return{
       getValue: function(){return self.value},
       setValue: function(value){self.value=value}
   }
});
app.controller('firstController', ['myService', function(myService){.....}]);
app.controller('secondController', ['myService', function(myService){....});

var secondApp = angular.module('otherApp',['firstApp']);
secondApp.controller('otherController', ['myService', function(myService){.....}]);