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.
Related
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.
Have base html admin_layout.html where i wrote this:
<body>
<div ng-include="'/static/partials/admin_navigation.html'"></div>
<div ng-view></div>
Interested to know how may remove admin navigation from login page?
Tryed to set variable hide_menu in LoginCtrl and hide it with ng-if="hide_menu", but this doesn`t work for me. It hide menu in all admin panel.
UPD: Fixed it adding to navigation div Menu controller. Or better create menu directive?
UPD2:
Added in admin_app.js:
adminApp.run(function($rootScope, $location) {
$rootScope.location = $location;
});
and in admin_layout.html:
<nav ng-include="'/static/partials/admin_navigation.html'" ng-if="location.path() !== '/admin/login'"></nav>
Now everything work fine
Fixed problem using code that i wrote in UPD2 of my question
As far as i understand it right now, your Problem is that the value of "hide_menu" does not depend on the route you're currently in.
So i would suggest you set the value in the controller according to the page you are currently displaying. You could for example listen for the $routeChangeSuccess event and read out the $route.current object accordingly.
If you need more specific help, please provide a plunkr!
yes you can work it with ng-show or ng-hide.
like for those URL's you dont want to have the nav bar you can hide iot using ng-hide i.e.
URL for which you wants to hide nav bar -http://**.com/view1.html
<div ng-include="'/static/partials/admin_navigation.html'" ng-hide="URL == '/view1.html'"></div>
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
I am attempting to create a SPA using AngularJS as the main view for my website. I'm using ServiceStack on the server-side and can therefore cleanly serve HTML or JSON requests depending on what's accessing it. My main concern is the use of script blockers, preventing AngularJS from rendering the page properly. So far my main way of working is to render static pages, and inject a small script that redirects to the AngularJS-powered pages if it detects if Javascript is enabled. This works great since every URL works fine when the user begins at the static pages, but I've ran into a couple of snags.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
This causes the first page loaded to be loaded twice.
I'm looking for an alternative, but so far I haven't found any clean solutions. I was thinking about including the "?View=SPA" as a POST variable, but I'm still iffy on that implementation.
Any thoughts?
Instead of redirecting to an other page, I would implement both cases in the same HTML File as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>.hideIfNoScript {display: none}</style>
</head>
<body ng-app ng-init="msg = 'hello world'">
<input class="hideIfNoScript" ng-model="msg" />
<p class="hideIfNoScript">{{msg}}</p>
<noscript>
<p>Content without javascript</p>
</noscript>
<script type="text/javascript">
var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
myEl.removeClass('hideIfNoScript');
</script>
</body>
</html>
The CSS Class hideIfNoScript in the head section makes sure that all HTML Tags with this class are never shown to the user, if javascript is disabled.
The noscript tag shows the alternative content.
If javascript is enabled, the little script at the end of the body section makes those elements visible. And in this case, the contents of the noscript tag are hidden.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
Hide those links by default:
a[href*='SPA'] { display: none; }
This causes the first page loaded to be loaded twice
Use a cookie on a browser-check page which loads the first page in an iframe or redirects to it to avoid this.
References
Track Non-JavaScript Visits In Google Analytics
I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.
Say I have this 3 anchor tags
<li>View1</li>
<li>View2</li>
<li>View3</li>
Before
<div data-ng-include="" data-ng-src="default.html"></div>
Now when I click #/view1
//the ng-src of the html will change depending on the link clicked
<div data-ng-include="" data-ng-src="view1.html"></div>
Perhaps you are trying to do something as below:
HTML:
<!-- Dont use # in the hrefs to stop the template from reloading -->
<li>View1</li>
<li>View2</li>
<li>View3</li>
<div data-ng-include="selectedTemplate.path"></div>
JS:
$scope.selectedTemplate = {
"path":"view1.html"
};
ng-view is the main view of any Angular app, and is affected by the route changes. So all you anchor tags will only affect the ng-view template.
To load other partial views based on the main ng-view, ng-include is the correct way to go as you have mentioned already.
To load a view based on the main view (view shown in ng-view), you need to write mapping logic which depending upon the main view should load other partials (ng-include elements for page).
So your partial becomes like
<div data-ng-include='templateNameVariable'></div>
This variable has to be set whenever the ng-view changes on location change.
You can watch for $route $routeChangeSuccess event and change the templateNameVariable based on the active route (hence the view).
So there should a controller out side the ng-view directive which will orchestrate this, and you would do
$scope.$on('$routeChangeSuccess',function(event,current,previous) {
//Change the templateNameVariable to point to correct template here, based on current route.
});