Javascript 如何组合angularjs模块？

我有一个带有CodeIgniteRhp框架的angularjs应用程序，我有3个模块，每个模块对应于每个客户端。因此，我创建了cars.js用于汽车详细信息，cellphones.js用于手机详细信息，home.js用于家庭详细信息。这3个js彼此不同

我只想比较所选项目的总估算价格。我尝试了angularjs$饼干，但对我无效。这里我有我的代码如下

为了便于理解，我将为每个应用程序添加一个简单的基本控制器，其中包含一些行数据。每个JSON数组都有价格，我正在添加一个复选框添加到估算中，每当用户单击它时，它都应该添加到估算列表中，并且总金额应该相应地更改。因此，这是我展示的基本示例，目的是了解如何组合angularjs应用程序以及如何保留添加的项目

这是我的js代码

home.js
var app1 = angular.module("HomeApp",['uiSlider','ui.bootstrap']);
app1.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.homerating=[{"home_info_id":"94","avg":"3","price":"4900"},
                   {"home_info_id":"119","avg":"4","price":"200"},
                   {"home_info_id":"95","avg":"4.5","price":"500"}];
});

cellphone.js1
var app2 = angular.module("CellphoneApp",['uiSlider','ui.bootstrap']);
app2.controller('CellphoneCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.cellphonerating=[{"cellphone_info_id":"94","avg":"3.333","price":"4900"},
{"cellphone_info_id":"119","avg":"4","price":"4500"},
{"cellphone_info_id":"95","avg":"4.5","price":"5060"}];
});

car.js
var app3 = angular.module("carApp",['uiSlider','ui.bootstrap']);
app2.controller('carCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.carrating=[{"car_info_id":"94","avg":"3.333","price":"8900"},
{"car_info_id":"119","avg":"4","price":"900"},
{"car_info_id":"95","avg":"4.5","price":"2160"}];
});

对于这一点，我有不同的看法，问题就从这里开始了

home.html
<div ng-app="HomeApp">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="h in homerating">
        <div class="panel-body" >
            <h2>{{h.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="home.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>
cellphone.html
<div ng-app="CellphoneApp">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="c in cellphonerating">
        <div class="panel-body" >
            <h2>{{c.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="cellphone.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>
car.html
<div ng-app="carrating">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="c in carrating">
        <div class="panel-body" >
            <h2>{{c.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="car.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>

我想要的是，每当用户点击add来估算点击项目的价格时，应该将其添加到total数组中，并且在从car.html到mobile.html或home.html的过程中，应该保留选中的项目。我的主要问题是

1：我不知道如何编写组合函数来推送所选项目，以及在哪个控制器中

2：第二个问题是，当我移动到car.html页面时，即使我从home controller添加，页面也会得到刷新，因为这些是不同的模块，所以如何使用cookies和会话来实现这一点

使用工厂在多个控制器之间保存和共享数据

使用与单独的页面。Angular是一个SPA单页应用程序框架，home.html mobile.html car.html应该都是同一模块中的路由模板，而不是独立的应用程序

虽然您可以将子模块作为依赖项附加到主模块中，但为了简单起见，请尝试将所有角度模块合并到单个模块中：

main.js

index.html

更新

---

根据你的评论，也许可以调查一下。它使用本地/会话存储而不是cookie，但这可能是一个优势。我认为条目是按模块名称命名的，因此您可能需要一些额外的配置或模块重命名，但它应该允许您的数据在整个页面更改后仍然有效

我已经看到了sagar如果您理解这一点，请用我的上述示例告诉我。我想把每个项目都添加到估算列表中，请阅读我的问题，看看你们是否能解决。顺便说一句，我尝试了stackoverflow上的所有问题，到目前为止没有运气你好，谢谢你的回复，但你没有理解我的问题，我给出了上述示例，这并不意味着我的应用程序很小，我在每个模块中都有很多工作要做，我不能在单个模块中组合或编写它们。顺便说一下，我知道路由的使用每个模块都有9到8条路由，所以你想让我在单个页面中添加每个路由和每个控制器吗？？那太危险了。请让我知道如何组合角度模块以我给出的上述示例为例，我需要计算估计价格。我需要保留添加在估计列表中的项目，就像购物车一样。很抱歉，请不要提供此类答案，这样其他人会认为你已经回答了这个问题。我告诉你你仍然不明白我的问题，请仔细阅读。1：我有3个模块不能组合到main.js中。2：我需要使用JSFIDLE来估算检查项目的价格，就像购物车一样。

// app module
var app = angular.module("MainApp",['uiSlider','ui.bootstrap', 'ngRoute']);

// routes
app.config(function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  })
  .when('/cellphone', {
    templateUrl: 'cellphone.html',
    controller: 'CellphoneCtrl'
  })
  .when('/car', {
    templateUrl: 'car.html',
    controller: 'carCtrl'
  })
  .otherwise({redirectTo: '/home'});
});

// home controller
app.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.homerating=[{"home_info_id":"94","avg":"3","price":"4900"},
                   {"home_info_id":"119","avg":"4","price":"200"},
                   {"home_info_id":"95","avg":"4.5","price":"500"}];
});

// cell phone controller
app.controller('CellphoneCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.cellphonerating=[{"cellphone_info_id":"94","avg":"3.333","price":"4900"},
{"cellphone_info_id":"119","avg":"4","price":"4500"},
{"cellphone_info_id":"95","avg":"4.5","price":"5060"}];
});

// car controller
app.controller('carCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.carrating=[{"car_info_id":"94","avg":"3.333","price":"8900"},
{"car_info_id":"119","avg":"4","price":"900"},
{"car_info_id":"95","avg":"4.5","price":"2160"}];
});

<html ng-app="MainApp">
  <head>...</head>
  <body>

    <!-- this is where the views (home/cell/car.html) will populate -->
    <div ng-view></div>

  </body>
</html>