When Angular is bootstrapping or intially digesting forms that are loaded are temporarily $valid even though they have no values, which causes some charts I have to blink whenever those views are loaded. How/Where would you debounce this, or $watch for initial loading to be complete?
Related
Using angular-widget we are hosting a lazily loaded angularjs app. I've created a service in the hosting application to expose a loading screen, that widgets can use to tell the hosting app to show/hide the loading screen.
The loading screen is triggered by setting Loading on $rootScope to true. The service simply exposes a show() and hide() method and keeps track of who asks for the loading screen, in case of multiple things asking for a loading screen at the same time.
When triggering the service in the hosting application, it works just fine. However, triggering the same service in the hosted application, it seems that the update to $rootScope.Loading happens, but the view in the hosting app doesn't update. I know the update is happening, because I put a $watch on $rootScope.Loading which does trigger, but like I said, the view doesn't update to reflect the change.
I've got a plunker here. Am I missing something?
Turns out I just needed to add widgetsProvider.addServiceToShare to my config. Once that was added, the view started updating as expected.
How does AngularJS implements the 2-way data binding? The view to model update is understandable i.e. it can be achieved through the JS listeners but I wanted to understand the model to view update? As at the core angular models are js variables, so how does the Angular listen to the change in js vars?
I know that each model has a watch which compare the new value with the old one but what triggers this check(the js implementation)?
Does it uses Javascripts watchers or a time interval for checking?
Angular defines a concept of a so called digest cycle. This cycle can
be considered as a loop, during which Angular checks if there are any
changes to all the variables watched by all the $scopes. So if you
have $scope.myVar defined in your controller and this variable was
marked for being watched, then you are explicitly telling Angular to
monitor the changes on myVar in each iteration of the loop.
Basically AngularJS binds event handlers to any element that interacts with Angular ($scope, directive, ...), every time the event fires, $apply is called which internally calls $digest which will trigger the re-evaluation of all the $watches.
AngularJS made a smart assumption that model changes happen only on user interaction / events:
DOM events
XHR responses firing callbacks
Browser's location changes
Timers (setTimout, setInterval) firing the callbacks
Or trigger on certain events
Input directives+ngModel, ngClick, ngMouseOver etc.
$http and $resource
$location
$timeout
When one of these 'assumptions' is triggered, the digest cycle is kicked off:
To quote Pawel Kozlowski, Mastering Web Application Development with AngularJS:
AngularJS does not use any kind of polling mechanism to periodically
check for model changes
More detailed insights
Have a look at https://www.youtube.com/watch?v=SYuc1oSjhgY for a really deep dive into the digest cycle.
https://docs.angularjs.org/guide/bootstrap
In this guide it says "Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js"
But what exactly does it mean in the next statement "Angular initializes automatically upon DOMContentLoaded event". Can anyone explain what this initialize means and then how angular.js can block the HTML loading?
When the HTML parser comes across any script elements, It assumes that document.write may be present in the script and it blocks HTML loading. That's why it's recommended to load all scripts at the bottom of the page to ensure page loads fast.
By the statement, Angular initializes automatically upon DOMContentLoaded event, it means that angular bootstraps the app once the DOM is ready.
When I was testing the order of events in ui-router, I was expecting that $stateChangeSuccess would be after $viewContentLoaded but it was not, as shown in the screenshot below:
If I am loading the views remotely, via templateUrl property, it may take sometime for it to load (depending on the network connection). I was showing my loading indicator by watching stateChangeSuccess/Error event and I don't want the loading indicator to stop prematurely when the view is not loaded yet. I guess I would watch $viewContentLoaded event but I want to be consistent with my watches (stateChangeStart/Success) etc. I am wondering if stateChangeSuccess actually waits until after view content loads?
It always loads in that order.
I just tested it by putting a delay in a resolve and in templateProvider (to delay view) and in both cases order of events were same.
Also, when I delayed the view load in templateProvider, $stateChangeSuccess did not fire until the view is loaded (there was nothing in resolves to delay it). So, $stateChangeSuccess does not fire before the view is loaded.
I have a web app built with AngularJS and it includes various routes/controllers/views/etc.
Several views require directives that I include. I've noticed though that when I change the route and a new template is loaded the directives from the old template continue to be run. Simply creating a directive that logs to console you'll continue to have it logging when the new route is loaded.
Is there a way to avoid this? It seems a bit of a waste of memory.
You need to unbind events bound to within the directive.
For example, if you had a resize event bound to the window you would do the following:
$scope.$on('$destroy',function() {
angular.element($window).unbind('resize')
})