로그인 페이지를 만드는 더 좋은 방법

저는 각도 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 
       } 
     }); 

    }]);

출처

2017-10-03 SRK

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

@ VolkanAkınPaşa를 사용하십시오. 방금 코드를 시도했지만 ** 인증 **은 정의되지 않았습니다. – SRK

함수를 통해 인증을 통과합니다. 하지만 여전히 오류가 발생했습니다 – SRK

을 고려해야합니다.

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

및

내가 코드 here

을 변경 한 사실이 될 것입니다 당신은 사용자 이름과 비밀번호

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

을 위해 $ 범위를 사용해야합니다 다음은 공장에서 변수 IsAuthenticated는 표시됩니다

출처

2017-10-03 12:13:59

다음은 내 코드가있다. 은 어쩌면이 더 잘 작동합니다 :

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

당신은 정말 당신은 당신의 컨트롤러에 공장 '인증'을 주입하는 것을 잊었다이 튜토리얼
https://docs.angularjs.org/tutorial

출처

2017-10-03 11:48:57 tallberg

로그인 페이지를 만드는 더 좋은 방법

답변

관련 문제