Страница входа с именем пользователя и паролем

-1

Если кто-то создал основную страницу входа в систему с полями имени пользователя и пароля с использованием углового типа и типа, пожалуйста, разделите.Страница входа с именем пользователя и паролем

Я создал этот HTML файл

<!DOCTYPE html> 
<html lang="en" ng-app="loginModule"> 
<head> 
    <meta charset="utf-8"> 
    <title>NADA Sign In</title> 
    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../css/signin.css" rel="stylesheet"> 
</head> 
<body> 
<script src="../js/bootstrap.min.js"></script> 
<script src="../js/jquery.min.js"></script> 
<script src="../js/angular.min.js"></script> 
<script src="../js/login.js"></script> 

<div class="container" ng-controller="LoginController"> 
    <form class="form-signin" ng-sumbit="login()"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <label for="username" class="sr-only">Username</label> 
     <input type="text" id="username" class="form-control" ng-model="username" placeholder="Username" required 
       autofocus> 
     <label for="password" class="sr-only">Password</label> 
     <input type="password" id="password" class="form-control" ng-model="password" placeholder="Password" required> 
     <!--<div class="checkbox"> 
      <label> 
       <input type="checkbox" value="remember-me"> Remember me 
      </label> 
     </div>--> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
    </form> 
</div> 
</body> 
</html> 


module login { 
    export interface IAppCtrl extends ng.IScope{ 
     name : string; 
     password : string; 
    } 
    export class LoginController { 
     constructor($scope : IAppCtrl) { 
      scope = $scope; 
     } 

     scope.login = function() { 

     } 
    } 

    angular.module('loginModule', []).controller('LoginController', LoginController); 
}

Как я могу получить доступ к имени пользователя и пароля переменных и метод входа на представления формы?
Как получить доступ к значениям ввода в ng-модели для имени пользователя и пароля?

источник

2015-08-25 Ajinkya Khavare

StackOverflow - это не сообщество, где вы можете публиковать задания и надеяться, что они e решит его для вас. Если у вас есть проблемы, предоставьте свой код и объясните, что вы ожидали, и что у вас есть. –

'ng-model' автоматически создаст переменные области. Также исправить опечатку для 'ng-submit' – charlietfl

@Chasmo прав, есть youtube, google! – MozzieMD

Избегайте использования сферы, использование контроллера как синтаксис (выглядит намного лучше)
Переименован ваш модуль LoginModule
Зарегистрированный контроллер вне модуля

module LoginModule { 
 
    export class LoginController { 
 
     name: string; 
 
     password: string; 
 
     constructor() {} 
 

 
     login() { 
 
     console.log(`Login was clicked, username is ${this.name} and password is ${this.password}`) 
 
     } 
 
    } 
 
    } 
 

 
    angular.module('loginModule', []).controller('LoginController', LoginModule.LoginController);

<!DOCTYPE html> 
 
<html lang="en" ng-app="loginModule"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>NADA Sign In</title> 
 
    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../css/signin.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <script src="../js/bootstrap.min.js"></script> 
 
    <script src="../js/jquery.min.js"></script> 
 
    <script src="../js/angular.min.js"></script> 
 
    <script src="../js/login.js"></script> 
 

 
    <div class="container" ng-controller="LoginController as vm"> 
 
    <form class="form-signin" ng-sumbit="vm.login()"> 
 
     <h2 class="form-signin-heading">Please sign in</h2> 
 
     <label for="username" class="sr-only">Username</label> 
 
     <input type="text" id="username" class="form-control" ng-model="vm.username" placeholder="Username" required autofocus> 
 
     <label for="password" class="sr-only">Password</label> 
 
     <input type="password" id="password" class="form-control" ng-model="vm.password" placeholder="Password" required> 
 
     <!--<div class="checkbox"> 
 
       <label> 
 
        <input type="checkbox" value="remember-me"> Remember me 
 
       </label> 
 
      </div>--> 
 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-08-25 12:29:28 gilamran

Спасибо @ Gilamran, это сработало –

Страница входа с именем пользователя и паролем

ответ

Смежные вопросы