angularJs navigation's from ng-route to ui-router

I am new to AngularJS, and I am a little confused of how I can use angularjs ui-router in the following scenario:

It consists of two sections. The first section is the Homepage with its login and sign up views, and the second section is the Dashboard (after a successful login).

• When I logged in success need to navigate from login form to "Home page".


• When I tapped a registration button I need to navigate to "Registration page" from login page


• Similarly I also need a "forgot password" screen

My current router is below. How can I do this functionality? (Please help with some HTML code and related controllers)

app.js:

'use strict';
    //Define Routing for app
    angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
      function($routeProvider,$locationProvider) {
        $routeProvider
        .when('/login', {
            templateUrl: 'login.html',

            controller: 'LoginController'
        })
        .when('/register', {
            templateUrl: 'register.html',
            controller: 'RegisterController'
          })
        .when('/forgotPassword', {
            templateUrl: 'forgotpassword.html',
            controller: 'forgotController'
          })

       .when('/home', {
           templateUrl: 'views/dashBoard.html',
           controller: 'dashBordController'
        })
        .otherwise({
           redirectTo: '/login'
        });

    }]);
});