1

AngularJs/Bootstrap でプロトタイプを作成し始めたところです。私はAngularを初めて使用しますが、今後のWebプロジェクトを評価するのに十分興味深いようです。ステップ 1 は、単純なログインフォームを取得して、ハードコードされた値を操作し、バックエンド サービスとの通信を気にしないようにすることです。

しかし、私はたくさんのチュートリアルを読みましたが、ルーティングを機能させることができません。謎の変数 $location は、何度渡しても常に定義されていません。使い方が古いのではないでしょうか？このサイトの例をいくつか試しましたが、どれもうまくいきません。私が試した最後の例：

angular.module('myApp.controllers', []).
controller('loginController', ['$scope', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

別のパーシャルへのルーティングを使用するフォームとコントローラーの簡単で実用的な例 (または信頼できる情報源の URL) があれば、私は喜んでいます。

よろしく

4

2 に答える 2

8

私は同じ問題に苦労してきました。この質問を投稿しました。答えはいくつかの光を当てます。その後、ユーザーにログインを強制することができました。そうして初めて、ユーザーはナビゲーションバーの他のリンクにアクセスできるようになります。次に、ログイン画面にナビゲーションバーが表示されるという問題がありました。だから私は回避策を作成しました：

1）ページを分割しました：使用すると、デフォルトng-includeでロードできました。ありません。login.htmllogin.htmlindex.htmlng-view

2) ユーザーが認証されたらng-view、ナビゲーションで必要なすべてのビューが機能するように含める必要があります。

index.html

   <html ng-app="plunker">

      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link rel="stylesheet" href="style.css" />
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="app.js"></script>
      </head>

      <body ng-controller="AppCtrl">
        <div ng-include="template.url"></div>
      </body>

</html>

login.html

<h1>Login Page</h1>

<form ng-submit="login(username, password)">
  <label>User name</label>
  <input type="text" ng-model="username" class="ng-pristine ng-valid">
  <label>Password</label>
  <input type="password" ng-model="password" class="ng-pristine ng-valid">
  <br/>
  {{loginError}}  {{loggedUser}}
  <br/><br/>
  <button class="btn btn-success" ng-click="">Submit</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>

次に、認証が成功したら、テンプレート ( ng-include) を変更しhome.html、既定のページを作成します。

app.controller('AppCtrl', function($scope, authentication) {
  $scope.templates =
  [
    { url: 'login.html' },
    { url: 'home.html' }
  ];
    $scope.template = $scope.templates[0];
  $scope.login = function (username, password) {
    if ( username === 'admin' && password === '1234') {
        authentication.isAuthenticated = true;
        $scope.template = $scope.templates[1];
        $scope.user = username;
    } else {
        $scope.loginError = "Invalid username/password combination";
    };
  };

};

Home.html にはng-view通常の機能があり、ユーザーは他のページにアクセスできます。

これは私がこれまでに持っているものです。ここに実例があります。お役に立てば幸いです。

于 2013-11-12T09:11:08.933 に答える
2

これはうまくいきます：

controller('loginController', ['$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) {
      $scope.auth = function() {
          //check something useful
          $location.url('/view2');
      };
}])

コントローラーに挿入する各リソースは、配列内の文字列として渡す必要があります。

于 2013-11-12T09:02:38.323 に答える