Не удается получить данные json в угловом приложении

Я работаю над проектом, который требует, чтобы данные JSON отображались на странице по технологии клиентской стороны. В настоящее время у меня есть сетка макетов карт, которые я хочу отображать, но у меня возникают проблемы с получением данных на странице с нарушением приложения.Не удается получить данные json в угловом приложении

Вот мои текущие строки в файле App.js 33-35, где я испытываю свои ошибки.

'use strict'; 

/** 
* @ngdoc overview 
* @name peapodTestApp 
* @description 
* # peapodTestApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('peapodTestApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 


    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl', 
     controllerAs: 'main' 
     }) 
     resolve: { 
     users:['$http',function($http){ 
     return $http.get('/api/users.json').then(function(response){ 
      return response.data; 
     }); 
     }]; 
    } 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl', 
     controllerAs: 'about' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    });

Вот файл main.js для приложения

'use strict'; 

/** 
* @ngdoc function 
* @name peapodTestApp.controller:MainCtrl 
* @description 
* # MainCtrl 
* Controller of the peapodTestApp 
*/ 
angular.module('peapodTestApp') 
    .controller('MainCtrl', function() { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'ngMaterial' 
    ]; 


    });

И файл main.html для приложения

<header class="header"> 
    <h3 class="text-center">User Directory</h3> 


</header> 




<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
<flippy 
    class="fancy" 
    flip="['click']" 
    flip-back="['click']" 
    duration="800" 
    timing-function="ease-in-out"> 

     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
     <button ng-click="bool=true">Button</button> 
     </md-card-actions> 
     </md-card> 
     </div> 
     </flippy> 

<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 
    </div> 
</div> 

</div> 
</div> 


<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 

<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 
    </div> 
</div> 

</div> 
</div> 

<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 

<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 
    </div> 
</div> 

</div> 
</div> 
<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 

<div class="col-md-6"> 
     <md-card> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Card with image</span> 
      <span class="md-subhead">Small</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-sm card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
      <md-button>Action 1</md-button> 
      <md-button>Action 2</md-button> 
     </md-card-actions> 
     </md-card> 
     </div> 
    </div> 
</div> 

</div> 
</div> 

<div class="row marketing"> 
    <h4>HTML5 Boilerplate</h4> 
    <p> 
    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. 
    </p> 

    <h4>Angular</h4> 
    <p> 
    AngularJS is a toolset for building the framework most suited to your application development. 
    </p> 

    <h4>Karma</h4> 
    <p>Spectacular Test Runner for JavaScript.</p> 
</div>

Чтобы сделать снимок немного более четким, каким Я переживаю, вот несколько скриншотов проекта.

Во-первых, то, что происходит, когда линии от App.js 33-35 являются не присутствует

Вторые отображает то, что происходит после размещения линии 33-35 в App.js Наряду с ошибки с консоли.

Пожалуйста, имейте в виде, что использовал строительный лес инструмент YEOMAN построить шаблонную для приложения, так что если есть и другие файлы, необходимые, чтобы помочь собрать информацию о проблеме пожалуйста, дайте мне знать.

Благодаря

Update Я теперь только получать

angular.js: 11630 ПОЛУЧИТЬ http://localhost:9000/api/users.json 404 (Не Found)

С удалением от запятой с конца матрицы

Обновление Я получил все данные, они отображаются на экране, теперь я хочу добавить модальный проект. У меня в настоящее время есть кнопка со слушателем, которая выдает предупреждение при нажатии (это был просто тест, чтобы убедиться, что он работает.) У меня возникли проблемы с пониманием, где добавить модальный код, хотя ... каждый раз, когда я это делаю, он прерывается приложение.

Вот mainCtrl (main.js) часть проекта

'use strict'; 

