javascript - 使用 $http 从本地 json 文件获取值的另一种方法

Question

我想从本地存储的国家/地区 json 文件加载国家/地区列表。我已将该文件包含在 index.html 中，如下所示:

<!-- Including Json -->
<script src="json/countries.json"></script>

Json文件保存在json文件夹中，名称为country.json，文件内容如下:

[  
   {  
      "country_id":"1",
      "country_name":"Afghanistan"
   },
   {  
      "country_id":"2",
      "country_name":"Albania"
   },
   {  
      "country_id":"3",
      "country_name":"Algeria"
   },
   {  
      "country_id":"4",
      "country_name":"American Samoa"
   },
   {  
      "country_id":"5",
      "country_name":"Andorra"
   },
   {  
      "country_id":"6",
      "country_name":"Angola"
   },
   {  
      "country_id":"7",
      "country_name":"Anguilla"
   },
   {  
      "country_id":"8",
      "country_name":"Antarctica"
   },
   {  
      "country_id":"9",
      "country_name":"Antigua and Barbuda"
   },
   {  
      "country_id":"10",
      "country_name":"Argentina"
   },
   {  
      "country_id":"11",
      "country_name":"Armenia"
   },
   {  
      "country_id":"12",
      "country_name":"Aruba"
   },
   {  
      "country_id":"13",
      "country_name":"Australia"
   },
   {  
      "country_id":"14",
      "country_name":"Austria"
   },
   {  
      "country_id":"15",
      "country_name":"Azerbaijan"
   },
   {  
      "country_id":"16",
      "country_name":"Bahamas"
   },
   {  
      "country_id":"17",
      "country_name":"Bahrain"
   },
   {  
      "country_id":"18",
      "country_name":"Bangladesh"
   },
   {  
      "country_id":"19",
      "country_name":"Barbados"
   },
   {  
      "country_id":"20",
      "country_name":"Belarus"
   },
   {  
      "country_id":"21",
      "country_name":"Belgium"
   },
   {  
      "country_id":"22",
      "country_name":"Belize"
   },
   {  
      "country_id":"23",
      "country_name":"Benin"
   },
   {  
      "country_id":"24",
      "country_name":"Bermuda"
   }
]

仅举几个国家。

我可以成功解析数据并将其从我的 Controller 填充到 UI，按照建议引用 Angular 的 $htttp.get() 服务 by @jaime :

     //Getting the base url inorder to tell app where to find countries json
     var baseUrl = $location.absUrl().substring(0, $location.absUrl().indexOf('www')); 

                    //Fetching the countries Json
                    return $http.get(baseUrl+'www/json/countries.json')

                    //On Fetching the countries lsit
                    .then( function(response){
                        $scope.countryList =  response.data;
                    });

毫无疑问，它运作良好。但是还有其他替代方案来实现此功能吗？不使用 $http.get()？我遇到了angular.fromJson() ，但它不会解析文件路径，因为它要求它的参数是 json 对象。我还遇到了使用 jquery 的替代方案，如https://stackoverflow.com/a/12091134/1904479 。是否有任何其他替代方案不需要 jquery，而是使用 Angular 或 ionic 代码？

Answer 1

实际上，我们可以通过在常量文件中将其声明为:

步骤 1) 创建文件 constants.js 并将 json 对象添加到其中:

var ConstantsCountries  =  [  
       {  
          "country_id":"1",
          "country_name":"Afghanistan"
       },
       {  
          "country_id":"2",
          "country_name":"Albania"
       },
       {  
          "country_id":"3",
          "country_name":"Algeria"
       },
       {  
          "country_id":"4",
          "country_name":"American Samoa"
       },
       {  
          "country_id":"5",
          "country_name":"Andorra"
       },
       {  
          "country_id":"6",
          "country_name":"Angola"
       },
       {  
          "country_id":"7",
          "country_name":"Anguilla"
       },
       {  
          "country_id":"8",
          "country_name":"Antarctica"
       },
       {  
          "country_id":"9",
          "country_name":"Antigua and Barbuda"
       },
       {  
          "country_id":"10",
          "country_name":"Argentina"
       },
       {  
          "country_id":"11",
          "country_name":"Armenia"
       },
       {  
          "country_id":"12",
          "country_name":"Aruba"
       },
       {  
          "country_id":"13",
          "country_name":"Australia"
       },
       {  
          "country_id":"14",
          "country_name":"Austria"
       },
       {  
          "country_id":"15",
          "country_name":"Azerbaijan"
       },
       {  
          "country_id":"16",
          "country_name":"Bahamas"
       },
       {  
          "country_id":"17",
          "country_name":"Bahrain"
       },
       {  
          "country_id":"18",
          "country_name":"Bangladesh"
       },
       {  
          "country_id":"19",
          "country_name":"Barbados"
       }
    ]

第 2 步:将 js 文件包含在 index.html 中，如下所示:

<!-----Constants Classes---->
    <script src="Constants/Constants.js"></script>

第 3 步:在 Controller 中将其用作:

.controller('CountriesCtrl', function ($localStorage,$rootScope,$location,$ionicLoading,$ionicHistory,$timeout) { 
    $scope.countries = ConstantsCountries;
    console.log(angular.toJson($scope.countries));
}))