javascript - How to load a different layout in angularjs - Stack Overflow

admin管理员组

文章数量:1290963

I have 2 layout files. Layout-1 Layout-2

The route /one is the starting point which loads the Layout-1, but now if I click on a link /two it gets me the file, but with Layout-1, instead i want, if i hit /two, Layout-2 should be loaded.

If i refresh the page, i get the correct thing coz that time i hit the server directly. So is there any way from angular to specify which layout file to load from Server.

Thanks.

I have 2 layout files. Layout-1 Layout-2

The route /one is the starting point which loads the Layout-1, but now if I click on a link /two it gets me the file, but with Layout-1, instead i want, if i hit /two, Layout-2 should be loaded.

If i refresh the page, i get the correct thing coz that time i hit the server directly. So is there any way from angular to specify which layout file to load from Server.

Thanks.

• javascript
• ruby-on-rails-3
• angularjs

Share Improve this question Follow asked Jun 24, 2013 at 10:50 Aamir ShahAamir Shah 4,49388 gold badges2222 silver badges2828 bronze badges 2

• 1 use ng-view with $routeprovider to configure routes bunch of examples are available online – Ajay Singh Beniwal Commented Jun 24, 2013 at 11:06
• 2 i couldn't find any example where in i can have templates rendered inside different LAYOUT files. – Aamir Shah Commented Jun 24, 2013 at 11:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Loading new layout template means loading new html embedded with new javascript and css files. This is equal to redirecting page to new location. You can use $window.location.href="new/layout/template". Read angularjs developer guide for more info.

If it stands for client side routing then you should use $routeProvider to write a route for this

var app = angular.module('app', []);

app.config(function($routeProvider){
  $routeProvider
    .when('/one', {templateUrl: 'tmpl1.html'})
    .when('/two', {templateUrl: 'tmpl2.html'})
    .otherwise({redirectTo: '/one'});
});

It will allow you to define separate template and controller for another url/action

Here I made a working example of how it work.

If it is about serverside routing then read manual and use it like this:

match 'two' => 'controller#action'

Finally, i got the problem solved using UI-Router

Thanks for the help :)

本文标签： javascriptHow to load a different layout in angularjsStack Overflow