Recieved Data is not showing at ui-view in angular JS? - html

Question

I am creating a website using angular JS which is online advertisement booking. I am using RestAPI for getting data from backend like newspapers, categories etc.What I have to do in this is that to get User's location (city) and show data (newspapers) according to his city just like Zomato.com. So first I have created a locationController to get user's location from his IP and set the location to URL then I tried to get data according to city on newspaper controller. I am using ui-router for routes but in ui-view, data is not rendering and I am still confused about to get city and showing data. Here are my code --
locationController.js
adsApp.controller('locationCtrl',['$scope', '$http', '$uibModal', '$state', '$stateParams',
function($scope, $http, $uibModal, $state, $stateParams){
$scope.getLocation = function () {
if($stateParams.cityName){
$scope.cityName = $stateParams.cityName;
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$http({
url: 'http://ipinfo.io/json',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function (response) {
var data = response.data;
$scope.cityName = data.city.toLowerCase();
if($scope.cityName){
$state.go('app',{
'cityName' : $scope.cityName
});
}else{
$scope.getLocationPopup();
}
});
}
}
$scope.getLocationPopup = function () {
var modalInstance = $uibModal.open({
templateUrl: 'custom/popup.html',
});
}
angular.element("#ads_body").scope().getLocation();
}]);
newspaperController.js
adsApp.controller('newspaperCtrl',function($scope, $log,$state, $http, $window, $location, $stateParams){
console.log($stateParams);
$scope.formData = {};
if($stateParams){
$scope.formData = {
'city_name' : $stateParams.cityName,
'category_id' : $stateParams.categoryName
}
}
$scope.processForm = function () {
$http({
method: 'POST',
url: 'apocalypse/api/newspapers/newspaperData.json',
data: $.param($scope.formData), // pass in data as strings
headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload)
})
.then(function (response) {
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
console.log(data);
$scope.newspapers = data.newspapers;
$state.go('app_city_category',{
'cityName' : $scope.formData.city_name,
'categoryName' : $scope.formData.category_id,
})
});
};
});
routes.js
adsApp.config([ '$stateProvider', '$routeProvider', '$urlRouterProvider', '$locationProvider' ,
function ($stateProvider, $routeProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
url: "/:cityName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
})
.state('app_city_category', {
url: "/:cityName/:categoryName",
templateUrl : 'custom/newspaper_index_data.html',
controller: "newspaperCtrl"
});
}]);
newspaper_index_data.html
<div class="container" ng-controller="newspaperCtrl">
<div class="white_box_wrapper">
<h2 class="primary_heading text-center">Choose a Newspaper below for {{currentCity}}</h2>
<p class="text-center m-b p-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
<br>
<div class="mobile_white_box_wrapper" ng-repeat="newspaper in newspapers">
<div class="col-md-3 p-n">
<h5>{{newspaper.newspaper.name}}</h5>
</div>
<div class="col-md-9 p-n ">
<div class="col-xs-6 p-n">
<div class="col-md-6 p-n p-b">
<h6>{{newspaper.city.name}}</h6>
</div>
<div class="col-md-6 p-n">
<h6>{{newspaper.category.name}}</h6>
</div>
</div>
<div class="col-xs-6 p-n text-right">
<div class="col-md-6 p-n p-b">
<h6><i class="fa fa-inr" aria-hidden="true"></i>{{newspaper.basic_price}} <span class="text-muted ">Per {{newspaper.number}} {{newspaper.newspaper.price_type}} </span></h6>
</div>
<div class="col-md-6 p-n">
<a href="#" class="btn btn-primary btn-md">
Select
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--Most Popular Newspaper in and around Lucknow -->
<div class="white_box_wrapper-no-shadow">
<h3 class="footer-heading-bold Lucknow-news">Most Popular Newspaper in and Around {{currentCity}}</h3>
<div class="mobile_white_box_wrapper">
<div class="container">
<ul class="popular_newspaper">
<li class="col-md-4" ng-repeat="newspaper in newspapers">
<a href="#">
{{newspaper.newspaper.name}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="adsYogiApp" id="adsyogi_id">
<head>
<title>Adsyogi.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<base href="/adsyogi_php/">
<!-- lib css files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<!-- js files -->
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="js/lib/off-canvas/iptools-jquery-offcanvas.min.js"></script>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/lib/off-canvas/iptools-jquery-offcanvas.css">
</head>
<body style="overflow-x: hidden">
<header role="primary_header">
<div class="container">
<nav ng-include="'custom/navigation.html'"></nav>
<!-- Search Box start-->
<div class="row search-box ">
<div class="col-md-12">
<h1>Find the Best Newspapers to<br> Advertise in {{currentCity}}</h1>
<p class="sub-small-text">consectetur adipiscing elit. Nulla cursus tincidunt augue, in iaculis mi ac</p>
<div class="col-md-1"></div>
<div id="header_search_wrapper" class="col-md-10" ng-controller="newspaperCtrl">
<form method="post" ng-submit="processForm()">
<div id="city_search_wrapper" class="col-md-4 p-n icon" ng-controller="citiesCtrl">
<select class="form-control b-r-white header_dropdown" name="city_name" ng-model="formData.city_name">
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{cityN.slug}}">{{cityN.name}}</option>
</select><!--
<input class="form-control b-r-white header_dropdown" name="cityName" ng-model="formData.cityName" type="text" list="listid">
<datalist id='listid'>
<option class="header_dropdown_option" ng-repeat="cityN in cities" value="{{ cityN.name }}">
</datalist> -->
<i class="fa fa-location-arrow"></i>
</div>
<div id="category_search_wrapper" class="col-md-4 p-n icon" ng-controller="categoriesCtrl">
<select class="form-control b-r-white header_dropdown" name="category_id" ng-model="formData.category_id">
<option>-- Select Category --</option>
<option class="header_dropdown_option" ng-repeat="categoryN in parentCategories" value="{{categoryN.id}}">{{categoryN.name}}</option>
</select>
<i class="fa fa-search"></i>
</div>
<div class="col-md-4 p-n">
<button type="submit" class="btn btn-primary btn-md">SHOW NEWSPAPERS </button>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="col-md-1"></div>
<div class="clearfix"></div>
</div>
</div>
<!-- Search Box end -->
</div>
</header>
<!-- header end -->
<section id="main-wrapper" role="main-wrapper">
<div ui-view>
</div>
</section>
<div ng-include="'custom/footer.html'"></div>
<script type="text/javascript" src="js/lib/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-route.min.js"></script>
<!-- Include UI Bootstrap library -->
<script src="js/lib/angular/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="js/app/app.js"></script>
<script type="text/javascript" src="js/app/routes.js"></script>
<script type="text/javascript" src="js/app/controllers/locationController.js"></script>
<script type="text/javascript" src="js/app/controllers/citiesController.js"></script>
<script type="text/javascript" src="js/app/controllers/categoriesController.js"></script>
<script type="text/javascript" src="js/app/controllers/newspaperController.js"></script>
</body>
</html>
app.js
angular.module('core', ['ui.router', 'ngResource', 'ngMessages', 'ngRoute', 'ui.bootstrap']);
angular.module('controllers', []);
angular.module('factories', []);
angular.module('services', []);
angular.module('configs', []);
angular.module('runs', []);
var adsYogiApp = angular.module('adsYogiApp', ['core', 'runs', 'configs', 'services', 'factories', 'controllers']);

Answer 1

If the probleme is that in newspaper_index_data.html values like {{newspaper.newspaper.name}} are not corresponding to any data. It's because you set those values when you call the function processForm but this function change the view so the scope too and values like $scope.newspaper are not existing anymore in the new scope.
In AngularJS if you use the same controller for multiple views, each time the view is loaded the controller is initialized and fresh and a new $scope is injected.
To do what you want you need to use $rootScope (a scope shared by all controllers) or to use a provider