如何通过使用Angular的API获取数据？

我第一次尝试从API获取帐户列表并将其显示在简单列表中。该API是在一个单独的域上。到目前为止，我有我的app.js如何通过使用Angular的API获取数据？

var myApp = angular.module("myApp", []); 

myApp.controller("myController", function($scope){ 
// when landing on the page, get all todos and show them 
$http.get('http://api.example.com/accounts') 
    .success(function(data) { 
     $scope.accounts = data; 
     console.log(data); 
    }) 
    .error(function(data) { 
     console.log('Error: ' + data); 
    }); 
});

以下内容，我的index.html

<!DOCTYPE html> 
<html> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="app/app.js"></script> 

<body ng-app="myApp" ng-controller="myController"> 
    <ul ng-repeat="account in accounts"> 
     <li > 
      {{ account.name }} 
     </li> 
    </ul> 
</body>

和样品响应。

[ 
    { 
"name": "Discover", 
"_id": "55d532da7fc30ff81f000008", 
"__v": 0 
}, 
{ 
"name": "Citi", 
"_id": "55d6b9967fc30ff81f000009", 
"__v": 0 
} 
]

我似乎没有得到它的工作。我得到的是一个空白页和控制台显示此错误中铬：

'mainController()' is not a function, got undefined

来源

2015-08-21 dikshant

在控制台中的任何错误？你是否也在使用最新版的'angular'？如果是这样，你需要在应用程序中注入'ngRoute'依赖项。 :) – AdityaParab

您应该添加$ http作为控制器中的函数控制器 – Ayoub

是的，我正在运行最新的角度。仍然找出错误日志，因为我切换到了新的IDE。 – dikshant

你控制器看起来应该如下：你已经错过了一些依赖。

myApp.controller("myController", function ($scope, $http) { 
    // when landing on the page, get all todos and show them 
    $http.get('http://api.example.com/accounts') 
     .success(function (data) { 
     $scope.accounts = data; 
     console.log(data); 
     }) 
     .error(function (data) { 
     console.log('Error: ' + data); 
     }); 
    });

如果您的应用程序和休息以及在不同的域中可能存在跨源请求问题。

让我知道浏览器控制台中的输出。

您的应用程序应该类似于如下：

/** 
    * @name myApp 
    * 
    * Lets create angular application module 
    * if second parameter is passed with enpty array [] or with dependecies , is * called angular module setter 
    * 
    * angular.module('myApp', []); Setter 
    * angular.module('myApp'); Getter 
    */ 
    angular 
    .module('myApp', []); 


    /** 
    * Lets create controlller 
    */ 
    angular 
    .module('myApp') 
    .controller('myController', ['MainFactory', '$scope', 
     function(MainFactory, $scope) { 

     getAllAcounts(); 

     function getAllAcounts() { 
      MainFactory.getAccounts().success(function(data) { 
      $scope.accounts = data; 
      console.log(data); 
      }).error(function(data) { 
      console.log('Error: ' + data); 
      }); 
     } 

     } 
    ]); 

    /** 
    * Lets create factory 
    */ 
    angular 
    .module('myApp') 
    .factory('MainFactory', ['$http', 
     function($http) { 
     var factory = factory || {}; 

     factory.getAccounts = function() { 
      return $http.get('http://api.example.com/accounts'); 
     }; 

     return factory; 
     } 
    ]);

HTML：

<!DOCTYPE html> 
    <html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> 

    <script src="app.js"></script> 
    </head> 

    <body ng-controller="myController"> 
    <ul ng-repeat="account in accounts"> 
     <li> 
     {{ account.name }} 
     </li> 
    </ul> 
    </body> 

    </html>

来源

2015-08-21 09:43:16

控制台说：'mainController（）'不是一个函数，得到undefined – dikshant

请按照http://plnkr.co/edit/sc1Paq?p=preview plunker –

如何通过使用Angular的API获取数据？

回答

相关问题