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!
