Javascript 导入Json数据并在angular应用程序中显示_Javascript_Angularjs_Json

Javascript 导入Json数据并在angular应用程序中显示

javascript angularjs json

Javascript 导入Json数据并在angular应用程序中显示,javascript,angularjs,json,Javascript,Angularjs,Json,我一周前开始学习angular，现在我尝试自己构建一个应用程序（因为人们说这是最好的学习方式），我尝试做一件我以前没有做过的事情，所以如果简单的话不要对我太粗鲁，我尝试构建一个pokedex，我尝试使用Json中已经存在的数据，然后将其导入angular上的控制器，这样我就可以使用ng repeat来显示数据，但我不知道为什么它不会产生结果，可能我犯了很多错误，但我找不到：/，我将在这里发布我所做的： Html <!DOCTYPE html> <html lang="en"&g

我一周前开始学习angular，现在我尝试自己构建一个应用程序（因为人们说这是最好的学习方式），我尝试做一件我以前没有做过的事情，所以如果简单的话不要对我太粗鲁，我尝试构建一个pokedex，我尝试使用Json中已经存在的数据，然后将其导入angular上的控制器，这样我就可以使用ng repeat来显示数据，但我不知道为什么它不会产生结果，可能我犯了很多错误，但我找不到：/，我将在这里发布我所做的：

Html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="angular.js"></script>
<script src="pokedex.js"></script>

Json Url:

Ps：对不起，我的英语不好的朋友：///p>您应该将http请求返回的数据分配给scope对象pokemons。因为您使用了控制器作为语法，所以应该这样做

HTML


名称：{{pokemon.Name}

您应该将http请求返回的数据分配给scope对象pokemons。因为您使用了控制器作为语法，所以应该这样做

HTML


名称：{{pokemon.Name}

您正在pokedex.pokemons上使用ng repeat，您必须从获取数据的控制器将数据分配给pokedex.pokemons

 $http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
 // assign data here
});

您正在pokedex.pokemons上使用ng repeat，您必须从获取数据的控制器将数据分配给pokedex.pokemons

 $http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
 // assign data here
});

如果您的意思是ng controller=“pokemon controller as pokedex”，那么pokedex只是一个别名。请检查我下面的答案。您应该将http请求返回的数据分配给作用域对象pokedex。您是否尝试喜欢

pokemons=JSON.parse（data）

或

$scope.pokemons=JSON.parse（数据）

我之所以使用这种方式，是因为我在codeschool的angular中看到了它，我尝试使用.min版本，错误是angular.min.js:6未捕获错误：[$injector:modulerr]如果你指的是ng controller=“PokemonController as pokedex”，pokedex只是一个别名，请检查我下面的答案。您应该将从http请求返回的数据分配给作用域对象pokedex。您是否尝试喜欢

pokemons=JSON.parse（数据）

或

$scope.pokemons=JSON.parse（数据）

我使用这种方式是因为我在codeschool中看到了angular，我尝试使用.min版本，错误是angular.min.js:6未捕获错误：[$injector:modulerr]在http get中？我可以在html中访问他吗？你应该通过这个将数据分配给口袋妖怪。口袋妖怪=数据然后你可以通过pokedex访问它。pokemonssill不工作：/angular.js:4640未捕获错误：[$injector:modulerr]未能实例化模块pokedex，原因是：错误：[$injector:nomod]模块“pokedex”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。请发送代码，我可以修复它。tsadikyitbarek@gmail.comby多次初始化模块pokedex的方法可能在http get中的其他文件中？我可以在html中访问他吗？你应该通过这个将数据分配给口袋妖怪。口袋妖怪=数据然后你可以通过pokedex访问它。pokemonssill不工作：/angular.js:4640未捕获错误：[$injector:modulerr]未能实例化模块pokedex，原因是：错误：[$injector:nomod]模块“pokedex”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。请发送代码，我可以修复它。tsadikyitbarek@gmail.comby多次初始化模块pokedex的方法可能在其他文件中

(function(){

var app = angular.module('pokedex',[]);

app.controller('pokemonController',['$http',function($http){
    $http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
    this.pokemons = data;
    });
}]);
});

<div class="row" ng-controller="PokemonController as pokedex">
<div class="col-md-offset-1 col-md-6" ng-repeat = "pokemon in pokedex.pokemons">
  <p>Name: {{pokemon.Name}}</p>
</div>

ng-repeat = "pokemon in pokedex.pokemons"

 $http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
 // assign data here
});