I am building an Angular app and hitting a bit of a snag in how to handle the home page. The home page is 90% different - only the header stays the same - in there I have directives that show user login state for ex.
To make use of routing/templates etc I'd ideally like to have my ngview in the white area of sample shown - that all works fine - just not sure how to build the home page. It doesn't need an ngview area persay since it's the only one of it's kind. I don't want to make it as a second apps however as that seems wasteful and would reload everything.
Googling this brings up suggestions of replacing the white area with a directive but then I think I would lose the whole routing/template benefit.
Alternatives I have seen have code to determine if on home and load a body CSS class etc but that is not ideal either as the content is so different.
UI Router is a possibility but I'd like to avoid prebeta stuff if possible.
Suggestions?
You could have this:
index.html:
<body>
...header..
<div ng-if="isHomePage()">
<div ui-view></div>
</div>
<div ng-if="!isHomePage()">
<div ng-include="'shell.html'"></div>
</div>
...footer..
</body>
home.html (with route '/')
...your home page html...
shell.html (any route different than '/')
<div>
<div>
<div ui-view></div>
</div>
<aside><aside>
</div>
finally, add isHomePage() to your root scope
$rootScope.isHomePage = function() {
return $location.path() == '/';
};
Related
I'm trying to display loading screen inside router outlet till data is received.
here is my code inside index.html
<root>
<div class="app-content text-center">
<div class="app-content-body" >
<div class="loader_div" >
<div class="loader"></div>
</div>
</div>
</div>
</root>
which works as expected but as I try to execute same code inside It remains Inside the screen even after the screen Is loaded.
One possible solution is that I can subscribe in router event and use instanceof NavigationStart and NavigationEnd.and use ngIf to remove the DOM from routeroutlet.
Is there any other easier way to solve that?
Edit1: After subscribing in router event I realized it wasn't wise decision. Because in case more than one nested router-outlet It'll show refresh screen in whole page instead of the part where the child router-outlet is located.
When I inspect DOM, <ng-component> doesn't replace <router-outlet> instead it's loaded after finishing tag.(</router-outlet>)
Is it a bug of Angular2?
Say I have index.html with:
<div ui-view="viewA">
// content
</div>
Is it posible to put content inside div that will serve to me as default route? So without including or anything else, just need to put some markup directly in that div.
There is a working plunker
That is possible, and really pretty easy. So, let's have this inside of index.html
<div ui-view="">
this is the content of ui-view,
which serves as a template for a default state
</div>
And this could be the default state and otherwise
$urlRouterProvider.otherwise('/default');
// States
$stateProvider
.state('default', {
url: "/default",
})
Check it here
In my app for android I have multiple html's, most of them have the same footer with three icons, but some of the pages have different footers with 2 or 3 icons.
What is the correct way to accomplish this?
Because I would like to maintain mu ion-footer-bar in the main.html with the ion-header-bar, ion-nav-bar and ion-nav-view(where are showed all htmls).
I've tried to use a sort of ng-repeat with conditional reading of a structure depending on the current page, also using a tabs.html with different sections with different id's, none of the two solutions is working and I messed to much the code, so while I continue trying I would like to know if one of these approximations is correct.
thanks
You could use ng-show and ng-include to conditionally load in the right template from a set of footer html templates.
<div ng-show="$scope.template == 'footer_one'" >
<div ng-include src="'/partials/footer_one.html'"></div>
</div>
<div ng-show="$scope.template == 'footer_two'" >
<div ng-include src="'/partials/footer_two.html'"></div>
</div>
You'd need to programmatically set the $scope.template variable based on some condition in the controller.
A simple ng-include causes the page to recursively print out the whole site over and over in an area of the page, this causes the browser to crash. If I change the path the same thing happens so apparently it's not even looking at the path. If i use ng-include anywhere on the page the same weird behavior will happen.
The template (list.html) is in a sub-folder to where the angularjs scripts are.
HTML
<div ng-if="comments_data">
<div ng-include="'templates/list.html'"></div>
</div>
Template
<li ng-repeat="comment in comments_data">
{{ print_some_stuff }}
</li>
Can you please try:
<div ng-if="comments_data">
<div ng-include="'/templates/list.html'"></div>
</div>
The slash at the beginning of the path was the issue for me. Check your router and see how templates are loaded (should be the same way with a leading slash).
Can you check if this will be useful.
<div ng-include="'templates/list.html'" ng-controller="CommentsController" ng-show="isCommentAvailable()"></div>
.controller('CommentsController', function() {
$scope.comments_data;
$scope.isCommentAvailable = function() {
if ($scope.comments_data)
return true;
else
return false;
}
}
Hey all I'm trying to get a feel for angular and have ran into a little snag.
I have a container structure like the following:
<div class="main-container" ng-view>
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
Before I implemented Angular I just had a simple script that would check the height of the window and set the height of the left column and right column divs accordingly.
With angular there is probably a better way to do this then attaching an event function to the window object. Basically I want to fire a function everytime a new view is rendered but not duplicate the below code in all of my angular controllers like so:
$scope.$on('$viewContentLoaded', setColumnHeight);
Any help would be appreciated. Thanks!
I've solved this problem in my app by having a root "Application Controller" at the top of the DOM tree. For example:
<body ng-controller='applicationController'>
...
<div class="ng-view"></div>
...
</body>
applicationController is always there, and can set up bindings on its scope when it is created.
How about putting that event listener on the root scope:
$rootScope.$on('$viewContentLoaded', setColumnHeight);
You could use something like this:
<div class="main-container" ng-view>
{{ setColumnHeight() }}
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
and it will check the height every time a render is made, however, this seems to be a bit over processing.
The best approach would be to only update the height from both columns when the height of one of them changes. For that you could use DOM Mutation Observers, however they are not yet available on all browsers. If that's not a problem for you, check the mutation-summary lib.
If you are using jQuery you can also try this: https://github.com/jqui-dot-net/jQuery-mutate (examples here).