Как получить данные через API с помощью Angular?

0

Сначала я пытаюсь настроить углы, чтобы получить список учетных записей из API и отобразить их в простом списке. Api находится в отдельном домене. До сих пор в моем приложении app.js

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
 }
 ]

Кажется, я не работаю. Все, что я получаю, это пустая страница, и консоль показывает эту ошибку в chrome:

'mainController()' is not a function, got undefined
  • 0
    Любая ошибка в консоли? Также вы используете последнюю версию angular ? Если это так, вам нужно внедрить зависимость ngRoute в ваше приложение. :)
  • 1
    Вы должны добавить $ http в качестве параметра в функцию в контроллере
Показать ещё 8 комментариев
Теги:

1 ответ

0

Вы должны выглядеть следующим образом: вы пропустили некоторые зависимости.

  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>
Поделиться
  • 0
    Консоль говорит: «mainController ()» не является функцией, получил неопределенный
  • 0
    Пожалуйста, следуйте plnkr.co/edit/sc1Paq?p=preview plunker

Ещё вопросы

Сообщество Overcoder
Наверх
Меню