New AngularJS Experienced Interview Questions And Answers

11. AngularJS dependency injection of value inside of the module.config?
Answer: The problem is that you are trying to inject a value object helpers in the config block of an AngularJS module and this is not allowed. You can only inject constants and providers in the config block.
The AngularJS documentation (section: “Module Loading & Dependencies”) gives the insight into this:
A module is a collection of configuration and runs blocks which get applied to the application during the bootstrap process. In its simplest form the module consists of a collection of two kinds of blocks:
Configuration blocks – get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
Run blocks – get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

12. Format Date time in Angular JS?
Answer: As the original string doesn’t include the “T” demarker, the default implementation in Angular doesn’t recognize it as a date. You can force it using new Date, but that is a bit of a pain on an array. Since you can pipe filters together, you might be able to use a filter to convert your input to a date and then apply the date: filter on the converted data. Create a new custom filter as follows:
app.
.filter(“state”, function () {
return function (input) {
return new Date(input);

Then in your markup, you can pipe the filters together:
{{item.myDateTimeString | state | date:’short date’}}

13. How to create angularjs filter which outputs HTML?
Answer: I think ng-class is directive you need for this job and is safer then rendering to the class attribute.
in your case just add object string with the id strings as the class and the value as the evaluated expression
‘icon-ok’:!phone.connectivity.infrared,
‘icon-remove’: phone.connectivity.infrared

on a side note, you should only use directives (built-in and custom) to manipulate Html/dom and if you needed a more complex HTML to render you should look at directive instead.

14. AngularJS – Access to child scope?
Answer: Scopes in AngularJS use prototypal inheritance when looking up a property in a child scope the interpreter will look up the prototype chain starting from the child and continue to the parents until it finds the property, not the other way around.
While the jam-‘s answer is the best way to handle this case, for future reference it is possible to access child scopes using a scope’s $childHead, $childTail, $nextSibling and $prevSibling members. These aren’t documented so they might change without notice, but they’re there if you really need to traverse scopes.
// get $childHeadfirst and then iterate that scope’s $nextSiblings
for(var cs = scope.$childHead; cs; cs = cs.$nextSibling) {
// cs is child scope

15. $routeParams doesn’t work in resolve function?
Answer: You need to use $route.current.params.key instead. The $routeParams is updated only after a route is changed. So your code should look along those lines:
NoteController.resolve = {
note: function($route, Note) {
return Note.get($route.current.params.key);

16. how to access the angular $scope variable in browsers console?
Answer:
Pick an element in the HTML panel of the developer tools and type this in the console
angular.element($0).scope()
In webkit $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console
Addons/Extensions
There are some very useful Chrome Extensions that you might want to checkout:

Playing with JS Fiddle
When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the url. When running like this you have access to the angular global. You can try it here
https://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite
If you load jQuery before angular, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with
angular.element(‘[ng-controller=ctrl]’).scope()
Of a button
angular.element(‘button:eq(1)’).scope()
… and so on.
You might actually want to use a global function to make it easier
window.SC = function(selector){
return angular.element(selector).scope();

Now you could do this
SC(‘button: eq(10)’)
SC(‘button:eq(10)’).row // -> value of scope.row
check here: https://jsfiddle.net/jaimem/DvRaR/1/show/

17. How to preventDefault on anchor tags?
Answer:
UPDATE: I’ve since changed my mind on this solution. After more development and time spent working on this, I believe a better solution to this problem is to do the following:
Click Here
And then update your css to have an extra rule:

cursor: pointer;

It’s much more simple and provides the exact same functionality and is much more efficient. Hope that might be helpful to anyone else looking up this solution in the future.

18. Difference between service, directive, and module?
Answer:  Think of a module as being a place to wire up a number of other things, such as directives, services, constants, etc. Modules can be injected into other modules giving you a high level of reuse.
When writing an angular app, you would have a top-level module which is your application code (sans templates)

services are mainly a way to communicate between controllers, but you can inject one service into another. services are often used as a way to get to your data stores and people will wrap the angular apps such as resource. This technique is useful since it makes testing (particularly mocking) quite easy. You can have services for doing other things like authentication, logging, etc.
directives are used for creating widgets or wrapping existing things like jquery plugins. Wrapping existing plugins can be a challenge and the reason you would do this is to establish a two-way data binding between the plugins and angular. If you don’t need two-way data binding then you don’t need to wrap them.

directives are also a place to do DOM manipulation, catching DOM-events, etc. You should not be doing DOM-related stuff in controllers or services. creating directives can get pretty complex, IMHO, I recommend first looking to API for something that will do what you are looking to do OR ask angular google groups for advice.

19. Confused about service vs factory?
Answer:
All angular services are singletons:
Docs (see Services as singletons): https://docs.angularjs.org/guide/services
Lastly, it is important to realize that all Angular services are application singletons. This means that there is only one instance of a given service per injector.
Basically the difference between the service and factory is as follows:
Skip code block
app.service(‘myService’, function() {
// service is just a constructor function
// that will be called with ‘new’
this.sayHello = function(name) {
return “Hi ” + name + “!”;

app.factory(‘myFactory’, function() {
// factory returns an object
// you can run some code before
return {
sayHello : function(name) {
return “Hi ” + name + “!”;

20. List out the differences between config and run methods in AngularJS?
Answer:
Config Block – Constants and providers can be injected into config blocks and this block can be created using the config method.
Run Block – Run block will be executed after the config block. The run block is used to inject constants and instances and this block can be created using the run method.
Eg :

angular.module(‘myTestModule’, []).
config(function (injectables) {
// config block

run(function (injectables) {
// run block