Javascript AngularJS-登录后路由到不同ng应用程序模块的另一个页面_Javascript_Html_Angularjs_Login

Javascript AngularJS-登录后路由到不同ng应用程序模块的另一个页面

javascript html angularjs login

Javascript AngularJS-登录后路由到不同ng应用程序模块的另一个页面,javascript,html,angularjs,login,Javascript,Html,Angularjs,Login,我只懂AngularJS的基本知识。我已经创建了一个AngularJS应用程序 html有两个用于登录和注册的链接。我的观点是否定的。默认情况下，登录是视图。在登录视图中，我有一个表单。这将发布到servlet并返回对象的状态。我有另一个页面home.html wis=ch有自己的ng应用程序模块。登录成功后，我想路由到home.html pgae。它还有两个链接和一个ng视图来显示链接 index.html <!DOCTYPE html> <html lang="en">

我只懂AngularJS的基本知识。我已经创建了一个AngularJS应用程序

html有两个用于登录和注册的链接。我的观点是否定的。默认情况下，登录是视图。在登录视图中，我有一个表单。这将发布到servlet并返回对象的状态。我有另一个页面home.html wis=ch有自己的ng应用程序模块。登录成功后，我想路由到home.html pgae。它还有两个链接和一个ng视图来显示链接

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/app.js"></script>
    <script src="script/loginController.js"></script>
  </head>

  <body data-ng-app="sampleApp">

    <div class="index container">
        <div class="row">
            <div class="">
                <ul class="nav">
                    <li><a href="#login"> Login </a></li>
                    <li><a href="#register"> View1 </a></li>
                </ul>
            </div>
            <div class="loginView">
                <div ng-view></div>
            </div>
        </div>
    </div>

  </body>
</html>

    <h2>Login</h2>

    <form ng-submit="loginUser()">
            <fieldset>
                <legend>Login</legend>

                <label>Name: </label> <input type="text" id="name" name="name"
                    ng-model="user.name" placeholder="User Name" required="required">
                    <br> <label>Password:</label> <input
                    type="password" id="password" name="password"
                    ng-model="user.password" placeholder="Your Password"
                    required="required"> <br>
                <button class="btn btn-primary">Login</button>
                <br />
            </fieldset>
            <label>{{user.status}}</label>
    </form>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/loginController.js"></script>
    <script src="script/userController.js"></script>
  </head>

  <body data-ng-app="homeApp">
    <div class="container">
        <div class="row homeTitle">
            <div class="username">
                <h3>{{user.name}}</h3>
            </div>
            <div class="homeMenu">
                <ul class="nav">
                    <li><a href="#profile"> Profile </a></li>
                    <li><a href="#settings"> Settings </a></li>
                </ul>
            </div>
        </div>
        <div class="">
            <div ng-view></div>
        </div>
    </div>

  </body>
</html>

LoginController（同时具有登录和注册功能。我只为登录而实现）

home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/app.js"></script>
    <script src="script/loginController.js"></script>
  </head>

  <body data-ng-app="sampleApp">

    <div class="index container">
        <div class="row">
            <div class="">
                <ul class="nav">
                    <li><a href="#login"> Login </a></li>
                    <li><a href="#register"> View1 </a></li>
                </ul>
            </div>
            <div class="loginView">
                <div ng-view></div>
            </div>
        </div>
    </div>

  </body>
</html>

    <h2>Login</h2>

    <form ng-submit="loginUser()">
            <fieldset>
                <legend>Login</legend>

                <label>Name: </label> <input type="text" id="name" name="name"
                    ng-model="user.name" placeholder="User Name" required="required">
                    <br> <label>Password:</label> <input
                    type="password" id="password" name="password"
                    ng-model="user.password" placeholder="Your Password"
                    required="required"> <br>
                <button class="btn btn-primary">Login</button>
                <br />
            </fieldset>
            <label>{{user.status}}</label>
    </form>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login - AngularJS</title>

    <link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" />

    <script src="script/angular.min.js"></script>
    <script src="script/loginController.js"></script>
    <script src="script/userController.js"></script>
  </head>

  <body data-ng-app="homeApp">
    <div class="container">
        <div class="row homeTitle">
            <div class="username">
                <h3>{{user.name}}</h3>
            </div>
            <div class="homeMenu">
                <ul class="nav">
                    <li><a href="#profile"> Profile </a></li>
                    <li><a href="#settings"> Settings </a></li>
                </ul>
            </div>
        </div>
        <div class="">
            <div ng-view></div>
        </div>
    </div>

  </body>
</html>


登录-AngularJS
{{user.name}

每个链接都有自己的控制器

当我使用有效的用户名和密码单击登录按钮时，它会发出成功提示，但不会进入主页（home.html）

如何路由到另一个具有不同ng应用程序模块的页面？以及如何将这个用户对象传递到home.html ng应用程序模块，这样它就可以拥有用户数据并显示用户名和其他值？

因为我知道每个html文档只能使用一个

ng应用程序

，而

ng视图也同样如此。
我建议您使用$routeProvider
在应用程序中的页面之间导航
使用services
可以获得用户的登录信息，也可以使用ng show/ng hide
根据用户的登录状态向他们显示特定的页面。
我们可以在尽可能多的div中添加许多ng view标记，但它会粘贴任何需要粘贴到dom中的路由。
我知道这已经超过2年了，我相信你可能已经过去了，但我要告诉你我是怎么做的，因为我有一个类似的设置。在客户端做任何事情都不会对你有好处。您需要将一些路由逻辑卸载到服务器端。其他人可能建议在整个应用程序中只使用一个ng应用程序，但对我来说，这不是一个要求。多应用程序是必要的
我的应用程序由6个ng应用程序组成，它们共享一些常见的模块和服务。每个人都有自己的责任，例如，我有一个像你一样的人，有登录、注册和密码重置的视图，而其他人是“受保护的ng应用程序”
让我工作的诀窍是登录请求。从服务器成功登录时，我不会返回200 json，我只是重定向到主页，即在成功登录时为受保护的主ng应用程序提供服务。然后我设置了一个httpOnly Cookie，其中用户信息序列化为JWT字符串
重点是…将每个Angle应用程序视为一个页面，让服务器端代码根据您的身份验证规则决定要显示什么
希望这能帮助任何使用model:）的人。
我每页只使用一个ng应用程序
和ng视图
。（index.html
和home.html
）。我正在为这两个模块使用$routeProvider
，您可以在app.js
中看到这一点。你能告诉我怎么做吗？或者是任何一个链接？或者是两个模块的组合？但是这两个模块都是独立的，并且在应用程序的不同页面上。js将您的所有Roue放在同一个应用程序下。删除第二个应用并从应用中查看。我希望登录和主页使用不同的VEW。我的意思是，对于登录，我有两个常见的登录和注册链接。在主页中，我有一些常见的链接，如设置、配置文件、注销和所有其他菜单。无论登录后发生什么操作，都应该始终显示公共链接。有办法吗？是的！不要改变你的观点。具有相同的视图并调用函数来更改内容。