个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 16:59:40 26 4
gpt4 key购买 nike

我正在尝试修改以下 Angular JS 示例，使其在未连接到 Internet 的设备上的文件夹中作为独立文件运行。 http://curran.github.io/screencasts/introToAngular/exampleViewer/#/44

我可以在过程结束时本地链接这两个库，而且我相信我已经正确引用了模板。我已经为 JSON 数据 (countriesArray) 创建了一个本地数组，但我不知道如何在没有 http 的情况下将其正确加载到国家工厂。我暂时使用了示例的 JSON URL，但代码肯定有另一个错误，因为它只显示一个空白屏幕。

抱歉我的无知。

<html ng-app="countryApp">
      <head>
        <meta charset="utf-8">
        <title>Angular.js Example</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
        <script>
          var countryApp = angular.module('countryApp', ['ngRoute']);
    	  var countriesArray = [
      {
        "name": "China",
        "population": 1359821000,
        "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
        "capital": "Beijing",
        "gdp": 12261
      },
      {
        "name": "India",
        "population": 1205625000,
        "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
        "capital": "New Delhi",
        "gdp": 4716
      },
      {
        "name": "United States of America",
        "population": 312247000,
        "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
        "capital": "Washington, D.C.",
        "gdp": 16244
      }
    ];
          countryApp.config(function($routeProvider) {
            $routeProvider.
              when('/', {
                template: '<ul><li ng-repeat="country in countries"><a href="#/{{country.name | encodeURI}}">{{country.name}}</a></li></ul>',
                controller: 'CountryListCtrl'
              }).
              when('/:countryName', {
                template: '<h1>{{country.name}}</h1><ul><li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li><li>Population: {{country.population | number }}</li><li>Capital: {{country.capital}}</li><li>GDP: {{country.gdp | currency }}</li></ul>',
                controller: 'CountryDetailCtrl'
              }).
              otherwise({
                redirectTo: '/'
              });
          });
    
          countryApp.factory('countries', function(){
            function getData(callback){
              $http({
                method: 'GET',
                url: 'http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot42/countries.json',
                cache: true
              }).success(callback);
            }
    
            return {
              list: getData,
              find: function(name, callback){
                getData(function(data) {
                  var country = data.filter(function(entry){
                    return entry.name === name;
                  })[0];
                  callback(country);
                });
              }
            };
          });
    
          countryApp.controller('CountryListCtrl', function ($scope, countries){
            countries.list(function(countries) {
              $scope.countries = countries;
            });
          });
    
          countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
            countries.find($routeParams.countryName, function(country) {
              $scope.country = country;
            });
          });
    
          countryApp.filter('encodeURI', function(){
            return window.encodeURI;
          });
        </script>
      </head>
      <body>
        <div ng-view>{{countries}}</div>
      </body>
    </html>

最佳答案

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

然后，在工厂的函数 getData 中，不进行 http 调用，而是将数组传递给回调。

工厂看起来如下:

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

    var countriesArray = [ ... ];

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

    return {
        list: getData
    };
});

参见 fiddle

避免使用回调:

您之前的getData 函数用于将结果传递给回调， Controller 的调用如下:

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

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

1) 注入(inject)$q作为你工厂的依赖

2) 将getData重写为:

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

注意 return $q.when(countriesArray) 如果您不习惯，可能看起来有点棘手。但这不是很困难。这里我们实际上是在说 “当 countriesArray 被解析时返回”。由于 countries 数组不是异步的，我们可以立即返回，并且 $q.when 将对象包装到 $q promise 中，因此调用者可以调用 getData 如下: getData.then(...)

3) 现在，来自 Controller 的调用如下所示:

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

参见 second fiddle

从本地json中获取数据

如果您想从独立文件加载数据而不是将它们直接放入工厂(这将是一个有值(value)的选择)，您将必须返回 $http。你会调用本地 url，因此在未连接到 internet 的设备上运行它绝对没有问题:

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

$http 返回一个 promise ，因此对 getData 的调用保持不变:getData.then(...)

关于javascript - 带有工厂的 Angular JS 作为本地文件，文件中包含 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29109315/

26 4 0
文章推荐： javascript - 如何使用函数来确定 Javascript 数组中是否存在值？
文章推荐： javascript - Odoo:使用支付收单方添加 Stripe
文章推荐： javascript - 如何添加基于多变量比较的ng-class？
文章推荐： javascript - 使用按钮添加到变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com