AngularJS 访问本地 JSON 文件-JavaScript中文网-JavaScript教程资源分享门户

在使用 AngularJS 构建应用程序时，您可能需要从本地加载 JSON 数据。在这篇文章中，我们将探讨如何通过 AngularJS 从本地 JSON 文件中获取数据。

步骤

创建一个包含 JSON 数据的文件。例如，我们可以创建一个名为 data.json 的文件，并在其中添加以下内容：
```
{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}
```

在 HTML 文件中添加 <script> 标签来加载 AngularJS 和你的应用程序模块：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>

在 app.js 中定义一个控制器来获取 JSON 数据：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("data.json").then(function(response) {
        $scope.myData = response.data;
    });
});

在 HTML 文件中添加一个 div 来显示 JSON 数据：

<div ng-app="myApp" ng-controller="myCtrl">
  {{ myData }}
</div>

运行应用程序并检查控制台是否存在错误消息。如果一切正常，则应该看到 JSON 数据在页面上显示出来。

解释

在上述步骤中，我们首先创建了一个包含 JSON 数据的文件。然后，我们加载了 AngularJS 和应用程序模块，并在 app.js 中定义了一个控制器来获取 JSON 数据。

我们使用 $http.get() 方法从本地加载 JSON 文件。然后，我们将响应数据存储在 $scope.myData 变量中，以便我们可以在 HTML 文件中使用它。

最后，我们在 HTML 文件中使用 ng-controller 指令将控制器与视图绑定，并使用双括号语法 {{ }} 在页面上显示 JSON 数据。

结论

通过这篇文章，您学会了如何使用 AngularJS 从本地 JSON 文件中获取数据。这是非常有用的，因为它允许您轻松地将数据加载到您的应用程序中，而不需要远程服务器和数据库。

请注意，虽然在本地加载 JSON 文件可能是很好的开发实践，在实际生产环境中，您可能需要将数据存储在服务器上，并通过 RESTful API 从客户端获取数据。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29692