I have this specific issue with the way ng-view renders templates. Whenever a partial is rendered, the div with the ng-view attribute slides up and then again renders with the compiled template. I tried using ngCloak as follows:
<div ng-view autscroll="true">
<!--Partials rendered here-->
</div>
partial.html
<div class="some-class" ng-cloak>
</div>
For better illustration:
Pre render
Post render
Here the dark part is the footer that's static across all pages along with the red header.
How do I prevent this jumping?
Related
I have an angular app with a page and dynamic content.
I use ui router for routing.
I want user to see static html which server side rendering will return it, and when angular is loaded, change html content with ur router templates.
sample static html is:
<div ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
<div>
sample ui router template is:
<div>
<div>{{myModel}}</div>
<p>{{myModel2}}</p>
<span>Lorem Ipsum</span>
<div>
My aims:
User should see some static html, before dynamic content is loaded. Dynamic content will replace it.
Search engines should track static files, not something like <p>{{myModel2}}</p>
I think you can make static content visible before ui-router is resolved like this:
<ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
</ui-view>
Using ui-view as custom tag will render inner HTML without any changes to it, however when route is resolved this content will be replaced with actual route template.
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
I have a main menu item inside of my base template which resides outside of my ng-view container. I would like for my links to work so that whenever I change pages between them, the pages load scrolled on top instead of the ng-view nested within my body and outside of my main menu.
It should be noted that when loading a view directly instead of through a link, the view starts on top, as I desire.
<body>
<header>
<search />
<login />
<!-- more main menu stuff -->
</header>
<div ng-view="" class="content">
<!-- This link should redirect me to /profile *and* start on top of my body! -->
<a ng-href="#/profile/john">John</a>
</div>
</body>
PS - The main menu is outside of my ng-view and directly on my base template so it easily resides on all my views.
You can use the autoscroll param with ng-view to make this work.
My page has header, content and footer.
<div id='header'></div>
<div data-ng-view=""></div>
<div id='footer'></div>
I have binding in header section, how can I delay header view rendering until model loaded to prevent flicker ? I do not want the user to see this while ajax data is loading.
I have checked this post, it only will works for the ng-view.
My page header and footer are part of the master page, they are not governed by $routeprovider
Try ng-cloak. It will hide the page until angularJS is ready.
Try adding a conditional attribute in the header tag.
<div id="header" ng-show="model_name"></div>
can someone please point me to an example of managing global states for ui-router?
i'm trying to implement a general site template that contains on all pages a header and a footer, with a main view that changes along with nested views within that view.
<div ui-view="header"> should appear on all pages, has its own controller.
<div ui-view>main view that holds the different "pages" and nested views
<div ui-view="footer"> should appear on all pages, has its own controller.
i will try to elaborate, this is my current state with angulars routing:
<body>
<div class="wrap">
<div ng-include="'partials/header.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</body>
i would like to migrate to ui-router, but cannot achieve the same.
i need the header and the footer on all pages and an ui-view as main content that will hold all views/nested vies and stats
Thanks
That will definitely work for you. You'll just need to make sure it's ui-view insteadl of ng-view. Here's what I'm using now on a similar app:
<div ng-include src="'app/templates/nav.html'" id="global-nav"></div>
<div ui-view></div>
<footer ng-include src="'app/templates/footer.html'"></footer>