AngularJS - 使用带有 JSON 文件的即时搜索

Question

我刚刚开始使用 AngularJS，并一直在尝试“即时搜索”模块。我不想将 .json 数据硬编码到控制器中，而是使用 AJAX 调用来获取单独的 .json 文件。

带有硬编码项的 Angular 即时搜索控制器 Javascript 代码：

function InstantSearchController($scope){

$scope.items = [
    {
        url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
        title: '50 Must-have plugins for extending Twitter Bootstrap',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'          
    },
    {
        url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
        title: 'Making a Super Simple Registration System with PHP and MySQL',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
    },
    {
        url: 'http://tutorialzine.come/2013/08/slideout-footer-css/',
        title: 'Create a slide-out footer with this neat z-index trick',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
    },
    {
        url: 'http://tutorialzine.com/2013/06/digital-clock/',
        title: 'How to Make a Digital Clock with jQuery and CSS3',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
    }


];


}

我想将“$scope.items”替换为对 .json 文件的 AJAX 调用。我知道这涉及使用 $http' 作为参数，但不确定如何正确进行此调用。

Answer 1

Angular 拥有出色的文档，包括完整的 API 参考和包含工作示例的演练教程。

在此处查看$http 的文档：

• https://docs.angularjs.org/api/ng/service/$http

以及如何在此处的示例应用程序中使用它：

• https://docs.angularjs.org/tutorial/step_05#controller

基本上，您使用 $http 的代码看起来像：

$scope.items = $http.get('path/to/your.json').success(function(data) {
  $scope.items = data;
});