在前端开发中，我们常常需要使用 JSON 文件作为数据源。而在 AngularJS 中，调用本地 JSON 文件也很常见，特别是在开发 SPA（单页面应用）时。
本文将介绍如何使用 AngularJS 调用本地 JSON 文件，并给出详细的示例代码，让读者能够直接进行实践。
1. 使用 $http.get 方法调用本地 JSON 文件
AngularJS 内置了 $http 服务，我们可以使用它的 get 方法来获取本地 JSON 文件中的内容。代码示例如下：
angular.module('myApp', [])
.controller('myCtrl', ['$http', function($http) {
$http.get('data.json').then(function(response) {
console.log(response.data);
// do something with the data
})
}]);在上面的代码中，首先我们用 angular.module 定义了一个名为 myApp 的 AngularJS 模块，然后定义了名为 myCtrl 的控制器。
在控制器中，我们注入了 $http 服务，在调用 get 方法时传入了需要获取的 JSON 文件路径（这里假设是 data.json）。当调用成功后，then 方法的回调函数中就能获取到 JSON 文件中的内容了。
需要注意的是，$http.get 方法返回的并不是文件名，而是一个 Promise 对象。因此，我们需要在获取到数据后使用 response.data 来获取到 JSON 文件中的内容。
2. 将 JSON 数据存入 $scope 中
获取到本地 JSON 文件中的内容后，我们一般需要将其存入 $scope 对象中，以便在 HTML 中使用。
示例代码如下：
angular.module('myApp', [])
.controller('myCtrl', ['$http', '$scope', function($http, $scope) {
$http.get('data.json').then(function(response) {
$scope.data = response.data;
})
}]);在上面的代码中，我们在控制器中注入了 $scope 对象，并将获取到的 JSON 数据存入了 $scope.data 中。这样，在 HTML 中就可以使用 {{ data }} 来引用 JSON 数据了。
3. 处理获取失败的情况
在实际开发中，我们还需要处理获取本地 JSON 文件失败的情况。在 $http.get 方法中，可以使用 catch 方法来处理失败的情况。
示例代码如下：
angular.module('myApp', [])
.controller('myCtrl', ['$http', '$scope', function($http, $scope) {
$http.get('data.json').then(function(response) {
$scope.data = response.data;
}).catch(function(response) {
console.log('Error: ' + response.status);
});
}]);在上面的代码中，我们使用 catch 方法来处理获取失败的情况。在回调函数中，我们打印了错误状态码，并且可以根据实际情况进行相应的处理。
4. 总结
通过本文的介绍，我们学习了如何在 AngularJS 中调用本地 JSON 文件，并将数据存入 $scope 对象中。同时，我们也讨论了处理获取失败的情况的方法。
在实际开发中，我们可以根据实际需求在此基础上进行扩展。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b84ab95b1f8cacd32a755