My be this is very basic, but I am really stuck here, here is my question :
I am using angular-ui-router with angular js
This is how my pages are structured (Left:Homepage, Right:Inner Pages (/about-us) ) :
Homepage (/)
Header
Content (100% width, one column)
Footer
so I create directives for Header, & Footer, and they will be common through out the site. & I load Content in ui-view, here is how my main template look like
<header-directive></header-directive>
<div ui-view></div>
<footer-directive></footer-directive>
And here are all the other pages strucure e.g (/about-us)
Header
Content Image/Map (100% width)
Content (75% Width)
Sidebar (25% Width)
Footer
So according to the Homepage structure above I need to load Content Image/Map, Content, and Sidebar in the UI-VIEW now, but Sidebar is common too, and that won't change on inner pages.
So the inner pages I only want to load Content Image/Map, and Content. Is there a way to achieve that ?
There is a very good blog post about UI-Router, http://www.funnyant.com/angularjs-ui-router/. Here the author creates similar example to yours, so I think it might help you.
Related
I'm trying to set one of my sub-pages as a landing page in my hugo.io page setup. But all I can find so far is the hint to change the content of the home.html file in my layout folder.
This is not what I want to do, because by this I will duplicate the existing layout file for the sub-page whis is error prone. Is there any Site parameter that sets my sub-page "Portfolio" to be my landing page?
My setup:
|content
|posts
|about
|portfolio
|work1 (This is a page bundle)
|work2 (This is a page bundle)
index.md (Page Content File)
_index.md (List File)
My template setup:
|layouts
|_default
list.html
single.html
|portfolio
list.html
single.html
index.html
home.html
So layouts/portfolio/list.html ranges through all my portfolio work. This works fine. The file is used when I navigate to localhost:1313/portfolios.
But for having the same content on localhost:1313/ I understand to duplicate the layoutfile to layouts/home.hmtl -> Is this correct? This seems utterly laborious to me. Is there a more convenient way to tell hugo "use the file content/portfolios/_index.md as my landing page"?
Hope you can help me, Thanks in advance!
One solution is to move the content of layouts/portfolio/list.html to a partial, then include this partial in both layouts/portfolio/list.html and layouts/index.html. This way you will not have to duplicate the code you use to list all of your work.
I would also advice you to read the documentation on order lookup for templates, specifically the section related to the home page, as this explains the order of which template files are included.
I want to create generic feature that allows me to change background image of any section. After going through options provided I found these two approaches. Want to choose best approach to change image because on single page I want multiple times change background facility. It will be available to four to five sections.
Approach
Using Directive check this stack overflow link.
Also there is another approach of angular scope variables that we can updates at runtime.
<div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div>
Required Usage ( With respect of Directive )
<body>
<section backgroundImage url="{{backgroundImageUrl1}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl2}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl3}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl4}}">
...
</section>
</body>
As shown above I am going to update background-image attribute for each section. If these property is set inside CSS file, it will reduce time to load images i.e. If we directly add inline css styling in HTML, all images will loaded on DOM load. It will make extra request to server to get images and load them in DOM. I wanted to follow strategy that will reduce loading time in my SPA(Single Page Application).
I think going with <div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div> should be more effective.
You dont introduce another layer of complexity, directives create scopes, which are watched and digested, also directives must be compiled in the begining.
Using symple ng-style together with some specific url from controllers property shoudl only do request for that particular active image. Because of that i think it should be the optimal solution.
I have my angularjs app that has a topbar navigation, a left sidebar navigation and the rest is for the content (using data-ng-view I get different views).
My question is, if I have a view called login and a route that redirects me to the login page, how can I show that view actually in the full screen of the page?
Now if I navigate to http://applicationurl.com/#/login the view is like this:
I want it to look like this:
I cannot figure it out how can I achieve this in AngularJS?
The html is something like this:
<html>
<head>
</head>
<body>
<header>...</header> // top navigation bar
<div id="container">
<nav>...</nav> //left bar navigation
<div id="content">
<div id="wrap" data-ng-view="">
// here are loaded all the views ...
</div>
</div>
</div>
</body>
</html>
The correct solution would be to move your header/footer/sidebar into Angular Views and then use the Angular UI Router to build the pages with multiple named views where needed.
If you do not want to modify your code, it is not possible to achieve what you want to accomplish. By virtue of your login page being rendered by ng-view, it will be inserted within that tag on the page. You could hide the header and navbar with ng-hide set on some scope variable that would be set when the login page was rendered, and then the variable could be reset upon successful login/traversal to another page. This is a bit hacky, and is certainly not ideal, but is a quick and dirty fix. If you want to learn and do it correctly, Justin's suggestion is a great place to start.
How can I show a spinner or loader gif animation while route is changing from one to another.
I am using ng view like as follows:
<div ng-view class="view-animate">
</div>
I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?
You can show and hide the loader when location change starts and is completed, respectively.
Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.
HTML Code inserted below just to keep SO happy...
<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>
I hope it helps.
Abhi.
In my current SPA application, the index page shows Login form (default router) which doesn't have header & footer ,
When User Logs in account , router takes user to after login page and Header & footer are shown ( as per app requirement). My index.html looks like
<code>
<html>
<header ng-class="{hide:loginPage}">
</header>
<ng-view></ng-view>
<footer ng-class="{hide:loginPage}" ></footer>
</html>
</code>
but there is a problem. When User Routes to Default Login, fraction of a second The header & footer gets displayed. is there any best way to achieve result
Please guide how to fix this ?
I think you're looking for ng-cloak: http://docs.angularjs.org/api/ng.directive:ngCloak. Your header and footer are briefly flashing because the hide class isn't applied until the ng-class expression is parsed.
What I would do is to add an ng-include in my footer and header to selectively load what I need
Check this demo from angular page. It may help:
http://docs.angularjs.org/api/ng.directive:ngInclude