How to redirect to new state in Angularjs?

Question

Hi I am developing SPA application in Angularjs. This is my first application in Angularjs. I have two master pages. In first master page there is one tab when i click on that tab i want to redirect to another master page. I am using UI routing in Angularjs. I completed Login and registration modules but these modules should come in second master page but i have it in first master page now.

Below is my index.html first master page file.

<ul id="nav">
  <li><a ui-sref="Registration.mainRegistration">{{ 'Registration' | translate }}</a></li>
  <li><a ui-sref="Registration.Login">Login</a></li>
  <li><a href="#">{{ 'Careers' | translate }}</a> </li>
  <li><a href="#">{{ 'Offers & Deals' | translate }}</a> </li>
  <li><a href="#">{{ 'Financial' | translate }}</a> </li>

This is the first page loads. There is one Financial tab in the above file. When i click on that tab all my above master page disappears and in that place new master page should come. Below is my App.js

 var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
   app.config(function ($stateProvider,
                        $urlRouterProvider, 
                        $translateProvider, 
                        $translatePartialLoaderProvider) {

     $stateProvider
       .state('Registration', {
       abstract: true,
       url: '/Registration',
       templateUrl: 'Registration/placeholder.html',
       controller: 'MainRegistration'
     });
    //there are other states also.

I am in the initial stage of development. So May I know this can be achieved? Any help would be appreciated. Thank you.

Answer 1

Your state should not contain abstract: true . Abstract states are usually created when you want a parent view and create nested views.

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
   app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {

     $stateProvider
        .state('registration', {
         url: '/registration',
         templateUrl: 'Registration/registration.html',
         controller: 'RegistrationController'
        })
        .state('login', {
         url: '/login',
         templateUrl: 'Registration/login.html',
         controller: 'LoginController'
        });

Refer the states in ui-sref as below:

/All css,js and angular references.
    <script src="ForgotPassword/ForgotPasswordController.js"></script>
    <script src="ForgotPassword/ResetPasswordController.js"></script>
    <script src="ForgotPassword/OTPVerificationController.js"></script>
    <script src="ForgotPassword/ChangePasswordController.js"></script>
    //header 
    <ul id="nav">
    <li><a ui-sref="registration">{{ 'Registration' | translate }}</a></li>
    <li><a ui-sref="login">Login</a></li>
    <li><a href="#">{{ 'Careers' | translate }}</a> </li>
    <li><a href="#">{{ 'Offers & Deals' | translate }}</a> </li>
    <li><a href="#">{{ 'Financial' | translate }}</a> </li>
   </ul>
  <div ui-view></div>
    //Footer

Create the registration.html and login.html under Registration folder. Create the controller files RegistrationController and LoginController