Question

如果有人使用角度和类型脚本创建了包含用户名和密码字段的基本登录页面，请分享。

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

Answer 1

避免使用范围，使用控制器作为语法（看起来好多了）
将您的模块重命名为LoginModule
在模块外注册控制器

＆＃13;

   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);

＆＃13;

<!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>

＆＃13;

用户名和密码登录页面

1 个答案: