带有用户名和密码的登录页面

Ajinkya Khavare

如果有人使用angular和type脚本创建了包含用户名和密码字段的基本登录页面，请共享。

我已经创建了这个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-model中输入用户名和密码的输入框值？

吉兰兰

避免使用范围，使用控制器作为语法（看起来更好）
将模块重命名为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。