I have a bunch of screens that follow one of two main layouts. I'm trying to figure out a way that I could turn them into page templates and reuse them to cut down on repeating all the boiler plate markup. I already have reusable components for things like headers, footers, etc. My first attempt was to create layout component building blocks that use ng-content to insert the content that is different for each page. I wanted to have something like this:
<layout>
<layout-header>
<header title="..."></header>
</layout-header>
<layout-content>
<layout-left>
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right>
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer>
<footer></footer>
</layout-footer>
</layout>
The idea is that each component (layout, layout-header, etc) would produce the n lines of layout markup that I had been copying into each page. I am using bootstrap to do the actual layout within each component's template. The template for the main layout component looks something like this:
<div class="h-100 d-flex flex-column">
<ng-content select="layout-header"></ng-content>
<ng-content select="layout-content"></ng-content>
<ng-content select="layout-footer"></ng-content>
</div>
This looked like it would work but the main problem is that the host tags, layout-right for example, stay in the resulting markup and interfere with the actual layout. I could do something like this (but I don't want to):
<layout class="h-100 d-flex flex-column">
<layout-header class="...">
<header title="..."></header>
</layout-header>
<layout-content class="...">
<layout-left class="...">
<div> -- LEFT CONTENT GOES HERE -- </div>
</layout-left>
<layout-right class="...">
<div> -- RIGHT CONTENT GOES HERE -- </div>
</layout-right>
</layout-content>
<layout-footer class="...">
<footer></footer>
</layout-footer>
</layout>
Having to repeat the classes in every page kind of defeats the purpose.
Anyhow, wondering if there is an Angular way of building reusable layouts like this? Or is there something I'm just missing?
Related
I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
I'm populating my index.html via angular, as per usual. I have an index that looks something like:
<body>
<nav ng-include="'app/partials/navbar.html'" ng-controller="NavBarController"></nav>
<main>
<section ui-view="donate"></section>
<section ng-include="'app/partials/about.html'"></section>
<section ui-view="stories"></section>
<section ng-include="'app/partials/contact.html'"></section>
</main>
<footer ng-include="'app/partials/footer.html'"/>
</body>
My nav, about, contact and <footer> all have static content, so I used ng-include. The donate and stories <section>s are dynamic, so I used ui-view.
The Question
Is there any advantage to using ui-view over ng-include where static content is concerned? The nav might be better with a ui-view I can reference the NavBarController in $stateProvider.state(), but what about the static partials?
ui-view is useful only when you want to leverage the feature of browser history. For e.g. If you have a HTML as below
<div class="searchbar">
<input type="text" ng-model="student.id">
<button type="button" ng-click="getStudent()">Get Student</button>
</div>
<div class="student-info">
<div class="student" ui-view="studentview"></div>
</div>
Having a ui-view here will make sense since we can pass different data (like student id etc) as parameter to the same template and display different content. Also the browser history will help us navigate between different students here.
For content like about or footer though which are mostly static I would recommend you to use ng-include as you are hardly getting anything extra out of router here.
For Contact it can depend on what it contains. If it is something which requires navigation (like one route for contact of each country's office) then go with ui-route otherwise stick with ng-include
This is what I have been trying to do:
Sidebar of a page has a couple of links say Step 1, Step 2 etc. The last tab in the sidebar has the Submit button which generates the POST call to my service.
In the parent page called CreateItem.js, I have the sidebar with:
<Sidebar width="15rem" open={true}>
<div>
<div className="panel">
Step 1: Basic Info
</div>
<div className="panel">
Step 2: Content
</div>
</div>
</Sidebar>
<Mainbar>
<div>
<section className="basic-info" id="basic-info">
<BasicInfoPage user={this.props.user} itemId={this.props.params.id} />
</section>
<section className="content" id="content">
<ContentPage user={this.props.user} />
</section>
</div>
</Mainbar>
and each tab has it's own formsy form and render function. Basically all the sections are put into one page but just rendered section by section.
My Questions:
1. How does the submit button in the last section say contentpage gather all the data from all the previous sections above it? I realize there is a formsy onSumbit function but the forms are in each of the sections so I don't understand How I can encapsulate all the data into a single json.
Any help/ tip is greatly appreciated! More than willing to give more info!
I suggest that you should use Flux or Reflux architecture to collect all data of each section and store it in a store. In this way, you can easily get data you want.
So I'm trying to build a full page in Reactjs but some components are persisted throughout pages. The structure is something like this:
<div>
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
<section className="right>
<section className="persist-this"/>
{moreStuff}
</section>
</div>
</div>
During rerendering is the structure change is significant enough (changing from a page with header & nav to no header/no nav the persist-this section will be re-rendered as well.
Right now I'm actually doing React.renderComponent for each individual pieces & keep the structure static (so like renderComponent for header, nav, left section & moreStuff separately) & I wonder if there's a better way to doing this?
EDIT: I think I do know why this got re-rendered. I guess my question now becomes more like how to organize my structure better. So I got BasePage.jsx which has the structure above & in other pages (like HomePage.jsx or OtherPage.jsx) I do:
var HomePage = React.createClass({
render: function () {
<BasePage>
<p>Home</p>
</BasePage>
}
});
I think when I do React.renderComponent it see <HomePage> & <OtherPage> as 2 completely different Components although they are wrapped by the same <BasePage>, thus unmounting the Page. Should I separate the differences of those pages into mixins?, then always renderComponent(<BasePage>, el) to prevent unmounting?
If something persists between pages, the correct way to do it would be to separate your structure so that whatever persists only shares an ancestor which also persists.
In other words, you should structure it like this:
<div id="siteRoot">
<div className="dynamic">
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
</div>
</div>
<div className="persist-this">
<section className="right>
<section/>
{moreStuff}
</section>
</div>
</div>
Then your css should adapt to your new dom hierarchy and update your layout accordingly.
Now when you switch content in your dynamic section, React will automatically know that it doesn't need to re-render anything in the persist section - since nothing was changed there.
I'm trying to figure out how to make a component render its children.
So I can compile:
<my-component>
<div id="child"></div>
</my-component>
into something like this:
<div id="parent">
<!-- some component stuff -->
<div id="child"></div>
</div>
Is there something like ngTransclude in Angular.Dart?
AngularDart uses Shadow DOM in place of ngTransclude. This is one of the ways we are pushing Angular into the browser with emerging web standards.
Adding a <content> tag instead your component's template will cause the child element to be placed there.
e.g. in your example <my-component>'s template might look like:
<div id="parent">
<!-- some component stuff -->
<content></content>
</div>
For even more awesomeness, you can use Shadow DOM's content selectors as well to control which child elements are displayed.