3

我可以成功地从 /api/session.json 调用中获取数据并将其记录到我的控制台。

如何将此 api 调用的输出发送到我的 index.html 文件并替换“用户名”？

谢谢！

这是我的 Angular 应用程序的 app.js 文件：

'use strict';

var staticApp = angular.module('staticApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }])
  .run( function($http) {
    $http.defaults.useXDomain = true;     

    // API CALL
    $http({method: 'GET', url: '/api/session.json'}).
      success(function(data, status, headers, config) {

        // THIS WORKS!!
        // MY CONSOLE SHOWS THIS:
        // Object {user: "devuser"}

        console.log(data); 

      }).
      error(function(data, status, headers, config) {
        console.log(status);
      });
  });

这是我的 index.html 文件：

<!DOCTYPE html>  
  <head>
    <!-- meta and css stuff -->
  </head>
  <body ng-app="staticApp">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" 
                  class="btn btn-navbar" 
                  data-toggle="collapse" data-target=".nav-collapse">
          </button>
          <a class="brand" href="/">MyApp</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">

              <!-- I WANT Username TO BE THE VALUE RETURNED FROM THE API CALL -->

              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container" ng-view></div>

    <script src="scripts/vendor/angular.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
  </body>
</html>
4

3 回答 3

1

一般来说，您不会在一个全局中拥有所有这些逻辑。当您考虑在 JS 的这个小部分中所做的事情时，您会：

  • 定义一个模块，
  • 将 URL 与模板和控制器匹配，
  • 发出 GET 请求，
  • （登录用户？），
  • 试图在 HTML 中显示用户名

你最好把它分成几块，有特定的目的。

让我们考虑一下您要完成的工作：您希望导航栏了解用户。对我来说，这听起来像是一个使用控制器的机会。

索引.html

<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="Navbar">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button type="button" 
              class="btn btn-navbar" 
              data-toggle="collapse" data-target=".nav-collapse">
      </button>
      <a class="brand" href="/">MyApp</a>
      <div class="nav-collapse collapse">
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">{{username}}</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

脚本/控制器/Navbar.js

staticApp.controller('Navbar', ['$scope', function ($scope) {
    $scope.username = 'Username!';
}]);

现在，我们可以提供一个用户名来$scope匹配Navbar模板（div.navbar这里）。当然，这并不是那么有用，因为Username!可能不是每个人的用户名。

所以，现在我们的问题是：我们可以将处理从服务器登录用户的代码放在哪里？

完美的地方就是服务。

脚本/服务/User.js

staticApp.factory('User', ['$http', function ($http) {
  var User;

  var setUser = function (user) {
    if (angular.isObject(user))
      User = user;
  };

  var getUser = function () {
    if (angular.isObject(User))
      return User;
  };

  var logIn = function (username, password) {
    // $http call that validates the username and password.
    setUser({ user: username });
  };

  return {
    logIn: logIn,
    getUser: getUser
  };
}]);

可以编辑此控制器中的逻辑以匹配您的流程，但以这种方式保持模块化并不是一个坏主意。公开logInandgetUser方法应该是您的控制器所需要的。

让我们回到Navbar控制器。

脚本/控制器/Navbar.js

staticApp.controller('Navbar', ['$scope', 'User', function ($scope, User) {
    var user = User.getUser();

    $scope.username = user.username;
}]);

在您将User服务配置为与您的应用程序自己的用户处理流程一起使用后，您的应用程序将处于更好的发展位置。您不必搞砸$rootScope，您的模板可以绑定到控制器（也许Navbar模板需要一些其他功能），最重要的是，您的不同关注点已经分开。

如果您对我上面所做的任何更改有任何疑问，请告诉我！

于 2013-02-09T13:37:47.950 回答
1 
$scope.username = data

在你的 js 文件中。（假设数据是返回的）

并在 html 中做{{username}}

于 2013-02-09T01:38:56.357 回答
1

尝试传入$rootScope（因为这是您在技术上所处的位置），然后在$rootScope. 像这样：

function($http, $rootScope) {
  $rootScope.username = "Foo";
}
于 2013-02-09T02:27:46.320 回答