Frequently asked questions in AngularJS (For Intermediates who already knows Angular)
What is DIRTY CHECKING in AngularJS and how it works?
Angular has a concept of ‘digest cycle’. You can consider it as a loop. In which Angular checks if there are any changes to all the variables watched by all the $scopes(internally $watch() and $apply() functions are getting bonded with each variable defined under $scope).
So if you have $scope.myVar defined in your controller (that means this variable ‘myVar’ was marked for being watched) then you are explicitly telling Angular to monitor the changes on ‘myVar’ in each iteration of the loop. So when the value of ‘myVar’ changes, every time $watch() notices and execute $apply() to apply the changes in DOM.
This “Digest” is also called “dirty checking“, because, in a way, it scans the scope for changes. As all watched variable are in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM.
PROS : This is the way Angular achieves Two-way data binding.
CONS : If there are more watched variables in a single page (>2000–3000), you may see lag while page loading.(But I say if there are that many ‘watched variables’ in a single page, it is a bad page design :p)
How do I get ng-model from one controller to other?
$rootScope is indeed an option. But if you dump a lot of things to $rootscope , the app becomes heavy and inconsistent. If you want to pass very little amount of data between pages/controllers, it is ok to use $rootscope.
But If you consider performance of app, it is always better to use Service/Factory
How to upload files using AngularJS?
Uploading file is not as easy as Html file upload in AngularJs. Little bit of security features are added here. Let me explain the trick.
Html: ‘fileread’ is a custom directive
Directive: This helps bind the selected file and makek it ready to handle by controller
As you don’t know file type and extention,thus -> [‘Content-Type’: undefined].
And [transformRequest: angular.identity] will send any type of data to the backend.
Is $http service is a restful service from Angular?
First of all Angular Js is a client side scripting framework. Which does not give you anyRESTful web services, however you can consume existing RESTful web services by some of the services/factories provided by the framework itself.
$http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest(XHR) object.
$resource is a factory which creates a resource object that lets you interact with RESTful server-side data sources. It requires the ngResource module to be installed.
Can I use Angular and jQuery on the same element on webpage?
jQuery and AngularJS are supposed to work together in a transparent manner. If jQuery is loaded before AngularJS, AngularJS will actually use the available jQuery instead of a “mini” built-in jQuery clone (jqLite).
It is however mentioned in the FAQ () that “Angular 1.3 only supports jQuery 2.1 or above. So take care of version compatibility.
And you should use Jquery before AngularJs.
- <script src=“jquery.min.js”></script>
- <script src=“angular.min.js”></script>
What are advantages of Angular over jQuery?
Implementation of angular and jquery is different. Lets not talk “advantage” point of view. I want to put the basic differences in simple words, which will help you to understand where and when to use angular and jquery.
- Jquery is a library, which simplifies client side scripting . Where Angular Js is a framework, which internally uses jquery and has all the power of jquery and so much more.
- Jquery is all about the DOM, while DOM manipulation is one part of Angular framework.
- If you want to build a web site, jquery is helpful (It is not necessary to use a presentation framework all the time). But if you want to build a web application u need to think of angularjs .
- If you follow angular framework your code will be more clean, maintainable, scalable, testable , understandable.
How ever using less number of code lines, two way data binding, dependency injection, MV-VM design pattern, custom directive, rest friendliness these are advantages of angular over other JS frameworks not over jquery.
What does ng stands for in all directives of AngularJS?
As angular directives are directly injectable into HTML files ,all the predefind angular directives with ‘ng’ prefix makes them easily stand out from all html element/attributes and angular directives. Makes easier to debug codes. Mostly ‘ng’ is just an abbreviationof word ‘angular’…. and for creating custom directive you can give any name(‘ng’ is not mandatory that time).
Another point is that,you can use ‘data-ng’ instead of using ‘ng’ in all predefined directives. Angular just gave extra options.
Any new question can be posted as a comment below or on any of our social media
image credit : codecraft.com