$http.postについて

[Leo Azuki]

今認証を作っているのですが、ログイン画面でemailとpasswordを入れてログインボタンを押したら、angularJSのコントローラが$http.postをサーバーに送信しログイン結果を受け取るような作りを目指しているのですが、なぜかフォームのgetメソッドが走ります。

1. ログイン画面を表示してemailとpasswordを入力する。URLは以下の通り

http://localhost:3000/#/extra-signin

2.ログインボタンを押下する

3.無事にログイン結果がサーバーから帰ってくることを期待しているのですが何故か以下のようなurlになってログイン画面も画面遷移せずそのままです。

http://localhost:3000/?email=test%40test.com&password=test#/extra-signin

そもそもgetで送られているのもよくわからないのですが、urlがhttp://localhost:3000/#/extra-signin?email=test%40test.com&password=test　ではなく　http://localhost:3000/?email=test%40test.com&password=test#/extra-signinとなっているのも原因がわかりません。

angularJSのコントローラ

App.controller('ExtraSigninController', function($scope, $routeParams, $http, $location, $rootScope, $alert, $window) {
    $scope.login = function() {
        $http.post('/users/session',$scope.user)
        .success(function(data) {
            $window.localStorage.token = data.token;
            var payload = JSON.parse($window.atob(data.token.split('.')[1]));
            $rootScope.currentUser = payload.user;
            $location.path('/');
            $alert({
                title: 'Cheers!',
                content: 'You have successfully logged in.',
                animation: 'fadeZoomFadeDown',
                type: 'material',
                duration: 3
            });
        })
        .error(function() {
            delete $window.localStorage.token;
            $alert({
                title: 'Error!',
                content: 'Invalid username or password.',
                animation: 'fadeZoomFadeDown',
                type: 'material',
                duration: 3
            });
        });
    }
}

ルーティング

App.config(function($routeProvider, $locationProvider) {
    $routeProvider        
    .when('/extra-signup', {
        templateUrl: 'templates/states/extra-signup.html',
        controller: 'ExtraSignupController'
    })
    .when ....
    .when ....
    .otherwise({
        redirectTo: '/'
    });
});

サーバーサイド

app.post('/users/session', passport.authenticate('local'));

//passport local strategy
passport.use(new LocalStrategy({
    usernameField: 'email',
    passwordField: 'password'
  },
  function(email, password, done) {
    db.User.find({ where: { email: email }}).success(function(user) {
      if (!user) {
        // done(null, false, { message: 'Unknown user' });
        res.send(401, 'User does not exist');
      } else if (!user.authenticate(password)) {
        // done(null, false, { message: 'Invalid password'});
        res.send(401, 'Invalid email and/or password');
      } else {
        logger.debug('Login (local) : { id: ' + user.id + ', username: ' + user.username + ' }');
        // done(null, user);
        var token = createJwtToken(user);
        res.send({ token: token });
      }
    }).error(function(err){
      done(err);
    });
  }
));

フォームの中身

<div id="signin-page">
  <div class="page-form-wrapper"></div>
  <div class="page-form">

      <div class="header-content">
        <h1>login</h1>
      </div>
      <div class="body-content">
        <p>login:</p>
        <div class="row mbm text-center">
          <div class="col-md-4"><a href="/auth/twitter" target="_self" class="btn btn-sm btn-twitter btn-block"><i class="fa fa-twitter fa-fw"></i>Twitter</a></div>
          <div class="col-md-4"><a href="/auth/facebook" target="_self" class="btn btn-sm btn-facebook btn-block"><i class="fa fa-facebook fa-fw"></i>Facebook</a></div>
          <div class="col-md-4"><a href="/auth/google" target="_self" class="btn btn-sm btn-google-plus btn-block"><i class="fa fa-google-plus fa-fw"></i>Google +</a></div>
        </div>
        <form class="form">
        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-user"></i>
            <input type="text" placeholder="Email" name="email" ng-model="user.email" class="form-control input-lg" required autofocus/>
          </div>
        </div>
        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-key"></i>
            <input type="password" placeholder="password" name="password" mg-model="user.password" class="form-control input-lg" required/>
          </div>
        </div>
        <div class="form-group pull-right">
          <input type="submit" class="btn btn-success" ng-click="login()" value="login">
        </div>
        </form>
      </div>
  </div>
</div>

いろいろと調べてみたのですが、よく原因がわからなかったのでこちらに質問させて頂きました。

もしアドバイスがございましたら、ありがたいです。

[Tessei Yoshida]

吉田です。

formを$http.postで送る場合はng-clickではなくてng-submitにしないと、通常のform処理が作動してしまいます。

https://docs.angularjs.org/api/ng/directive/ngSubmit

ng-clickでしたい場合は$eventを引数にpreventDefaultを呼ぶのでもいいですけれど、formを使うのであればng-submitがいいと思います。

--
このメールは Google グループのグループ「AngularJS Japan User Group」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには angularjs-jp...@googlegroups.com にメールを送信してください。
このグループに投稿するには angula...@googlegroups.com にメールを送信してください。
このディスカッションをウェブ上で閲覧するには https://groups.google.com/d/msgid/angularjs-jp/39f02daf-ea1d-462f-99f8-8aa5df74d673%40googlegroups.com にアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

--

Opera のメールクライアント: http://jp.opera.com/mail/

[Leo Azuki]

吉田さん　お返事ありがとうございます。

フォームの中身をng-clickからng-submitに変えてみたんですが、やはり結果は同じでgetで送られているようです。

修正したフォーム

<div id="signin-page">
  <div class="page-form-wrapper"></div>
  <div class="page-form">

      <div class="header-content">
        <h1>login</h1>
      </div>
      <div class="body-content">
        <p>login:</p>
        <div class="row mbm text-center">
          <div class="col-md-4"><a href="/auth/twitter" target="_self" class="btn btn-sm btn-twitter btn-block"><i class="fa fa-twitter fa-fw"></i>Twitter</a></div>
          <div class="col-md-4"><a href="/auth/facebook" target="_self" class="btn btn-sm btn-facebook btn-block"><i class="fa fa-facebook fa-fw"></i>Facebook</a></div>
          <div class="col-md-4"><a href="/auth/google" target="_self" class="btn btn-sm btn-google-plus btn-block"><i class="fa fa-google-plus fa-fw"></i>Google +</a></div>
        </div>

        <form class="form" ng-submit="login()">

        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-user"></i>
            <input type="text" placeholder="Email" name="email" ng-model="user.email" class="form-control input-lg" required autofocus/>
          </div>
        </div>
        <div class="form-group">
          <div class="input-icon right"><i class="fa fa-key"></i>
            <input type="password" placeholder="password" name="password" mg-model="user.password" class="form-control input-lg" required/>
          </div>
        </div>
        <div class="form-group pull-right">

          <input type="submit" class="btn btn-success" value="login">

        </div>
        </form>
      </div>
  </div>
</div>

2014年10月4日土曜日 15時59分23秒 UTC+9 Tessei Yoshida:

[佐川夫美雄]

佐川と申します

こんばんわ

モジュールの依存関係でコンソールにエラーが出ていませんか？

モジュールがエラーになるとフォームのサブミットをAngularJSがオーバライドしませんので

結果としてformタグのリクエストが実行されます。

2014/10/04 17:48、Leo Azuki <azuk...@gmail.com> のメール：

このディスカッションをウェブ上で閲覧するには https://groups.google.com/d/msgid/angularjs-jp/c492e21c-5b38-429f-a6ee-a44efdacf468%40googlegroups.com にアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

[Tessei Yoshida]

吉田です。

こちらで簡単にテストしたらpost呼ばれました。

http://plnkr.co/edit/q6cA4dbhF6HGfNJysTDH?p=preview

一度、ng-appやng-controllerがしっかり読み込まれているか確認してもらってもいいですか？

このディスカッションをウェブ上で閲覧するには https://groups.google.com/d/msgid/angularjs-jp/c492e21c-5b38-429f-a6ee-a44efdacf468%40googlegroups.com にアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

[Leo Azuki]

佐川さん　お返事ありがとうございます。

コンソールを確認致しましたところ、おっしゃる通りエラーが出ておりました。

このエラーが原因でAngularJSのコントローラーが呼ばれなかったようですね。

勉強になります。

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) (index):1

