Javascript 带有工厂的Angular JS作为本地文件，文件中包含JSON

我试图修改下面的Angular JS示例，使其在未连接到Internet的设备上的文件夹中作为独立文件工作

我同意在流程结束时本地链接两个库，我相信我已经正确引用了模板。我已经为JSON数据制作了一个本地数组（countriesArray），但我不知道如何在没有http的情况下将其正确加载到countries工厂。我暂时使用了示例的JSON URL，但代码中肯定还有另一个错误，因为它只显示一个空白屏幕

对不起我的无知

Angular.js示例
var countryApp=angular.module（'countryApp'，['ngRoute']）；
var countriesArray=[
{
“名称”：“中国”，
“人口”：1359821000，
“flagURL”：“//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of the_the_People%27s_Republic_of_China.svg”，
“首都”：“北京”，
“国内生产总值”：12261
},
{
“名称”：“印度”，
“人口”：1205625000，
“flagURL”：“//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg”，
“首都”：“新德里”，
“国内生产总值”：4716
},
{
“名称”：“美利坚合众国”，
“人口”：312247000，
“flagURL”：“//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of the_the_United_States.svg”，
“首都”：“华盛顿特区”，
“国内生产总值”：16244
}
];
countryApp.config（函数（$routeProvider）{
$routeProvider。
当（“/”{
模板：“
”，
控制器：“CountryListCtrl”
}).
当（“/：countryName”{
模板：{country.name}
旗帜：
人口：{{country.Population | number}
首都：{{country.Capital}
国内生产总值：{country.GDP |货币}

首先，您的国家/地区数组最好放在工厂中，而不是作为全局变量

然后，在工厂的函数

getData

中，不进行http调用，只需将数组传递给回调

工厂情况如下：

countryApp.factory('countries', function () {

    var countriesArray = [ ... ];

    function getData(callback) {
        return callback(countriesArray);
    }

    return {
        list: getData
    };
});

countries.list(function (countries) {
    $scope.countries = countries;
});

见

---

避免使用回调： 您以前的

getData

函数用于将结果传递给回调，来自控制器的调用如下：

countryApp.factory('countries', function () {

    var countriesArray = [ ... ];

    function getData(callback) {
        return callback(countriesArray);
    }

    return {
        list: getData
    };
});

countries.list(function (countries) {
    $scope.countries = countries;
});

但您可以尝试避免为此使用回调，而是使用thenable：

1） 注入

$q

作为工厂的依赖项

2） 将

getData

重写为：

function getData() {
    return $q.when(countriesArray);
}

注意

返回$q.when（countriesArray）

如果您不习惯，可能会显得有点棘手。但这并不难。这里我们字面上说的是“当countriesArray解决时返回”。由于countries数组不是异步的，我们可以立即返回，

$q。当

将对象包装成$q承诺时，调用方可以调用

getData

，如下所示：

getData。然后（…）

3） 现在，来自控制器的呼叫如下所示：

countries.list().then(function (countries) {
    $scope.countries = countries;
});

见

---

从本地json获取数据 如果您想从独立文件加载数据，而不是将数据放在工厂中（这将是一个很有价值的选择），则必须返回

$http

。您可以调用本地url，因此在未连接到internet的设备上运行该url绝对没有问题：

 function getData() {
    return $http.get('countries.json');
}

---

$http

返回一个承诺，因此对

getData

的调用保持不变：

getData。然后（…）

您忘记将$http服务注入countries工厂，这很可能是它不起作用的原因<代码>countryApp.factory（'countries'，函数（$http）{谢谢Michael的回复。这么快，这么详细，这么有教育意义。我现在正试图找到为什么列表模板有效，但是各个国家的页面返回的是大括号，而不是数据，但这已经远远超出了我在几个小时内所能得到的。非常感谢。这是因为我没有实现

查找国家/地区

工厂中使用ode>方法，因为这有点超出了问题的范围。感谢您提供的信息。我已尝试重新添加该方法，并考虑到您所说的避免回调。我更了解方法