javascript - 如何组合angularjs模块？

Question

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

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

为了使其非常容易理解，我将向每个应用程序添加一个简单的基本 Controller 以及一些行数据。每个 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:我不知道如何编写组合函数来推送所选项目以及在哪个 Controller 中？

2:其次，即使我每次移动到 car.html 页面都会刷新时从家庭 Controller 添加，因为这些是不同的模块，那么如何为此使用 cookie 和 session ？

Answer 1

1. 使用工厂在多个 Controller 之间保存和共享数据

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

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

ma​​in.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 。它使用本地/ session 存储而不是cookie，但这可能是一个优点。我认为这些条目是按模块名称命名的，因此您可能需要一些额外的配置或模块重命名，但它应该允许您的数据在整个页面更改后仍然存在