Uncaught TypeError: Cannot read property 'Constructor' of undefined lib.js:65919

Uncaught Error: Syntax error, unrecognized expression: ./ lib.js:410

'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).

on_content_end ==>response to loadPagePattern, href=http://localhost:3000/#/, pattern.id=undefined on_content_end.js:54

before call TMExt.initTooltip on_content_end.js:78

after call TMExt.initTooltip on_content_end.js:84

GET http://localhost:3000/js/toastr.min.js.map 404 (Not Found) :3000/js/toastr.min.js.map:1

Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-rc.2/$injector/unpr?p0=%24alertProvider%20%3C-%20%24alert

    at Error (native)

    at http://localhost:3000/js/lib.js:13:421

    at http://localhost:3000/js/lib.js:44:408

    at Object.d [as get] (http://localhost:3000/js/lib.js:42:430)

    at http://localhost:3000/js/lib.js:44:480

    at d (http://localhost:3000/js/lib.js:42:430)

    at e (http://localhost:3000/js/lib.js:43:185)

    at Object.instantiate (http://localhost:3000/js/lib.js:43:344)

    at http://localhost:3000/js/lib.js:79:460

    at link (http://localhost:3000/js/lib.js:277:268) <div ng-view="" class="page-content ng-scope"> lib.js:105

GET http://swlabs.co/madmin/code/style2/images/bg/1.jpg 404 (Not Found) lib.js:5

2014年10月4日土曜日 17時53分11秒 UTC+9 Fumio SAGAWA:

    db.User.find({ where:<span style="backgr

...

[佐川夫美雄]

やはり、ですね

解決できて何よりです  :-)

2014/10/04 18:18、Leo Azuki <azuk...@gmail.com> のメール：

--
このメールは Google グループのグループ「AngularJS Japan User Group」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには angularjs-jp...@googlegroups.com にメールを送信してください。
このグループに投稿するには angula...@googlegroups.com にメールを送信してください。

このディスカッションをウェブ上で閲覧するには https://groups.google.com/d/msgid/angularjs-jp/3f697a8c-c952-495a-8f8d-e1dab089b780%40googlegroups.com にアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout にアクセスしてください。

[Leo Azuki]

吉田さん　テストをしていただきどうもありがとうございました。

はい、おっしゃられる通り、どうやらファイルがうまく読み込まれていなくて動いていなかったようです。

佐川さんに指摘していただきました通り、コンソールを見ましたらエラーがでておりました。

これらのエラーをなくせば、うまく動くのではないかと思っております。

2014年10月4日土曜日 18時10分55秒 UTC+9 Tessei Yoshida:

    db.User.find({ where: { email: email }}).success(function<span style="background:tran

...