遇到了麻烦JSON数据转变为角应用 [英] Having trouble getting json data into angular app

查看：163
本文介绍了遇到了麻烦JSON数据转变为角应用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的工作，需要JSON数据通过客户端技术进行渲染到页面的项目。目前，我有我想要的不过，我无法获取数据到页面与出打破了应用程序来显示数据卡布局的网格。

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.

下面是我当前的App.js文件行33-35在哪里我遇到我的错误。

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

下面是该应用的main.js文件

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


  });

和该应用的main.html中文件

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.

首先是当来自App.js 33-35线条会发生什么的不可以 present

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

我想与JSON数据

第二个显示器放置线33-35在App.js随着从控制台的错误后会发生什么。

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.

感谢

更新我现在只收到

angular.js：11630 GET 的http：//本地主机：9000 / API / users.json 404（未
  找到）

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

由于从阵列的端部除去分号

Since removing a semicolon from from the end of the array

更新我已经得到了一切，它显示在屏幕上的数据，我现在想一个模式添加到项目中。我现在有与生产时pressed警报侦听器的按钮（这只是一个测试，以确保它的工作原理）。我无法理解在哪里......虽然每增加模态code当时我做的，它打破了应用程序。

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.

下面是该项目的mainCtrl（main.js）部分

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

这是该控制器，它使用的视图NG-点击获得的open（）

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.

推荐答案

我以前做过类似的工作。您可以检查。这可能帮助。

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

}）

这篇关于遇到了麻烦JSON数据转变为角应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