/** 
* @ngdoc function 
* @name peapodTestApp.controller:MainCtrl 
* @description 
* # MainCtrl 
* Controller of the peapodTestApp 
*/ 
angular.module('peapodTestApp') 
    .controller('MainCtrl', function ($scope,UserService,$uibModal) { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'ngMaterial' 
    ]; 

    $scope.users = UserService; 
    $scope.animationsEnabled = true; 

    $scope.open = function(size){ 
     var modalInstance = $uibModal.open({ 
      animation:$scope.animationsEnabled, 
      templateUrl: 'myModalContent.html', 
      controller:'modalInstanceCtrl', 
      size:size, 
      resolve:{ 
       items: function(){ 
        return $scope.users; 
       } 
      } 
     }); 

     modalInstance.result.then(function(selectedUser){ 
      $scope.selected = selectedUser; 
     }) 

    } 


    }) 
    .service('UserService',function(){ 
    var user = [{ 

    "id": 1, 

    "name": "Leanne Graham", 

    "username": "Bret", 

    "email": "[email protected]", 

    "address": { 

     "street": "Kulas Light", 

     "suite": "Apt. 556", 

     "city": "Gwenborough", 

     "zipcode": "929983874", 

     "geo": { 

      "lat": "37.3159", 

      "lng": "81.1496" 

     } 

    }, 

    "phone": "", 

    "website": "hildegard.org", 

    "company": { 

     "name": "RomagueraCrona", 

     "catchPhrase": "Multilayered clientserver neuralnet", 

     "bs": "harness realtime emarkets" 

    } 

}, 

{ 

    "id": 2, 

    "name": "Ervin Howell", 

    "username": "Antonette", 

    "email": "[email protected]", 

    "address": { 

     "street": "Victor Plains", 

     "suite": "Suite 879", 

     "city": "Wisokyburgh", 

     "zipcode": "905667771", 

     "geo": { 

      "lat": "43.9509", 

      "lng": "34.4618" 

     } 

    }, 

    "phone": "0106926593 x09125", 

    "website": "anastasia.net", 

    "company": { 

     "name": "DeckowCrist", 

     "catchPhrase": "Proactive didactic contingency", 

     "bs": "synergize scalable supplychains" 

    } 

}, 

{ 

    "id": 3, 

    "name": "Clementine Bauch", 

    "username": "Samantha", 

    "email": "[email protected]", 

    "address": { 

     "street": "Douglas Extension", 

     "suite": "Suite 847", 

     "city": "McKenziehaven", 

     "zipcode": "595904157", 

     "geo": { 

      "lat": "68.6102", 

      "lng": "47.0653" 

     } 

    }, 

    "phone": "", 

    "website": "ramiro.info", 

    "company": { 

     "name": "RomagueraJacobson", 

     "catchPhrase": "Face to face bifurcated interface", 

     "bs": "eenable strategic applications" 

    } 

}, 

{ 

    "id": 4, 

    "name": "Patricia Lebsack", 

    "username": "Karianne", 

    "email": "[email protected]", 

    "address": { 

     "street": "Hoeger Mall", 

     "suite": "Apt. 692", 

     "city": "South Elvis", 

     "zipcode": "539194257", 

     "geo": { 

      "lat": "29.4572", 

      "lng": "164.2990" 

     } 

    }, 

    "phone": "4931709623 x156", 

    "website": "kale.biz", 

    "company": { 

     "name": "RobelCorkery", 

     "catchPhrase": "Multitiered zero tolerance productivity", 

     "bs": "transition cuttingedge web services" 

    } 

}, 

{ 

    "id": 5, 

    "name": "Chelsey Dietrich", 

    "username": "Kamren", 

    "email": "[email protected]", 

    "address": { 

     "street": "Skiles Walks", 

     "suite": "Suite 351", 

     "city": "Roscoeview", 

     "zipcode": "33263", 

     "geo": { 

      "lat": "31.8129", 

      "lng": "62.5342" 

     } 

    }, 

    "phone": "(254)9541289", 

    "website": "demarco.info", 

    "company": { 

     "name": "Keebler LLC", 

     "catchPhrase": "Usercentric faulttolerant solution", 

     "bs": "revolutionize endtoend systems" 

    } 

}, 

{ 

    "id": 6, 

    "name": "Mrs. Dennis Schulist", 

    "username": "Leopoldo_Corkery", 

    "email": "[email protected]", 

    "address": { 

     "street": "Norberto Crossing", 

     "suite": "Apt. 950", 

     "city": "South Christy", 

     "zipcode": "235051337", 

     "geo": { 

      "lat": "71.4197", 

      "lng": "71.7478" 

     } 

    }, 

    "phone": "", 

    "website": "ola.org", 

    "company": { 

     "name": "ConsidineLockman", 

     "catchPhrase": "Synchronised bottomline interface", 

     "bs": "eenable innovative applications" 

    } 

}, 

{ 

    "id": 7, 

    "name": "Kurtis Weissnat", 

    "username": "Elwyn.Skiles", 

    "email": "[email protected]", 

    "address": { 

     "street": "Rex Trail", 

     "suite": "Suite 280", 

     "city": "Howemouth", 

     "zipcode": "588041099", 

     "geo": { 

      "lat": "24.8918", 

      "lng": "21.8984" 

     } 

    }, 

    "phone": "210.067.6132", 

    "website": "elvis.io", 

    "company": { 

     "name": "Johns Group", 

     "catchPhrase": "Configurable multimedia taskforce", 

     "bs": "generate enterprise etailers" 

    } 

}, 

{ 

    "id": 8, 

    "name": "Nicholas Runolfsdottir V", 

    "username": "Maxime_Nienow", 

    "email": "[email protected]", 

    "address": { 

     "street": "Ellsworth Summit", 

     "suite": "Suite 729", 

     "city": "Aliyaview", 

     "zipcode": "45169", 

     "geo": { 

      "lat": "14.3990", 

      "lng": "120.7677" 

     } 

    }, 

    "phone": "586.493.6943 x140", 

    "website": "jacynthe.com", 

    "company": { 

     "name": "Abernathy Group", 

     "catchPhrase": "Implemented secondary concept", 

     "bs": "eenable extensible etailers" 

    } 

}, 

{ 

    "id": 9, 

    "name": "Glenna Reichert", 

    "username": "Delphine", 

    "email": "[email protected]", 

    "address": { 

     "street": "Dayna Park", 

     "suite": "Suite 449", 

     "city": "Bartholomebury", 

     "zipcode": "764953109", 

     "geo": { 

      "lat": "24.6463", 

      "lng": "168.8889" 

     } 

    }, 

    "phone": "(775)9766794 x41206", 

    "website": "conrad.com", 

    "company": { 

     "name": "Yost and Sons", 

     "catchPhrase": "Switchable contextuallybased project", 

     "bs": "aggregate realtime technologies" 

    } 

} 

]; 

    return user; 
    })

