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.
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?
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
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>