We have a Marionette App (2.4.4).
It currently contains a bunch of top level regions (header, nav, content etc).
I now need to add some pages that do not use these regions. I could wire in a load of events to check when certain pages are shown and then hide / show regions, but I was wondering if there is a simple way to define multiple App Layouts, and then have routes define which layout to load up?
So layout A would have the header, nav, content and layout B would just have header and content.
Then some routes use A and some routes use B?
Yes. In v2.x Application has multiple regions.. and so I suspect your top level regions are defined on the application.. in v3 application now only has a single region..
I would suggest modifying your app such that there is a single application region.. and put your top level layouts inside of it, instead of using your application as a layout.
This way you can swap out layouts as need be per the route, and you're on your way to being able to upgrade.
Related
In our next.js (v11) application we have a couple of different types of pages. Currently we have a custom App component to centralize elements valid for all pages. However I'd like to further minimize the overhead and define additional App components for the various types of pages.
Is it possible to have more than one App component and tell the framework which to use for a certain page?
If not, is there any other way to define something like a base page that other pages are derived from?
So I guess there's no way to have several base Apps and derive pages from them. However as Taghi Khavari suggested, I will define the different base pages in the App component itself. It's not a perfect approach, but it works.
I don't want to use the layout page for login page where as all other pages in application have to use the layout page. How to achieve this in Angular JS SPA?
The most flexible and most common solution is to use composite templates with ui-router. This allows you to define a top level login that uses one template, and then another top-level whose child states will all inherit another template.
What is the proper way to switch between three completely different layouts using AngularJS? Route variables? Populating the root scope? Nested controllers? Some magical method of maintaining the variables after causing the browser to navigate to a different URL without routing? I'm using UI-Router.
NOTE:
I am leaning towards using nested controllers however I'm stumped as how to target a specific UIView. For example, if a nest a view for a side-nav area, how can an sref (or similar), from the side-nave, change the main-body area?
My client handed me a static version of their site with 100 useful page samples, however the overall layout of many pages is drastically different. They all have data elements that would all tie together:
Semi-Public Area (approx 15 pages)
Similar to a public marketting web site but with a title bar, showing notifications for the user IF they are logged in.
Dashboard (approx 45 pages)
Complex pages for use in a web-based admin application.
User Application (approx 40 pages)
The actual public application. Changes made in the Dashboard must show in real time during this same session.
I am creating a single page application using backbone.js.
My scenario is to render three different layouts in the same page on clicking three different clicks.,,should I create three render functions for these click events in the view?
You could create three different render methods, but it would probably make more sense to make a different view for each page. You can then hook each of those views up to separate routes to get three (pseudo-) pages.
I'm brand new to angular, and am still deciding whether or not I want to use it. I'm looking to have 2 separate 'base' pages in my app: an authenticated one and an unauthenticated one. They have different skeletons with different content areas. So, I can't just redirect to separate partials, but rather an overall html.
Is there a way to have 2 apps, 1 for index1.html and one for index2.html?
OR
Is there an easier way to do this? Or is this just not what angular is built for?
You can use ngInclude to conditionally change the contents of various parts of the page. That way your header and footer can change depending on whether or not the user is authenticated, while the main content area is still serving content based on your routes.