А вот вид для этого контроллера, который использует нг кнопкой мыши, чтобы получить открытый().

<md-scroll-shrink><header layout="row" layout-xs="column" class="header"> 
    <h3 class="text-center">User Directory</h3> 
</header> 
</md-scroll-shrink> 




<div layout="row" layout-md="column"> 


    <div flex> 
     <md-card id="card" ng-repeat="user in users"> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">{{user.username}}</span> 

      <span class="md-subhead">{{user.email}}</span> 
      </md-card-title-text> 
      <md-card-title-media> 
      <span ngclass="glyphicon glyphicon-earphone"></span> 
      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
     <button ng-click="open()" class="btn btn-success">More Info</button> 
     </md-card-actions> 
     </md-card> 
     </div> 




</div>

Опять же, спасибо за любую помощь, которая предоставляется.

источник

2016-03-30 Joel Carter

Где загружаются ваш app.js и main.js файлов вы HTML? – Gremash

Все загружается через файл index.html (все зависимости) –

Удалите ',' после 'ngTouch'. –

Вы не используете данные пользователя нигде, поэтому вам не нужен этот код решения. Обычно он будет внутри вас. Когда функция.

'use strict'; 

/** 
* @ngdoc overview 
* @name peapodTestApp 
* @description 
* # peapodTestApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('peapodTestApp', [ 
     'ngAnimate', 
     'ngCookies', 
     'ngResource', 
     'ngRoute', 
     'ngSanitize', 
     'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'views/main.html', 
       controller: 'MainCtrl', 
       controllerAs: 'main' 
      }) 
      .when('/about', { 
       templateUrl: 'views/about.html', 
       controller: 'AboutCtrl', 
       controllerAs: 'about' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    });

источник

2016-03-30 18:30:26 Gremash

Я добавил строки в метод .when ... все равно не повезло, хотя –

Да, если эти пользовательские данные здесь не нужны, это хороший пример того, как включить его в правильный путь. Я предположил, что это не нужно, потому что его HTML-файл не имеет угловых переменных ... – Gremash

Какие у вас проблемы? – Gremash

Я сделал подобную работу раньше. Вы можете проверить. Это может помочь.

app.config(function ($routeProvider) { 
$routeProvider 
    .when('/landingpage', { 
     templateUrl: 'app/views/landingPage.html', 
     controller: 'landingCtrl' 
    }) 
    .when('/home', { 
     templateUrl: 'app/views/homePage.html', 
     controller: 'homeCtrl', 
     resolve: { 
      app: function ($q, $location, $localStorage) { 
       var defer = $q.defer(); 
       if ($localStorage.cbToken == undefined) { 
        $location.path('/landingpage'); 
       } 
       defer.resolve(); 
       return defer.promise; 
      } 
     } 

    }) 
    .otherwise({ 
     redirectTo: '/landingpage' 
    });

})

источник

2016-03-30 18:57:41

Не удается получить данные json в угловом приложении

ответ

Смежные вопросы