ログインページを作成するには、より良い方法です。

Question

私は角度jを初めて使用しています。これが私の最初の基本的なステップです。私はアクセスするための簡単なログインページを作成しました。私が直面している問題は、login()ボタンをクリックしたときに、フォーム（）が送信されず、無効なユーザー名とパスワードが表示されます。他のブログも検索しました。しかし、私は正しく理解していません。

HTML：：

<div class="package" ng-controller="credientials"> 
    <form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid"> 
     <label form="emailinput">Email</label> 
     <input type="text" class="form-control ng-pristine ng-valid" ng-model="username"> 
     <label form="pwdinput">Password</label> 
     <input type="password" class="form-control ng-pristine ng-valid" ng-model="password"> 
    <div> 
     <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button> 
     <button class="btn btn-primary" ng-click="">Login</button> 
    </div><br/> 
     <span class="text-danger">{{ error }}</span> 
    </form> 

角度JS：あなたはスコープにユーザ名とパスワードを配置する必要があり

var app = angular.module('logapp',['ngRoute']); 
app.config(function($routeProvider){ 
      $routeProvider 
       .when('/login',{ 
        templateUrl : "login.html", 
        controller : "loginctrl" 
       }) 
       .when('/home',{ 
        templateUrl : "home.html", 
        controller : "homectrl" 
       }); 
      $routeProvider.otherwise({ redirectTo: '/login'}); 
     }); 

app.controller('credientials',['$scope','$route','$http','$window',function($scope,$route,$http,$window){ 
    $scope.templates = 
       [ 
        { url: 'login.html' }, 
        { url: 'practice.html'} 
       ]; 
        $scope.template = $scope.templates[0]; 
        $scope.loginform = function (username, password) { 
       if (username === 'admin' && password === '1234') { 
        authentication.isAuthenticated = true; 
        $scope.template = $scope.templates[1]; 
        $scope.user = username; 
       } else { 
        $scope.error = "Invalid username and password"; 
       }; 
       }; 
     app.factory('authentication', function() { 
       return { 
       isAuthenticated: false, 
       user: null 
       } 
     }); 

    }]); 

Answer 1

を検討すべきです。

app.controller('credientials',['$scope','$route','$http','$window',function($scope,$route,$http,$window,authentication){ 

と

は、私はあなたのコードhere

を変更している真のだろう、あなたのユーザ名とパスワード

$scope.username === 'admin' && $scope.password === '1234' 

の$スコープを使用する必要があり、その後、あなたは工場であなたの変数にisAuthenticatedが表示されます

Answer 2

は、以下の私のコードがあります。 多分これは良い仕事します：

$scope.username = ""; 
$scope.password = ""; 
$scope.loginform = function() { 
if ($scope.username === 'admin' && $scope.password === '1234') { 

あなたは本当にあなたのコントローラに工場「認証」を注入するのを忘れて、このチュートリアル
https://docs.angularjs.org/tutorial