无法将json数据导入angular应用

Question

I'm working on a project that requires JSON data to be rendered to a page via client side technology. I currently have the grid of card layouts that I want to display the data in however, I'm having trouble getting the data onto the page with out breaking the app.

Here is my current App.js File Lines 33-35 are where I am experiencing my errors.

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

Here is the main.js file for the 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'
    ];


  });

And the main.html file for the 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>

To make the picture a bit clearer as to what I'm experiencing, here are some screen shots of the project.

The first is what happens when the lines from App.js 33-35 are not present

The second displays what happens after placing lines 33-35 in App.js Along with the errors from the console.

Please bear in mind that used the Yeoman scaffolding tool to build the boilerplate for the app, so if there are other files needed to help gather information about the problem please kindly let me know.

Thanks

Update I now only receive a

angular.js:11630 GET http://localhost:9000/api/users.json 404 (Not Found)

Since removing a semicolon from from the end of the array

Update I've gotten all of the data in, it shows on the screen, I now wish to add a modal to the project. I currently have a button with a listener that produces an alert when pressed (This was just a test to make sure it works.) I'm having trouble understanding where to add the modal code though...each time I do, it breaks the app.

Here is the mainCtrl (main.js) portion of the project

'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": "Sincere@april.biz",

    "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": "Shanna@melissa.tv",

    "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": "Nathan@yesenia.net",

    "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": "Julianne.OConner@kory.org",

    "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": "Lucio_Hettinger@annie.ca",

    "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_Dach@jasper.info",

    "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": "Telly.Hoeger@billy.biz",

    "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": "Sherwood@rosamond.me",

    "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": "Chaim_McDermott@dana.io",

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

And here is the view for that controller which uses an ng-click to get the open().

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

Again, thanks for any help that is given.

Answer 1

You aren't using the user data anywhere so you don't need that resolve code. Normally it would go inside of you .when function.

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

Answer 2

I have done similar work before. You can check. That might help.

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

})