AngularJS - 路线，以登录后不同的NG-应用模块的另一页

本文介绍了AngularJS - 路线，以登录后不同的NG-应用模块的另一页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我只有AngularJS的基本知识。我已创建了一个AngularJS应用。

I have a basic knowledge of AngularJS only. I have created one AngularJS application.

index.html的具有注册登录的两个环节。随着NG-视图。默认情况下，登录认为。在登录认为我有形式。这将被张贴到Servlet和与对象返回状态。我有另一页home.html的WIS = CH都有自己的NG-应用模块。当登录就是成功，我想路由到home.html做为pgae。它也有两个环节，一个NG-视图中显示的链接。

index.html has two links for login and register. With ng-view. By default, login is the view. In the login view I have form. That will be posting to servlet and return the status with object. I have another page home.html wis=ch has its own ng-app module. When the login is success, I want to route to home.html pgae. It also has two links and one ng-view to display the links.

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

的login.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>

app.js

//Define Routing for app
angular.module('sampleApp', []).config(['$routeProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
      .otherwise({
        redirectTo: '/login'
      });
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

//Home Page Module
angular.module('homeApp', []).config(['$routeProvider',
function($routeProvider,$locationProvider) {
  $routeProvider
  .when('/home', {
      templateUrl: 'home.html'
  })
  .when('/profile', {
      templateUrl: 'profile.html',
      controller: 'ProfileController'
  })
  .when('/settings', {
      templateUrl: 'settings.html',
      controller: 'SettingsController'
    })
    .otherwise({
      redirectTo: '/home'
    });
//  $locationProvider.html5Mode(true);
}]);

的LoginController （同时具有注册登录的。我已经实现仅供登录）

LoginController (has both login and register. I have implemented only for login)

angular.module('sampleApp').controller('LoginController', function($scope,$location,$http) {
    $scope.user = {};
      $scope.loginUser = function() 
      {
        $http({
          method: 'POST',
          url: 'http://localhost:8080/AngularJSLogin/login',
          headers: {'Content-Type': 'application/json'},
          data:  $scope.user
        }).success(function (data) 
          {
            var strJSON=data;
            if(strJSON.status=="Success")
            {
                alert("success");
                $location.path( "/home" );
            }
            else
            {
                $scope.user.status=strJSON.userId+" : "+strJSON.status;
            }
          });
      };
});

angular.module('sampleApp').controller('RegisterController', function($scope,$location,$http) {
    $scope.user = {};
});

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

每个环节都有自己的控制器。

Each link has its own controllers.

当我点击使用有效的用户名和pasword登录按钮，它与成功警报，但不会到户（home.html做为）页面。

When I click on the login button with valid username and pasword, It is alerting with Success, but not going to the home (home.html) page.

我怎样才能到，从另外一个都有不同的NG-应用模块不同页面的路线？以及如何通过这个用户对象home.html的NG-应用模块，所以它可以有用户数据并显示用户名和其他值？

How can I route to a different page that has different ng-app module from another one? And also how to pass this User object to home.html ng-app module, so it can have user data and display the user name, and other values?

html

AngularJS - 路线，以登录后不同的NG-应用模块的另一页

问题描述

推荐答案