CODEWITHSUNDEEP
angularjs
Mar
Mar

Reputation: 1606

Loading json data in nested views in angular?

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!

Upvotes: 0

Views: 235

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

add $http dependancy in your tab3 controller as below,

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

Upvotes: 1

Related Questions