如何组合angularjs模块

Question

我有一个带codeigniter（PHP框架）的angularjs应用程序，我有3个模块，每个模块用于每个客户端。所以我创建了cars.js用于汽车细节，cellphones.js用于手机细节，home.js用于家庭细节。这3个js彼此不同。

我只是想比较一下所选商品的总估价。我尝试过angularjs$cookies，但对我不起作用。下面是我的代码。

为了便于理解，我将为每个应用程序添加一个简单的基本控制器，并添加一些行数据。每个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>

我想要的是，每当用户点击添加来估计点击项目的价格时，点击的项目应该被添加到总数组中，并且在从car.html到cellphone.html或home.html的过程中选择的项目应该保持不变。我的主要问题是

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

2：第二个问题是，即使我在移动到car.html页面时从主控制器添加，也会刷新，因为这些是不同的模块，所以如何使用cookie和会话？

Answer 1

1. 使用工厂在多个控制器之间持久化和共享数据

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

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

main.js

// 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"}];
});

index.html

<html ng-app="MainApp">
  <head>...</head>
  <body>
    <!-- this is where the views (home/cell/car.html) will populate -->
    <div ng-view></div>
  </body>
</html>

更新

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