title: AngularJS - Route to another page of different ng-app module after login
body: <p>I have a basic knowledge of AngularJS only. I have created one AngularJS application.</p>
  
  <p>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.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Login - AngularJS&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" /&gt;
  
      &lt;script src="script/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="script/app.js"&gt;&lt;/script&gt;
      &lt;script src="script/loginController.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body data-ng-app="sampleApp"&gt;
  
      &lt;div class="index container"&gt;
          &lt;div class="row"&gt;
              &lt;div class=""&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#login"&gt; Login &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#register"&gt; View1 &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="loginView"&gt;
                  &lt;div ng-view&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>login.html</strong></p>
  
  <pre><code>    &lt;h2&gt;Login&lt;/h2&gt;
  
      &lt;form ng-submit="loginUser()"&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Login&lt;/legend&gt;
  
                  &lt;label&gt;Name: &lt;/label&gt; &lt;input type="text" id="name" name="name"
                      ng-model="user.name" placeholder="User Name" required="required"&gt;
                      &lt;br&gt; &lt;label&gt;Password:&lt;/label&gt; &lt;input
                      type="password" id="password" name="password"
                      ng-model="user.password" placeholder="Your Password"
                      required="required"&gt; &lt;br&gt;
                  &lt;button class="btn btn-primary"&gt;Login&lt;/button&gt;
                  &lt;br /&gt;
              &lt;/fieldset&gt;
              &lt;label&gt;{{user.status}}&lt;/label&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>//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);
  }]);
  </code></pre>
  
  <p><strong>LoginController</strong> (has both login and register. I have implemented only for login)</p>
  
  <pre><code>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 = {};
  });
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Login - AngularJS&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" media="all" href="styles/angulardemo.css" /&gt;
  
      &lt;script src="script/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="script/loginController.js"&gt;&lt;/script&gt;
      &lt;script src="script/userController.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body data-ng-app="homeApp"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row homeTitle"&gt;
              &lt;div class="username"&gt;
                  &lt;h3&gt;{{user.name}}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="homeMenu"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#profile"&gt; Profile &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#settings"&gt; Settings &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Each link has its own controllers.</p>
  
  <p>When I click on the login button with valid username and pasword, It is alerting with <strong>Success</strong>, but not going to the home (home.html) page. </p>
  
  <p>How can I route to a different page that has different ng-app module from another one? And also how to pass this <strong>User</strong> object to home.html ng-app module, so it can have user data and display the user name, and other values?</p>