0

これが私のapp.jsで、この特定のユーザー名とパスワードが入力されているかどうかを確認するサービスを作成し、ログインを行い、ページをhome.htmlにリダイレクトする必要があることを確認します。その特定のサービスを呼び出す方法を取得できませんコントローラーに入れ、サービスを正しく作成したかどうか。

また、両方のフィールドが空であってはならないことを確認する必要があります。空の送信ボタンが無効になる必要があります。

 app.js 

    // create angular app
    var validationApp = angular.module('validationApp',['ngRoute']);
    validationApp.config(
        function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'main.html',
                    controller: 'mainController'
                })
                .when('/home', {
                    templateUrl: 'home.html',
                    controller: 'mainController'
                })
                .otherwise({
                    redirectTo: '/main.html'
                });
        });

    validationApp.service('loginservice',function()
    {
        this.login = function($scope,$location){
            var username = $scope.user.email;
            var password = $scope.user.password;
            if(username == "ank@gmail.com" && password=="1234")
            {
                if ($scope.userForm.$valid) {
                    alert('thank you for submitting your form');
                    $location.path("/home");

                }

            }
            else
            {
                alert("invalid username and password");
            }
        }
    });


    // create angular controller
    validationApp.controller('mainController', function($scope,loginservice) {

    $scope.dologin = loginservice.login();


    });

//これが私のindex.htmlページです

<body>
<div  ng-app="validationApp">
   <ng-view></ng-view>

</body>

// ここに私の main.html ページがあります

main.html

<div class="container">
    <div class="row">
        <div>
            <form name="userForm" method="post" ng-submit="dologin()" novalidate>
                <h1>Login Form</h1>
                <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" ng-model="user.email" value="ank@gmail.com">
                    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
                </div>

                <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
                    <label>Password</label>
                    <input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
                    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
                </div>
                <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
                <button ng-model="button" ng-disabled="checked">Button</button>
                <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid" >Submit</button>

            </form>
        </div>

    </div>
</div>
4

2 に答える 2

0

最初に、ルートの resolve パラメータを使用してアクセスを禁止することを検討できます。この場合、promise を呼び出す必要があります。約束が解決アクセスが許可され、$routeChangeSuccess イベントが発生した場合、そうでない場合は、$routeChangeError イベントをリッスンしている別のページにリダイレクトできます。ドキュメントを参照

そうするために、次のようなことをして、ログイン サービスから promise を返すことができます。

validationApp.service('loginService',function($q)
{
    var defer = $q.defer();
    this.login = function(username,password){

        if(username == "ank@gmail.com" && password=="1234")
        {
            defer.resolve({username:username});
        }
        else
        {
            defer.reject({error:"invalid username and password"});
        }
    }

    return defer.promise;
});

そしてあなたのルートで：

.when('/home', {
    templateUrl: 'home.html',
    controller: 'mainController',
    resolve : {
        username : function(loginService){
                return loginService.login(username,password);
            }
        }
})
于 2015-06-09T08:39:37.743 に答える
0

これが機能するかどうかを確認し、

validationApp.service('loginservice',function()
{
    this.login = function(username, password){
        if(username == "ank@gmail.com" && password=="1234")
        {
             alert('thank you for submitting your form');
             $location.path("/home");
        }
        else
        {
            alert("invalid username and password");
        }
    }
});

コントローラーで

validationApp.controller('mainController', function($scope,loginservice) {

 //$scope.dologin = loginservice.login();
   $scope.dologin = function () {
       if ($scope.userForm.$valid) {
            loginservice.login($scope.user.email, $scope.user.password);
        }
   }
});
于 2015-06-09T09:55:14.850 に答える