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
Related
I have a single page angular application and this is my index.html file:
<html ng-app="myApp">
...
<div id="bash">...</div>
...
<div id="menu">...</div>
...
<div ng-view></div>
...
</html>
Then I have a home controller with its template and an about us controller with its own template as well. And I want their templates to come up in the ng-view which is happening already but I want the #bash to only come up when the url ends with /home and hide when the url ends with anything else.
I can't do that through the home controller because it's outside the ng-view
and I can't do this through a normal JS file as well because the application loads once.
I can go through each controller and have a js function that changes #bash's css and turns display into false but I'd rather just have a condition in one place and I'm sure it's doable. Any ideas?
Why couldn't you do that from the home controller?
<div id="bash" ng-show="bashShown()">...</div>
...
$scope.bashShown = function() {
return $location.path().endsWith('/home');
};
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 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?
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.
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>