In my angularjs application using the codeigniter PHP framework, I have implemented 3 modules - cars.js for car details, cellphones.js for cellphone details, and home.js for home details. Each module caters to a different client's needs.
I am trying to compare the total estimation price of selected items but have not been successful with angularjs $cookies so far. Here is an overview of what I am trying to achieve:
To simplify, I will explain by adding a basic controller to each app with some sample data. Each JSON array contains prices and includes a checkbox to add items to the estimate. When a user checks the box, the item should be added to the estimated list, and the total amount should adjust accordingly. This example aims to demonstrate how to integrate multiple angularjs apps and retain added items.
Here is a snippet of the Javascript code:
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"}];
});
The problem arises when dealing with different views:
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>
My main issues are:
1: Unsure about writing a combined function to push selected items and which controller to use?
2: Even if I add from the home controller, when transitioning to car.html, the page refreshes due to being different modules. How can cookies and sessions be utilized here?