1. Zuhause
  2. Frage und Antwort
  3. Probleme beim Abrufen von JSON-Daten in eckige App

Probleme beim Abrufen von JSON-Daten in eckige App

2016-03-30 15 views
0

Ich arbeite an einem Projekt, bei dem JSON-Daten über die clientseitige Technologie auf einer Seite gerendert werden müssen. Ich habe derzeit das Raster der Kartenlayouts, in denen ich die Daten anzeigen möchte, aber ich habe Probleme, die Daten auf die Seite zu bekommen, ohne die App zu brechen.Probleme beim Abrufen von JSON-Daten in eckige App

Hier ist meine aktuelle App.js File Lines 33-35 wo ich meine Fehler erfahre.

'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: '/' 
     }); 
    });

Hier ist die main.js Datei für die App

'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' 
    ]; 


    });

Und die main.html Datei für die App

<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>

Um das Bild etwas klarer zu machen, was Ich habe erlebt, hier sind einige Screenshots des Projekts.

Die erste ist, was passiert, wenn die Leitungen von App.js 33-35 sind nicht vorhanden

The layout of the project which I want to fill in with JSON data

Die zweite zeigt, was nach Linien 33-35 in App.js Platzierung geschieht Neben die Fehler von der Konsole.

Broken app with error messages

Bitte beachten Sie, dass das Yeoman Gerüst eingesetzt, um die vorformulierten für die App zu bauen, so dass, wenn es andere Dateien benötigt werden, um Informationen über das Problem sammeln Sie mich freundlich wissen lassen.

Dank

aktualisieren jetzt erhalte ich nur ein

Angularjs: 11630 GET http://localhost:9000/api/users.json 404 (Nicht gefunden)

Da ein Semikolon von vom Ende entfernt des Arrays

Update Ich habe alle Daten erhalten, es zeigt auf dem Bildschirm, ich möchte jetzt ein Modal zum Projekt hinzufügen. Ich habe derzeit eine Schaltfläche mit einem Listener, der beim Drücken eine Warnung erzeugt (Dies war nur ein Test, um sicherzustellen, dass es funktioniert.) Ich habe Probleme zu verstehen, wo den modalen Code hinzufügen, aber jedes Mal, wenn ich es mache, bricht es die App.

Hier ist die mainCtrl (main.js) Teil des Projekts

'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": "92998­3874", 

     "geo": { 

      "lat": "­37.3159", 

      "lng": "81.1496" 

     } 

    }, 

    "phone": "", 

    "website": "hildegard.org", 

    "company": { 

     "name": "Romaguera­Crona", 

     "catchPhrase": "Multi­layered client­server neural­net", 

     "bs": "harness real­time e­markets" 

    } 

}, 

{ 

    "id": 2, 

    "name": "Ervin Howell", 

    "username": "Antonette", 

    "email": "[email protected]", 

    "address": { 

     "street": "Victor Plains", 

     "suite": "Suite 879", 

     "city": "Wisokyburgh", 

     "zipcode": "90566­7771", 

     "geo": { 

      "lat": "­43.9509", 

      "lng": "­34.4618" 

     } 

    }, 

    "phone": "010­692­6593 x09125", 

    "website": "anastasia.net", 

    "company": { 

     "name": "Deckow­Crist", 

     "catchPhrase": "Proactive didactic contingency", 

     "bs": "synergize scalable supply­chains" 

    } 

}, 

{ 

    "id": 3, 

    "name": "Clementine Bauch", 

    "username": "Samantha", 

    "email": "[email protected]", 

    "address": { 

     "street": "Douglas Extension", 

     "suite": "Suite 847", 

     "city": "McKenziehaven", 

     "zipcode": "59590­4157", 

     "geo": { 

      "lat": "­68.6102", 

      "lng": "­47.0653" 

     } 

    }, 

    "phone": "", 

    "website": "ramiro.info", 

    "company": { 

     "name": "Romaguera­Jacobson", 

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

     "bs": "e­enable strategic applications" 

    } 

}, 

