Question

我刚刚开始使用angular.js，我已经为我的应用程序的单独模块创建了单独的角度应用程序（使用ng-app），以便模块化，以便在一个模块中进行更改不会导致整个应用程序崩溃。

现在，我遇到了从所有模块中常见的搜索表单重定向到特定页面（在特定模块中）的问题。我想在$ rootScope中保存这个值，但是在调试时，我发现$ rootScope是每个ng-app，因此，它不起作用。

我将应用程序设计到单独的角度应用程序中是错误的，我应该将所有内容都移回一个ng-app吗？或者我的应用程序结构是否正确，我应该寻找另一种传递价值的方式？

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

我的申请结构如下：

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

module2
- same structure

到目前为止，我实际上是使用服务模块对服务器进行REST调用，而不是共享数据。

所有模块都在app.js中定义了各自的依赖项：

angular.module('Module1App', ['Module1App.controller','Module1App.service']);
angular.module('Module2App', ['Module2App.controller','Module2App.service']);

每个模块的控制器和服务在各自的controllers-module.js和service-module.js中定义，它们按照上述结构驻留在不同的目录中。

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

<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-controllers（按照上面的模块结构在不同的目录中定义）移动到一个ng-app（上面的app.js）中，我基本上最终会包含所有的controller.js和所有html视图中的service.js，这基本上意味着如果任何一个js文件中出现错误，我的整个应用程序将会关闭（我已经尝试过了）。

所以，除非我误解了某些内容，否则我无法在一个app.js下移动所有ng-controller。我将尝试使用共享服务来共享数据。如果有人对我的结论有什么话要说，请告诉我。

Answer 1

我不认为使用许多ng-app是一种很好的方法。我建议你在单独的文件中使用许多ng-controller。

您可以将变量保留在对象中，而不是使用$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
'first Value is acessible only in MyFirstController'

MyFirstController.firstProperty保留原始价值，因为它没有共享。

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

看看this article，你可能会这样理解。

Answer 2

您应该使用多个控制器，然后使用服务之间共享的公共服务。角度服务是单例，因此它们可以一次又一次地共享，并且如果您将共享功能作为另一个应用程序注入，将在所有应用程序之间共同使用。

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){.....}]);

更重要的是，如果它不仅仅是存储值，它还可以注入功能以进行更好的测试！

angular.js模块化 - 多个ng-apps？

2 个答案: