CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Angularjs route to different layout page using ui-router

Hi I am developing SPA in angularjs. I have two layout pages. There is one tab in the first layoutpage(Index.html) called Financial. Whenever i click on that page i want to redirect to another layout page. Below is my index.html

  //All js,css,angular files.
                <li><a ui-sref="FAQ">FAQ's</a></li>
                <li><a ui-sref="Careers">Careers</a> </li>
                <li><a href="#">Offers & Deals</a> </li>
                <li><a ui-sref="Financial ">Financial Reports</a> </li>
                <div class="container">
                <div ui-view></div>
                </div>

whenever i click on Financial Reports I want to redirect to new layout page and do not want to load any html in above ui-view. Below is my plunker https://plnkr.co/edit/m57BI5pivGzXD9UtwVtm?p=preview. May I know how can i handle this? Thanks in advance.

Upvotes: 1

Views: 368

Answers (1)

32teeths
32teeths

Reputation: 1499

As mentioned in ui-router-wiki, ui-router lets you add named views which helps you specify which view to use for whichever route you need . So if you need to have a landing page with state landing you could specify something like ,

 .state('landing', {
                    url: "/",
                    data: { pageTitle: 'Landing Page' },
                    views: {
                        'landing': {
                            templateUrl: "<template-url>",
                            controller: "LandingController",
                            controllerAs: "landing"
                                   }
                           }
                   });

Which lets you specify the ui-view in your index.html like 

<div ui-view="landing"></div>

And so if you need to have a particular url to use a different ui-view you could specify in the views object of the state . 

 .state('alternateView', {
                    url: "/",
                    data: { pageTitle: 'Alternate page' },
                    views: {
                        'alternateUiViewTemplate': {
                            templateUrl: "<template-url>",
                            controller: "Alternate Controller",
                            controllerAs: "alternate"
                                   }
                           }
                   });

which lets you add to the index.html and have an extra ui-view holder,

<div ui-view="landing"></div>
<div ui-view="alternateUiViewTemplate"></div>

Upvotes: 2

Related Questions