{ 

    "id": 4, 

    "name": "Patricia Lebsack", 

    "username": "Karianne", 

    "email": "[email protected]", 

    "address": { 

     "street": "Hoeger Mall", 

     "suite": "Apt. 692", 

     "city": "South Elvis", 

     "zipcode": "53919­4257", 

     "geo": { 

      "lat": "29.4572", 

      "lng": "­164.2990" 

     } 

    }, 

    "phone": "493­170­9623 x156", 

    "website": "kale.biz", 

    "company": { 

     "name": "Robel­Corkery", 

     "catchPhrase": "Multi­tiered zero tolerance productivity", 

     "bs": "transition cutting­edge 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)954­1289", 

    "website": "demarco.info", 

    "company": { 

     "name": "Keebler LLC", 

     "catchPhrase": "User­centric fault­tolerant solution", 

     "bs": "revolutionize end­to­end systems" 

    } 

}, 

{ 

    "id": 6, 

    "name": "Mrs. Dennis Schulist", 

    "username": "Leopoldo_Corkery", 

    "email": "Karley_Dac[email protected]", 

    "address": { 

     "street": "Norberto Crossing", 

     "suite": "Apt. 950", 

     "city": "South Christy", 

     "zipcode": "23505­1337", 

     "geo": { 

      "lat": "­71.4197", 

      "lng": "71.7478" 

     } 

    }, 

    "phone": "", 

    "website": "ola.org", 

    "company": { 

     "name": "Considine­Lockman", 

     "catchPhrase": "Synchronised bottom­line interface", 

     "bs": "e­enable innovative applications" 

    } 

}, 

{ 

    "id": 7, 

    "name": "Kurtis Weissnat", 

    "username": "Elwyn.Skiles", 

    "email": "[email protected]", 

    "address": { 

     "street": "Rex Trail", 

     "suite": "Suite 280", 

     "city": "Howemouth", 

     "zipcode": "58804­1099", 

     "geo": { 

      "lat": "24.8918", 

      "lng": "21.8984" 

     } 

    }, 

    "phone": "210.067.6132", 

    "website": "elvis.io", 

    "company": { 

     "name": "Johns Group", 

     "catchPhrase": "Configurable multimedia task­force", 

     "bs": "generate enterprise e­tailers" 

    } 

}, 

{ 

    "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": "e­enable extensible e­tailers" 

    } 

}, 

{ 

    "id": 9, 

    "name": "Glenna Reichert", 

    "username": "Delphine", 

    "email": "[email protected]", 

    "address": { 

     "street": "Dayna Park", 

     "suite": "Suite 449", 

     "city": "Bartholomebury", 

     "zipcode": "76495­3109", 

     "geo": { 

      "lat": "24.6463", 

      "lng": "­168.8889" 

     } 

    }, 

    "phone": "(775)976­6794 x41206", 

    "website": "conrad.com", 

    "company": { 

     "name": "Yost and Sons", 

     "catchPhrase": "Switchable contextually­based project", 

     "bs": "aggregate real­time technologies" 

    } 

} 

]; 

    return user; 
    })

Und hier ist der Blick für die Steuerung, die ein verwendet ng Sie auf die offen für get().

<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>

Nochmals vielen Dank für jede Hilfe, die gegeben wird.

Quelle

2016-03-30 Joel Carter

+0

Wo Ihre app.js und main.js Dateien laden in Sie HTML-Format? – Gremash

+0

Alles wird durch eine index.html Datei geladen (alle Abhängigkeiten) –

+1

Entfernen Sie das ',' nach 'ngTouch'. –

Antwort

0

Sie verwenden die Benutzerdaten nicht überall, so dass Sie diesen Auflösungscode nicht benötigen. Normalerweise würde es in dir gehen. Wenn Funktion.

'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: '/' 
      }); 
    });

Quelle

2016-03-30 18:30:26 Gremash

+0

Ich habe die Zeilen der .when Methode hinzugefügt ... immer noch kein Glück obwohl –

+0

Ja, wenn diese Benutzerdaten hier nicht benötigt wird, ist es ein gutes Beispiel dafür, wie man es in den richtigen Pfad einfügt. Ich nahm an, dass es nicht benötigt wurde, weil seine HTML-Datei keine Winkelvariablen hat ... – Gremash

+0

Welche Probleme haben Sie noch? – Gremash

0

Ich habe vor ähnliche Arbeit geleistet. Du kannst nachschauen. Das könnte helfen.

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' 
    });

})

Quelle

2016-03-30 18:57:41

Verwandte Themen

 Verwandte Themen