Loading json data in nested views in angular?

Question

I am new to Angular and trying to figure out nested views:

I have a json file and I would like to display that that in one of the nested views however; I don't get any result:

App:

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider',

    function($routeProvider){

        $routeProvider.
            when('/tab1', {
                templateUrl: 'tab1.html',
                controller: 'tab1'
            }).
            when('/tab2',{
                templateUrl: 'tab2.html',
                controller: 'tab2'
            }).
            when('/tab3',{
                templateUrl: 'tab3.html',
                controller: 'tab3'
            }).
            otherwise({
                redirectTo: '/tab1'
            });
    }]);

myApp.controller('tab1', function($scope, $http){
    $scope.message = 'This is Tab1 space';
});

myApp.controller('tab2', function($scope){
    $scope.message = 'This is Tab2 space';
});

myApp.controller('tab3', function($scope){

    $http.get('data.json')
       .success(function(data){
          $scope.cars = data;                
        });
});

I can display tab1 and tab2 text but tab3 which has json data..

How do I have to configure tab3 controller to be able to show json data in data3 view?

myApp.controller('tab3', function($scope){

$http.get('data.json')
       .success(function(data){
          $scope.cars = data;                
        });
});

html:

<html lang="en" ng-app="myApp">
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="myApp.js"></script>
  </head>
  <body>
                <ul>
                    <li>
                    <a href="#tab1">tab1</a>
                    </li>
                    <li>
                    <a href="#tab2">tab2</a>
                    </li>
                    <li>
                    <a href="#tab3">Check Cars</a>
                    </li>
                </ul>

                <div ng-view></div>

  </body>
</html>

and tab3.html

  <span ng-repeat="car in cars">
 {{car.Brand}}
 </span>

How can I call that json data in tab3?

Exp: http://plnkr.co/edit/medE55ZlFYBtWJExrxjU?p=preview

thank you in advance!

Kalhan · Accepted Answer · 2014-11-05 12:46:17Z

1

add $http dependancy in your tab3 controller as below,

myApp.controller('tab3', function($scope,$http){

answered Nov 5, 2014 at 12:46

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nat Wallbank Over a year ago

You could also use the resolve property of your 'tab3' route to return that promise and inject the resulting JSON object directly into your controller. See the $routeProvider docs for more info.

Collectives™ on Stack Overflow

Loading json data in nested views in angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related