Send data one page to another pager according to ID in Angular JS

Issue

I am using mobile angular js UI frame work. I am new in angular js and want to send data one page to another page with city id. If user click on city then data show according to city.

HOME PAGE:

HTML PAGE:

  <div class="jumbtron scrollable-content text-center bg-color">
   <div class="row">
      <div class="bgImage">  
        <div class="bannerCntnt">
           <div class="hp-text-bnnr" style="color:white"> WHERE DO YOU WANT DELIVERY? <br>CHOOSE CITY </div> <br>
              <div class="btn-group"  ng-controller="MyController"> 
                  <button ui-turn-on='myDropdown' class='btn' ng-click="getDataFromServer()"
                    style="width:160px;background-color:white; color:#c62222">
                    <span class="fa fa-location-arrow"></span>
                    <strong>
                       Select City
                    </strong>
                  </button>
                  <ul class="dropdown-menu scrollableMenu" role="menu" ui-outer-click="Ui.turnOff('myDropdown')" ui-outer-click-if="Ui.active('myDropdown')" role="menu"
                  ui-show="myDropdown" ui-state="myDropdown" ui-turn-off="myDropdown" style="margin-top:0 px;margin-top:-1px; text-align:center;height:300px;  overflow: scroll;">  
                       <li ng-repeat="city in cities">
                         <a ng-href="#/cityPage"  style="color:#763428; font-weight:bold;">{{ city.cityName }}</a>
                      </li>

                  </ul>
              </div>
        </div>
      </div>
    </div>
</div>

HOME PAGE CONTROLLER:

.controller('MyController' ,function ($scope, $http) {
        $scope.getDataFromServer = function() {      
                $http({
                        method : 'GET',
                        url : 'http://192.168.0.3/sf/app/cityName',
                        headers: {'Content-Type': 'application/json'},

                }).success(function(data, status, headers, config) {                
                       $scope.cities = data;
                       $scope.cities.forEach(function(product)     {                                             Console.log(product.cityId);                       

                }); 

                }).error(function(data, status, headers, config) {  
                })

        }
})

When user click on any select city from dropdown then all city id will come in console. After click on dropdown city next page will come.

SCREEN SHOT:

HTML CODE:

<div class="jumbtron scrollable-content text-center bg-color">
   <div class="row">
          <div class="bgImage">  
          </div>
          <div class="btn-group img-responsive"  ng-controller="MyControllerCity"> 
              <div ng-repeat="prdct in cityProduct">
                   <a  href="#/category-prduct" style="color:#763428; font-weight:bold;">
                      <img  src="{{prdct.categoryImage}}">
                    </a>
              </div>
          </div>

    </div>
</div>

CONTROLLER:

.controller('MyControllerCity',function($scope, $http){ 
        $http({
                method:'get',
                url:'http://192.168.0.3/sf/app/city-home/1',
                headers: {'Content-Type': 'application/json'},
            }).success(function(data, status,headers, config) {
                $scope.cityProduct = data;
                $scope.cityProduct.forEach(function(product) {
                        console.log(product.categoryId);
                        console.log("--------------------------");

                }); 
                 console.log("All ID"+$scope.cityProduct[0].categoryId); 
            }).error(function(data, status, headers ,config) {
        })  
})

You can see which city have how many product by this URL:

> https://www.winni.in/app/city-home/12
> https://www.winni.in/app/city-home/1
> https://www.winni.in/app/city-home/2

APP.JS

angular.module('Y', [
  'ngRoute',
  'mobile-angular-ui',
  'Y.controllers.Main'
])

.config(function($routeProvider) {
  $routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: false})
                .when('/cityPage', {templateUrl:'cityPage.html',  reloadOnSearch: false})
                .when('/category-prduct', {templateUrl:'category-prduct.html',  reloadOnSearch: false})
                .when('/product-description', {templateUrl:'product-description.html',  reloadOnSearch: false})
                .when('/my-winni', {templateUrl:'my-winni.html',  reloadOnSearch: false})
                .when('/gift-box', {templateUrl:'gift-box.html',  reloadOnSearch: false});
});

I want to show data in next page according to city ID.

We can find the city ID from this url http://www.winnni.in/app/cityName And append on this url: https://www.winni.in/app/city-home/12

Solution

You have use routeParam for that in route file as like I do in following code, and have to get passed param in other controller via $routeParam. Here is an example:

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>

<div ng-view></div>

<script>
var app = angular.module('myApp', []);
app.config(['$routeProvider',
        function($routeProvider) 
        {
            $routeProvider.
                when('/city', 
                {
                    templateUrl: 'city.html',
                    controller: 'cityController'
                }).
                when('/city/:city_id', 
                {
                    templateUrl: 'city_id.html',
                    controller: 'CityIdController'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);


app.controller('cityController', function($scope) 
{
    $scope.city_data = [
                    {id:1,
                    name:'Rajkot'},
                    {id:2,
                    name:'Morbi'}
                    ];
});

app.controller('CityIdController', function($scope,$routeParams) 
{
    console.log($routeParams.city_id);
    $scope.city_id = $routeParams.city_id;
});
</script>
</body>
</html>

city.html

<div ng-repeat="x in city_data">
    <a href="#/city/{{x.id}}">{{x.name}}</a>
</div>

city_id.html

Clicked City Id is : {{city_id}}

Answered By - Paresh Gami