How to nest states in angularjs?

Question

Hi I am developing Angularjs application. I am new to Angularjs. I am facing some issues in Nesting of UI states. My requirement is to develop forgot password page. Flow will be as below.

ForGotPassword
  Step 1: MobileNumber
          DOB
          Submit->If successful then
 Step 2:  OTP
          Verify->If successful then
 Step 3:  New Password
          Confirm Password
          Submit.

For the above three steps I want to inject the respective pages in

class="container">
            <div ui-view></div>
        </div>

This is my main controller.

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
   $stateProvider.state('ForgotPassword', {
        url: '/ForgotPassword',
        templateUrl: 'ForgotPassword/ForgotPassword.html',
        controller: 'ForgotPassword'
    });
});

This is my forgotpassword controller.

(function () {
    angular.module('RoslpApp').controller('ForgotPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $stateProvider
         .state('ResetPassword', {
             url: '/ResetPassword',
             templateUrl: 'ForgotPassword/ResetPassword.html',
             controller: 'ResetPassword'
         });
        $stateProvider
        .state('OTPVerification', {
            url: '/OTPVerification',
            templateUrl: 'ForgotPassword/OTPVerification.html',
            controller: 'OTPVerification'
        });
        $stateProvider
       .state('ChangePassword', {
           url: '/ChangePassword',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           controller: 'ChangePassword'
       });
    }]);
})();

Forgotpassword.html

<div class="container">
    <div ui-view></div>
</div>

Also i have ResetPassword.html,OTPVerification.html,ChangePassword.html with respective text boxes. I am not sure I am doing it correctly or not? May I get some help here. Any help would be appreciated. Thank you.

kaushlendras · Accepted Answer · 2017-04-06 07:22:30Z

2

Refer to this for implementing nested states and view using angular ui router: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views.

(function () {
    angular.module('RoslpApp').controller('ForgotPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $stateProvider
         .state('ForgotPassword.ResetPassword', {
             url: '/ResetPassword',
             templateUrl: 'ForgotPassword/ResetPassword.html',
             controller: 'ResetPassword'
         });
        $stateProvider
        .state('ForgotPassword.OTPVerification', {
            url: '/OTPVerification',
            templateUrl: 'ForgotPassword/OTPVerification.html',
            controller: 'OTPVerification'
        });
        $stateProvider
       .state('ForgotPassword.ChangePassword', {
           url: '/ChangePassword',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           controller: 'ChangePassword'
       });
    }]);
})();

edited Apr 6, 2017 at 7:22

answered Apr 6, 2017 at 7:04

kaushlendras

2201 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Niranjan Godbole Over a year ago

Thank you. Whenever i click on forgot password i want to inject ResetPassword.html in <div class="container"><div ui-view></div></div>. May i know how to achieve this?

kaushlendras Over a year ago

You have to give child state name as parent.childStateName

Niranjan Godbole Over a year ago

.state('ForgotPassword.ResetPassword' like this i should use right?

Niranjan Godbole Over a year ago

Thank you. In first line angular.module('RoslpApp') should i inject ['ui.router']?

Niranjan Godbole Over a year ago

I am not able to inject the view. Please find my plunker here plnkr.co/edit/0oaCZzKDcUu6CJSY8lWH?p=preview. May i get some help here? Thanks in advance

|

Collectives™ on Stack Overflow

How to nest states in angularjs?

1 Answer 1

13 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Related