3

/api/session.json 呼び出しからデータを正常に取得し、コンソールに記録できます。

この API 呼び出しの出力を index.html ファイルに送信し、"Username" を置き換えるにはどうすればよいですか?

ありがとう！

私の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

一般的に言って、このロジックのすべてを1つのグロブ内に含めることはできません。JSのこの小さなセクションで何をしているのかを考えると、次のようになります。

  • モジュールの定義、
  • テンプレートおよびコントローラーとURLを照合し、
  • 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テンプレートには他の機能が必要になる場合があります）、最も重要なのは、さまざまな懸念事項が分離されていることです。

上記で変更したことについて質問がある場合は、お知らせください。

于 2013-02-09T13:37:47.950 に答える
1

渡してみてください$rootScope（技術的にはそこにいるため）、にユーザー名を割り当てます$rootScope。そのようなもの：

function($http, $rootScope) {
  $rootScope.username = "Foo";
}
于 2013-02-09T02:27:46.320 に答える
1 
$scope.username = data

あなたのjsファイルで。(データが返されると仮定します)

そしてhtmlでちょうど{{username}}

于 2013-02-09T01:38:56.357 に答える