如何组合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

使用工厂在多个控制器之间持久化和共享数据
使用 routes 与单个页面。 Angular 是一个 SPA（单页应用程序）框架，home.html cellphone.html car.html 应该都是同一个模块中的路由模板，而不是独立的应用程序。

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

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>

更新

根据您的评论，也许可以查看 angular locker。它使用 local/session 存储与 cookie，但这可能是一个优点。我认为这些条目是按模块名称命名的，因此您可能需要一些额外的配置或模块重命名，但它应该允许您的数据在整个页面更改后仍然存在

如何组合angularjs个模块？

How to combine angularjs modules?

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat