title: How to navigate one page to another page using AngularJs
body: <p>How to navigate from one page to another page. Assume i have a login page, after entering username and password fileds while click on submit button it needs to validate and if both username and password is correct it needs to go home page. Home page content needs to display. Here i am posting code. In Browser url is changing but content is not changing.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app='myApp'&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/&gt;
  &lt;script
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt;
  &lt;script
      src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body &gt;
      &lt;div id='content' ng-controller='LoginController'&gt;
          &lt;div class="container"&gt;
              &lt;form class="form-signin" role="form" ng-submit="login()"&gt;
                  &lt;h3 class="form-signin-heading"&gt;Login Form&lt;/h3&gt;
                  &lt;span&gt;&lt;b&gt;Username :&lt;/b&gt;&amp;nbsp; &lt;input type="username"
                      class="form-control" ng-model="user.name" required&gt; &lt;/span&gt; &lt;/br&gt;
                  &lt;/br&gt; &lt;span&gt;&lt;b&gt;Password :&lt;/b&gt;&amp;nbsp;&amp;nbsp; &lt;input type="password"
                      class="form-control" ng-model="user.password" required&gt; &lt;/span&gt; 
                  &lt;br&gt;&lt;br&gt;                
                  &lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;
                      &lt;b&gt;Sign in&lt;/b&gt;
                  &lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;!-- /container --&gt;
      &lt;/div&gt;
      &lt;script src='test.js' type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>Hello I am  from Home page
  </code></pre>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>var applog = angular.module('myApp',['ngRoute']);
  
  applog.config([ '$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {   
          $routeProvider.when('/home', {
              templateUrl : 'home.html',
              controller : 'HomeController'
          }).otherwise({
              redirectTo : 'index.html'
          });
          //$locationProvider.html5Mode(true); //Remove the '#' from URL.
      } 
  ]);
  
  applog.controller("LoginController", function($scope, $location) {
      $scope.login = function() {
          var username = $scope.user.name;
          var password = $scope.user.password;
          if (username == "admin" &amp;&amp; password == "admin") {
              $location.path("/home" );
          } else {
              alert('invalid username and password');
          }
      };
  });
  
  applog.controller("HomeController", function($scope, $location) {
  
  });
  </code></pre>