AngularJSのJSONファイルからデータを取得できません

私はangularjsで新しいです、私はJSONファイルからデータを読み込もうとしています。 JSONファイルには、liを使用したリストのリストがあります。しかし、私の見解では示されていません。AngularJSのJSONファイルからデータを取得できません

ここにここに私の 'index.htmlを' ファイル

<div id="navbar" class="navbar-collapse collapse"> 
<ul class="nav navbar-nav navbar-right"> 
    <li ng-repeat="item in navbaritem.navigation"> 
    <a class="{{ item.class }}" href="#" ng-href="{{ item.url }}">{{ item.title }}</a> 
    </li> 
</ul> 
</div>

はここに私のcontroller.js

(function(){ 
    var app = angular.module('myapp', []); 
    app.controller('mycntrl', function($scope, $http) { 
    $scope.navbaritem = []; 
    $http.get('pages/navbar.json').success(function(data) { 
     $scope.navbaritem = data; 

    }, function (err,data) { 
     if(err){ 

      return console.log(err); 
     } 
     console.log(data); 

    }); 
}); 
});

ですが、私の 'ページ/ navbar.json' ファイルである

{ 
    "general":{ 
     "logo":"images/logo.jpeg", 
     "name" : "Company Name" 
    }, 
    "navigation":[ 
     { 
     "title":"Home", 
     "link":"#" 
     }, 
     { 
     "title":"About", 
     "link":"#" 
     }, 
     { 
     "title":"Services", 
     "link":"#" 
     }, 
     { 
     "title":"Contact", 
     "link":"#" 
     } 
    ] 
}

と私の出力はこのようなものです{{item.title}}また、私はエラーが発生します

ここでは

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=myapp&p1=Error%3A%2…localhost%2Fangular-theme%2Fassets%2Fangularjs%2Fangular.min.js%3A21%3A332)

出典

2017-05-17 lucky

へようこそ。質問のタイトルは、その質問が何であるかを明確にすべきです。 "助けてください"という質問はおそらく誰も質問を読まないようにする最も良い方法です;-) –

「緊急に提出する必要がある私を助けてください」 - >私たちの多くの人が働いているように： – OldPadawan

これはhttp ：//stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr – Zeromus

実施例である：

注：SOスニペットエディタとして追加ファイルを許可していない、私はまた、約束を返す$timeoutと私のサービスで$httpコールをシミュレートしました。 SO

スニペット

(function() { 
 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
    angular. 
 
    module('app') 
 
    .controller('ExampleController', ['$scope', 'MyService', function($scope, MyService) { 
 
     // Call service to get navbar items 
 
     MyService.getNavbarItems() 
 
     .then(function(data) { 
 
      // Once promise success, update $scope 
 
      $scope.navbaritem = data; 
 
     }); 
 
    }]) 
 
    .factory('MyService', ['$timeout', function($timeout) { 
 
     return { 
 
     getNavbarItems: function() { 
 
      // Simulate 250ms $http api call 
 
      // Use return $http.get('/api/navbar/items') in your code 
 
      return $timeout(function() { 
 
      return { 
 
       "general": { 
 
       "logo": "images/logo.jpeg", 
 
       "name": "Company Name" 
 
       }, 
 
       "navigation": [{ 
 
        "title": "Home", 
 
        "link": "/home", 
 
        "class": "item" 
 
       }, 
 
       { 
 
        "title": "About", 
 
        "link": "/about" 
 
       }, 
 
       { 
 
        "title": "Services", 
 
        "link": "/services" 
 
       }, 
 
       { 
 
        "title": "Contact", 
 
        "link": "/contact" 
 
       } 
 
       ] 
 
      } 
 
      }, 250); 
 
     } 
 
     } 
 
    }]) 
 

 
})();

<!doctype html> 
 
<html lang="en" ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ExampleController"> 
 

 
    <div id="navbar" class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li ng-repeat="item in navbaritem.navigation"> 
 
     <a class="{{ item.class }}" href="#" ng-href="{{ item.link }}">{{ item.title }}</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-05-17 11:27:17

AngularJSのJSONファイルからデータを取得できません

答えて

関連する問題