In the main template for our Angular 4 application, which is sort of the 'root' template. It contains the container elements for the content area of the page and a sidebar off to the side.
Everything is working great except for older browsers (our customers are very large companies that only have older IE's, so we have to support IE10 and IE11) where the app is really unresponsive (in terms of UI updating and css transitions framerate).
One thing I noticed is that even if I rely on change detection that's purely inside the scope of the main app component, it triggers and executes all of the template code for all of the child components (4 times, in fact).
Here's the main part of my template:
<div class="page-content sidenav-open" id="page-content" #pageContent (window:resize)="adjustMainContent()">
<div [class]="'sidenav ' + (isAnimating ? 'isanimating' : '')" [style.width.px]="sidebar.width" [style.marginLeft.px]="sidebar.isVisible ? 0 : -sidebar.width">
<div class="vertical-resize-bar" (mousedown)="dragStart($event)"> </div>
<div class="sidenav-widget search-widget">
<app-navigation>Loading navigation...</app-navigation>
</div>
</div>
<div [class]="'main-content ' + (isAnimating ? 'isanimating' : '')" (transitionend)="isAnimating = false" [style.width.px]="mainContentWidth">
<router-outlet></router-outlet>
</div>
</div>
Again, functionally, it works great (in Chrome and Firefox, etc...), but not older browsers/computers. I just want those variables in my template snippet there to not trigger change detection on the app-navigation component and its children and whatever component gets loaded into router-outlet.
Am I doing anything (or multiple things) obviously wrong here? I should mention that this is our first Angular app.
Related
Situation: I have a view where I'm including a fragment with ng-include. The fragment loads perfectly and works as expected when inside view where controller is defined.
My problem is, that when I want to include external component inside the "ng-include" fragment "myView.html", it doesn't show up. When including it inside the main view where the controller is, it shows up and works as expected.
Main view:
<div ng-controller="MyController">
<div data-ng-include src="'views/myView.html'"></div>
<!-- When loaded here, the component shows up -->
<!-- <div id="componentDiv"></div> -->
</div>
Fragment "myView.html":
<div>
<div id="componentDiv"></div>
</div>
The component is loaded inside the "MyController", where "componentDiv" is the "id" of "div" where the component is placed:
var testObj = new TestObj({"container": "componentDiv"});
Trying to do this to be able to use this fragment with full functionality in several places.
Any ideas or suggestions what to look up or try?
IMHO I think that by saying "...to be able to use this fragment with full functionality in several places" you just answered your question. What you need is to build a custom directive and use it in any place you like.
see directive samples e.g. Angular documentation on directives
Using Polymer 1.0 on Firefox 39.0 and Chrome 43.0
Polymer Starter Kit
I essentially have:
<body unresolved class="fullbleed layout vertical">
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel" narrow="true">
<div drawer>
Drawer
</div>
<div main>
Main
</div>
</paper-drawer-panel>
</template>
</body>
This is from the Polymer Starter Kit.
I removed the forceNarrow attribute from the paper-drawer-panel, and even tried adding the attribute narrow="false", but when I view the site in my browser on my laptop (15" screen), the panel is always in narrow mode. When I look at the narrow attribute in the console, it is set to true.
It is my understanding that both the drawer and the main content to appear side-by-side when the window is larger than responsiveWidth. So why am I not seeing this behavior?
Just add force-narrow NOT forceNarrow to your paper-drawer-panel and remove the javascript. Polymer javascript attributes in camelCase like forceNarrow will be matched to camel-case in HTML.
Using narrow=true won't work as this is the state of the drawer and will effectively hide the element forever.
In Polymer Starter Kit, inside app/scripts/app.js:
window.addEventListener('WebComponentsReady', function() {
document.querySelector('body').removeAttribute('unresolved');
// Ensure the drawer is hidden on desktop/tablet
var drawerPanel = document.querySelector('#paperDrawerPanel');
drawerPanel.forceNarrow = true;
});
The line drawerPanel.forceNarrow = true; forces the drawer panel to be narrow. You can comment out the line in order to get the appropriate behavior.
I believe this was included in the starter kit to demonstrate how to get the opposite behavior of always having a collapsible drawer.
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() == '/';
};
I'm running into some odd behavior when putting an ngInclude inside an ngIf or ngSwitch.
For example, take the following:
<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button>
<button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button>
<div ng-if="showIncTemplate">
<p>Included template:</p>
<div ng-include="'template.html'"></div>
</div>
<div ng-if="showInlineTemplate">
<h1>Inline Template</h1>
</div>
(http://plnkr.co/edit/gULbwnKb0gQS8DWz0V6U)
The buttons toggle an options to render the divs that follow. The inline example behaves as expected, with the content appearing or disappearing on click.
The div with the child include seems not to include the template when first drawn, but then includes it repeatedly on every subsequent redraw.
What's going on here? I do see some breaking changes around ngInclude, is there some other way I should be doing this? Or is this a bug in Angular?
Edit:
It looks like this is already in the angularjs github issue tracker:
https://github.com/angular/angular.js/issues/3627
They've fixed it in this snapshot:
http://code.angularjs.org/snapshot/
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).