使用随机用户生成器创建具有angular.js的轮廓

Using Random User generator to create profiles with angular.js

本文关键字：angular js 轮廓 创建 随机 用户      更新时间：2024-07-04

我正在尝试使用RUG（随机用户生成器）API来完成这项工作，但我无法实现。我应该在点击事件后调用http请求，但它似乎不起作用。以下是我所做的（并为我的业余代码感到抱歉）：

index.html

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
    {{"Hello world"}}
    <div ng-controller="firstController">
        {{ store.email}}
    </div>

    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var app = angular.module('people', []);
app.controller('firsController', ["http",function (http) {
    var store = this;
    store.products = []; 

    $http.get('http://api.randomuser.me').success(function(data){
        store.products = data.results[0].user;
    })
}]);

或

var boton = document.getElementById('clk');
boton.addEventListener('click', function () {
    $.ajax({
      url: 'http://api.randomuser.me/',
      dataType: 'json',
      success: function(data){
        console.log(data.results[0].user);
      }
    });
});

这两者都不起作用。我能让它工作吗，点击一个按钮，从api加载一个新用户，并将其与angular一起使用吗？

这是使用$http服务和范围变量的正确方式。

<html ng-app="people">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('people', []);
        app.controller('firstController', ["$scope", "$http", function ($scope, $http) {
          $scope.store = {};
          $scope.store.products = []; 

          $http.get('http://api.randomuser.me').success(function(data){
              $scope.user = data.results[0].user;
          })
        }]);
      </script>
  </head>
  <body>
    <div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
    <div ng-controller="firstController">
        {{ user.email}}
    </div>
  </body>
</html>
相关文章：