angular.js view is returning blank page - php

Question

I am new to angular.js. i have wrote controller, services etc to fetch data using data service but my view page is being shown blank. i have checked with every thing but could not resolve the issue, any help would be appreciable.
//My app.js
'use strict';
angular.module('CricdomApp', [
'CricdomApp.services',
'CricdomApp.controllers',
'ui.router'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/team", {templateUrl: "partials/list.html", controller: "teamController"}).
otherwise({redirectTo: '/'});
}]);
//Controller
angular.module('CricdomApp.controllers', []).
controller('teamController', function($scope, cricAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
$scope.driversList = [];
cricAPIservice.getDrivers().success(function (response) {
//Digging into the response to get the relevant data
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
//Services
angular.module('CricdomApp.services', []).
factory('cricAPIservice', function($http) {
var cricAPI = {};
cricAPI.getDrivers = function() {
return $http({
method: 'JSONP',
url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
});
}
return cricAPI;
});
//List html page.
<section id="main">
<- Back to drivers list
<nav id="secondary" class="main-nav">
<!--<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</div>
</div>-->
<div class="driver-status">
Country: {{driver.Driver.country}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
<!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
<!-- Biography -->
</div>
</nav>
</section>
//Index page
<section id="main">
<- Back to drivers list
<nav id="secondary" class="main-nav">
<div class="driver-status">
Country: {{driver.Driver.country}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
</div>
</nav>
</section>

Answer 1

Your service Code
angular.module('CricdomApp.services', []).
factory('cricAPIservice', function($http) {
var cricAPI = {};
cricAPI.getDrivers = function() {
return $http({
dataType: 'JSONP',
method: 'POST',
url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
});
}
return cricAPI;
});
You were missing App and Controller reference in your HTML Code
//ng-app="CricdomApp" ng-controller="teamController"
<div id="Container" ng-app="CricdomApp" ng-controller="teamController">
<section id="main">
<- Back to drivers list
<nav id="secondary" class="main-nav">
<!--<div class="driver-picture">
<div class="avatar">
<img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
<img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</div>
</div>-->
<div class="driver-status">
Country: {{driver.Driver.country}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
<!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
<!-- Biography -->
</div>
</nav>
</section>
//Index page
<section id="main">
<- Back to drivers list
<nav id="secondary" class="main-nav">
<div class="driver-status">
Country: {{driver.Driver.country}} <br/>
Team: {{driver.Constructors[0].name}}<br/>
</div>
</nav>
</section>
</div>