angular-ui-router登录表单验证及跳router跳转示例代码-html代码-BFW代码库

angular-ui-router登录表单验证及跳router跳转示例代码

代码语言：html

代码描述：angular-ui-router登录表单验证及跳router跳转示例代码，使用state来根据登录验证结果显示不同的路由页面。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">


</head>

<body>
    <div class="container" ng-app="myApp">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>{{ title }}</h1>
                </div>
            </div>

            <div ui-view></div>

        </div>

        <script type="text/ng-template" id="login.html">
            <div class="col-md-12">
                <h3>Login Page</h3>

                <form ng-submit="formSubmit()" class="form">
                    <div class="col-md-4">
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="username" placeholder="username" required="" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" ng-model="password" placeholder="password" required="" />
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Login</button>
                            <span class="text-danger">{{ error }}</span>
                        </div>

                    </div>
                </form>
            </div>
        </script>

        <script type="text/ng-template" id="home.html">
            <div class="col-md-12">
                <h3>Home Page</h3>

                <a ui-sref="login">Back</a>
            </div>
        </script>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/.........完整代码请登录后点击上方下载按钮下载查看