无法将json数据转换为角度应用程序

Question

我正在开发一个项目，该项目要求通过客户端技术将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中的行不存在时会发生什么

第二个显示在App.js中放置第33-35行后发生的情况以及来自控制台的错误。

请记住，使用Yeoman脚手架工具为应用程序构建样板，所以如果需要其他文件来帮助收集有关问题的信息，请告诉我。

由于

更新我现在只收到

  

angular.js：11630获取http://localhost:9000/api/users.json 404（不是   找到了）

从数组末尾删除分号

更新我已经获得了所有数据，它显示在屏幕上，我现在希望为项目添加一个模态。我目前有一个带有监听器的按钮，按下时会发出警报（这只是一个测试，以确保它的工作。）我很难理解在哪里添加模态代码虽然...每次我，它打破该应用程序。

这是项目的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": "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;
  })

这是该控制器的视图，它使用ng-click来获取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>

再次感谢您给予的任何帮助。

Answer 1

您没有在任何地方使用用户数据，因此您不需要该解析代码。通常它会进入你的内心。当功能。

'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

之前我做过类似的工作。你可以检查一下。这可能有所帮助。

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

}）