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.
Related
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 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?
How can i remove navigator toolbar from top on single page index.html, but i want ons.navigator.pushPage functionality for some button on index.html is it possible?
It can be achieved by hide-toolbar="true" on index page and get back false on page1 , but after move to page1, i am not able to view left button on top header, and ons.navigator.popPage() is also not working on my button.
You can vanish navigation bar by
index.html
<ons-navigator page="foo.html" hide-toolbar=true></ons-navigator>
http://onsenui.io/guide/components.html#navigator
And in order to display ons-navigator html on next.html, write this in foo,html
foo.html
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Navigation Bar</h1>
</div>
</div>
<br><br><br>
<div class="topcoat-navigation-bar topcoat-navigation-bar--bottom">
<div class="topcoat-navigation-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>
http://onsenui.io/themes/#navigation-bar
I've this in my main layout file
<body>
<header id="header" ng-controller="HeaderController"></header>
<div class="container" ng-view></div>
I've a header.html partial template in my directory structure.
How to include this template in my app? I thought angular automatically includes the template after processing the controller, but it doesnt work.
The header node should be replaced with the content of this file.
One way of including templates/html fragments from external files is to use the ng-include directive (doc).
<ng-include src="'/path/to/the/header.html'"></ng-include>
or
<div ng-include src="'/path/to/the/header.html'"></div>
From Angular 2, ngInclude has been removed and custom directives are preferred. This is the way I come up with
Define the main component for your app, which link to the master page
#View({
templateUrl: 'client/app/layout/main.html',
directives: [ROUTER_DIRECTIVES, Navigation, Footer]
})
#Component({selector: 'app'})
#RouteConfig(
routerConfig
)
class MainComponent {
}
And this is the main template
<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->
<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->
<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
Define a base.html, which will contain the body tag and the app tag
<body> <app>Loading ...</app> </body>
Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates
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>