Question

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

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

谢谢！

这是我的角度应用程序的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 fiile：

<!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>

Answer 1

$scope.username = data

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

并在html中执行{{username}}

Answer 2

尝试传递$rootScope（因为这是技术上的位置），然后在$rootScope上分配用户名。像这样：

function($http, $rootScope) {
  $rootScope.username = "Foo";
}

Answer 3

一般来说，你不会在一个glob中拥有所有这些逻辑。当你想到你在JS的这一小部分中所做的事情时，你就是：

定义模块，
将网址与模板和控制器匹配，
发出GET请求，
（登录用户？），
尝试在HTML

如果出于特定目的，最好将其分成块。

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

的index.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
  };
}]);

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

让我们回到Navbar控制器。

脚本/控制器/ Navbar.js

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

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

在您配置User服务以使用应用程序自己的用户处理流程后，您的应用程序将处于更有利的位置。您不必弄乱$rootScope，您的模板可以绑定到控制器（可能Navbar模板需要一些其他功能），最重要的是，您的不同关注点已被分开。< / p>

如果您对我上面所做的任何事情有任何疑问，请与我联系！

将变量从app.js传递给index.html

3 个答案:

的index.html

脚本/控制器/ Navbar.js

脚本/服务/ user.js的

脚本/控制器/ Navbar.js