I just started learning AngularJS and I'm not really familiar with the terminologies in AngularJS yet. Here's my concern, I created a Loading Animation that shows up when I go to pages, but then I want to stop the Loading Animation as soon as all the contents of the pages has loaded. It's fairly easy to do in plain jQuery since I can just trigger $(window).load() but it doesn't seem to work in angular. $(document).ready() seems to work but that's not what I actually need since it gets triggered even though the images are not finished loading yet. I already tried $scope.init inside my controller as well as $window.onload inside my controller but I still can't make it work.
Hotfix answer
Actually you do not need to wait for any of these events in angular.
Just use $().. in your angular controller - the site was already loaded. (similar to the window.load() event. In case jquery does not find the html elements please try to wrap it with $timeout( function() { ... } );
Recommendation
Please do not! There are angular ways to animate stuff which fits better than crazy $('#id'). logic. This will break in growing applications.
I would recommend you forget about jQuery when you are working on AngularJS application. So figure out how to work everything out in AngularJS way - move all jQuery logic that you have to angular controller and avoid direct DOM manipulation (jQuery way).
Also, there's a good tutorial online if you are moving to AngularJS from jQuery:
https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers
If you need a solution for switching pages go with ui-router - it will give you even more flexibility with loading pages and resolving properties for different pages:
https://github.com/angular-ui/ui-router
And in this particular case you can use simple boolean property on $scope and show preloader div based on that:
<div ng-show="showOverlay" class="loader" />
then inside your controller you could put something like:
$scope.showOverlay = true;
and then after your page logic is loaded and promises are resolved you could just hide that preloader with:
$scope.showOverlay = false;
To illustrate I created simple fiddle with preloader for you. Also keep in mind there are tons of different ways of implementing this but this is simple one that should work for almost any case:
https://jsfiddle.net/pegla/ng1mn8qp/3/
There's also one answer here on stack overflow that could help you:
How to execute angular controller function on page load?
Related
I'm coding a website using Angular JS 1.5 and making heavy use of the new component directive; So far, it is great. I love the components system.
But I'm having a bit of trouble getting jQuery 3.0 and angular components to talk to each other. Take this code, for instance;
(function($){
$(document).ready(function() {
$('[animate-bounce]').velocity({
translateY: '10px'
}, {
loop: true
}).velocity('reverse');
});
})(jQuery);
This works fine on a normal page, but because of the nature of how component works, it doesn't apply to components that are instantiated after $(document).ready. That makes sense, of course. They don't exist, so it can't wire up to them.
I know about the component lifecycle; Specifically, the $onInit function. I know that I can hook the jQuery into that. But I'm wanting certain jQuery code to apply to any component that gets activated, and I wanted to try and keep the activation of it out of the component code.
Is this possible to do? Is there a 'global' $onInit for component that will let it run jQuery bindings when any component loads? Or is there a replacement for the old live() binding in jQuery that will trigger when new DOM is added?
Ciel, your are attempting jQuery in Angular app where entire angular life cycle does not allow jQuery to interfere. Though it is not impossible to achieve but I will recommend to not use it due to following reasons.
jQuery events and data bindings will not handled by Angular so forget about events and data removal.
Handling JQ events extensively will kill the purpose of using Angular as framework.
-Workaround -
Try using Angular component as much as possible, you may give a hand using link and compile functions while creating an Angular component.
Hope this will hep
I'm having problems in several cases when attempting to update data / onscreen controls and then use these controls with jQuery, especially images. My present case is the following:
button click ---> call angularJs function that creates div controls on the screen ---> angularJS function at the end call JS function ---> JS function call JQuery selectors for the created divs.
The problem is that JQuery can't find the created divs.
What is the best/indicate solution for this case? (not only for this case, but for the cases where we need to wait for the dom render complete)
Regards.
There could be several cases that could apply depending on your implementation. First make sure jQuery doesn't override angularjs functionality or vice versa. Second angularjs makes any JavaScript code in script tags invalid. You have to include your JavaScript in your controllers. You can use debugging tools like Firebug to see what's going on. Posting some code here would also help a lot.
I just got thrown into the Umbraco ASP.NET CMS for my latest project, I'm not sure if this is how it across the board but for my setup Knockout.js is doing all the templating.
I'm not too keen on knockout.js but so far it's been pretty straight forward except for when I start adding in some jQuery stuff, the problem I'm having is jQuery is firing before knockout has finished populating the page with all the elements.
The only solution that's worked for me thus far is all my jQuery stuff is wrapped in the setTimeout() function, which obviously is no good.
What's the most efficient way to make jQuery and Knockout work together so jQuery doesn't before knockout is done?
I recently had the same issue with the jSignature plugin and my Knockout view. I needed the KO view to have fully rendered before I invoked jSignature, otherwise it didn't size itself correctly.
I fixed it with a template binding and an afterRender callback function to invoke the jQuery work.
Here's the KO docs:
http://knockoutjs.com/documentation/template-binding.html
Here's a quick jsfiddle showing how you can use it:
http://jsfiddle.net/PCbFZ/
The trick is that you can use the afterRender callback of the template binding without actually using a template itself. Instead, you wrap all your existing HTML in a div that will invoke the afterRender callback:
<div data-bind="template: {afterRender: initApp}">
<!-- your existing HTML here -->
</div>
initApp is the function that does the jQuery work.
I think that should generally do what you need, though if your HTML is particularly complex, or you have many views you need to render inside the one page, you might need to do a bit more work. Let me know how you get on - maybe I can try to help a bit more if this doesn't quite fix your issue as easily as it did mine!
Update - following the comment from JACL below - here's an extended version of the fiddle showing this technique also working with ko-if. Each time you show/hide the 'widget' using the checkbox, a different random colour is applied to indicate the afterRender function doing its work.
http://jsfiddle.net/PCbFZ/15/
You might use:
$(window).load(function(){ /* code */ }); instead of $(document).ready();
Perhaps window.load instead of document.ready will do the trick
Right now, I am taking a look at Angularjs after spending sometime playing with twitter's bootstrap. I really like bootstrap because it's easy, sleek and very mobile-friendly. Now for angularjs, I see people recommending it instead of Jquery and going as far as in saying that, DO NOT USE JQUERY AT ALL and do everything on angularjs.
This question and answers helped to shape some of my beliefs and why I should move to angularjs than jquery.
How do I “think in AngularJS” if I have a jQuery background?
Accepted answer to this question ( which is very well-detailed!) goes like this on its overall summary:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Even the FAQs from angularjs website says not to use it Angularjs FAQs.
DOM Manipulation
Stop trying to use jQuery to modify the DOM in
controllers. Really. That includes adding elements, removing elements,
retrieving their contents, showing and hiding them. Use built-in
directives, or write your own where necessary, to do your DOM
manipulation. See below about duplicating functionality.
If you're struggling to break the habit, consider removing jQuery from
your app. Really. Angular has the $http service and powerful
directives that make it almost always unnecessary. Angular's bundled
jQLite has a handful of the features most commonly used in writing
Angular directives, especially binding to events.
The concept of angularjs seems tempting. In fact, who would not like abstracting away DOM manipulation logic? However, bootstrap makes it so much easy when you are designing web-pages but since bootstrap uses jquery, bootstrap and angularjs together means that the code and overall web-page is still dependent on jquery. Is this mixer completely undesirable? If so then, what is the best way to keep hanging to bootstrap while using angularjs? Simply saying, I don't care so much about jquery but I like bootstrap.
I might be talking in circles here so I will try to reword what I am saying in a single sentence.
What is the best way to use angularjs and bootstrap together without creating spaghetti code where one place is so jquery-based and next angularjs-based?Or is the idea of using bootstrap and angularjs together is conceptually against what angularjs was meant for?
When trying to integrate jQuery things in to Angular, the best approach is to wrap it in a directive. This is what Angular-Strap originally did, but the recent version upgrade to 2.0 completely removed those dependencies and does it all in Angular (and it is a much better product for having done so.) This is the same method that Angular-UI took from day 1 and that continues today.
When you do something like this, the biggest hurdle is trying to keep things "Angular-ized" when working with the DOM. The examples that both Angular-Strap and Angular-UI can provide if you look at the underlying code are very good and should give you the right direction.
I have proof of concept imagemap code using angularjs here.
I am writing something to behave the same as the jquery example that I put together here.
You'll note in the first example doesn't work because the imagemap is being populated by a scope variable, so on page load the image src is a 404. This prevents the imagemap from activating at all. I would really appreciate help understanding how to fix this problem.
I used the $timeout service to wait for the DOM to be rendered as described here: Slick Carousel with Angular JS
However, I needed to specify an actual timeout value as the default didn't work in my case (for both slick and mapster)