I am using two visual templates for a particular site, whose css conflicts quite a bit, so rather than doing a painful edit, I figured dynamic loading would do the trick.
So I use this in my <head>
<!-- css is loaded dynamically through angular -->
<link ng-repeat="item in css.files" ng-href="{{item}}" rel="stylesheet">
And set $rootScope.css.files inside my .config() of my module.
The CSS loads fine, however there is a noticeable delay between loading the page content, and loading the CSS. Basically the unstyled html displays for a moment until the CSS files have completely loaded.
Is there any way to stop the page showing before the CSS has loaded? Is there any event for load completion of an ng-href item?
The easiest way will be to just use plain old css.
In the header of your page add this:
<style>
html, body {
display: none;
}
</style>
Then in the last css to load, undo the display none:
html, body {
display: block;
}
The latter will override the previous, and your page will appear with all of your dynamic css.
The problem here is that you're revealing the content before the CSS files have downloaded. I don't know offhand if the HTMLLinkElement object has an event for when it's loaded, but basically you need to wait for your CSS to download before revealing the content. Using ng-cloak here won't help because ng-cloak hides the content while angular is loading, not while other files are loading.
Related
In my index.html file I have the following code:
<body>
<div ui-view></div>
<div ng-include="footer.html"></div>
</body>
The problem is that the footer is displayed before the dynamic content related to the active state is loaded and rendered.
I tried to use the event $viewContentLoaded but this event is fired when the view content has been loaded not when it has been compiled.
I used ng-include in index.html because my footer is generic and should be used in all the app pages.
How to solve this problem?
put your angular script includes in head not at the bottom of the page.
ui-view means nothing until angular is loaded.
you might also want to use a sticky footer to prevent any issue with the footer jumping about.
stick footy for bootstrap is here ...
https://getbootstrap.com/examples/sticky-footer/
Instead of assigning url to ng-include you can bind scope variable and that scope variable value can be changed with actual URL from the directive which was reused in all your views using two way binding '='
I have a particular rounded button, with his CSS, but when I use it, my CSS blow up, because there are Ionic CSS "standard" rules.
My .button class is ruinded by the .button CSS class of Ionic.
I already tried to change name to my .button class but nothing. The only way to get my button is to not import the Ionic.css file, but of course, I need it for the other elements,
My button is nested inside other elements, for which I need the Ionic CSS
So, I need to know if is possible to exclude a specific HTML tag from the Ionic CSS rules, without edit Ionic.css file
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better solution is, to set up an Sass environment. Then you can use only the components you need.
And other solution, but a bit dirty, is, to override the rule with a deeper selector. Maybe with .container .button or div.button or button.button or body .button.
You can use other class name in your custom css and use the property !important in each of your css rules. Anyway you could change the order of the imports.
I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.
I have:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
the modal opens at the top, without animation whatever i set for animation or placement
Am i missing more css or js requirements not in the docs?
Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
This is actually mentioned on the github page but not in the docs so i missed that.
The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:
data-placement="center"
.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css
or just copy the part for centering modals:
.modal.center .modal-dialog {
position:fixed;
top:40%;
left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
I have a menu that slides when some button is cliked, but at beginning this menu is hidden, something like that:
<div ng-show="menuShow">
my menu here...
</div>
The issue is when the page is loaded the menu is not hidden (probably because the ngShow directive wasn't loaded) and then they disappears (probably because the ngShow directive was loaded) and making a strange "blink effect" with the menu.
What is the best way to deal with this issue??
The quickest and simplest thing to do would be to add the ngCloak directive to the element.
<div ng-show="menuShow" ng-cloak>
my menu here...
</div>
As long as Angular is loaded synchronously in the head section of the document, this should prevent the flicker.
If you're not loading Angular synchronously, then according to the docs, you could manually add the CSS to the page:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
And if this isn't possible for some reason, you can you just have all the Angular content not in the page on initial load, but included by an ng-include, ng-view or ui-view directive, or custom directive that includes its own template. (This is how I do it, but more for structural reasons)
I couldn't get ng-cloak to work, even when applying the CSS rules, so I ended up using ng-if.
https://docs.angularjs.org/api/ng/directive/ngIf
It results in a bit more overhead as Angular will actually remove the object from the DOM and reload it every time the value of ng-if changes, but in my case this was not very frequent and the overhead was not noticeable.