#angularjs tutorials

AngularJS Interview Questions & Answers

1. What is AngularJS?

AngularJS is a javascript framework used for creating single web page applications.  It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly.

2. Explain what are the key features of AngularJS?

The key features of AngularJS are

Scope Controller View Model Services Data Binding Directives Testable Filters 3. What is scope in AngularJS?

Scopes are objects that refer to the model. They act as glue between controller and view.

4. What are the controllers in AngularJS?

Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.

5. What are the services in AngularJS?

AngularJS come with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

6.What Are Filters? Explain Different Filters Provided By AngularJS?

An AngularJS Filter changes or transforms the data before passing it to the view. These Filters work in combination with AngularJS expressions or directives. AngularJS uses pipe character (“|”) to add filters to the expressions or directives. For example:

<p> {{ bid | currency }} </p> The above example is an expression enclosed in the curly braces. The filter used in this expression is currency. Also important to note that filters are case-sensitive.

AngularJS provides following filters to transform data.

currency – It is used to format a number to a currency format. date – It is required to format a date to a specified format. filter – It chooses a subset of items from an array. json – It formats an object to a JSON string. limitTo – Its purpose is to create an array or string containing a specified number of elements/characters. The elements are selected, either from the beginning or the end of the source array or string. This depends on the value and sign (positive or negative) of the limit. lowercase – This filter converts a string to lower case. number – It formats a number as text. orderBy – It enables to sort an array. By default, sorting of strings happens alphabetically. And sorting of numbers is done numerically. It also supports a comparator function where we can define what will be counted as a match or not. uppercase – This filter converts a string to upper case. 7.Explain What Directives Are? Mention Some Of The Most Commonly Used Directives In AngularJS Application?

AngularJS extends the behavior of HTML and DOM elements with new attributes called Directives. It directs the AngularJS’s HTML compiler ($compile) to attach a unique action to that DOM element. This AngularJS component starts with the prefix “ng.”

Following is the list of AngularJS built-in directives.

ng-bind – The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression. If there is any change in the value of the given variable or expression, then the content of the specified HTML element will also be updated accordingly. It supports one-way binding only. ng-model – This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for linking the view into the model. Directives such as ‘input’, ‘text area’, and ‘select’ require it. It supports two-way data binding. ng-class – This directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. ng-app – Just like the “Main()” function of Java language, this directive marks the beginning of the application to AngularJS’s HTML compiler ($compile). If we do not use this directive first, an error gets generated. ng-init – This is used to initialize the application data so that we can use it in the block where it is declared. If an application requires local data like a single value or an array of values, this can be achieved using the ng-init directive. ng-repeat – This repeats a set of HTML statements for the defined number of times. The set of HTML statements will be repeated once per item in a collection. This collection must be an array or an object. We can even create custom directives and use them in our AngularJS Application.

8. Why AngularJS?

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment . Some of the advantages are:

   MVC implementation is done right.    It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.    Two way data-binding, form validations, routing supports, inbuilt services.    REST friendly.    Dependency injection support.    It helps you to structure and test your JavaScript code. 9. Is AngularJS compatible with all browsers?

Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

10. How to implement routing in AngularJS?

It is a five-step process:

Step 1: – Add the “Angular-route.js” file to your view. Step 2: – Inject “ngroute” functionality while creating Angular app object. Step 3: – Configure the route provider. Step 4: – Define hyperlinks. Step 5: – Define sections where to load the view. 11. List Down The Popular AngularJS IDE Plugins/Extensions For Web Development?

Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:

Sublime Text WebStorm Eclipse Netbeans Visual Studio 2012/2013 Express or higher TextMate Brackets ATOM 12. Mention what are the advantages of using AngularJS ?

AngularJS has several advantages in web development.

AngularJS supports MVC pattern Can do two ways data binding using AngularJS It has per-defined form validations It supports both client server communication It supports animations 13. Who created Angular JS ?

Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed by Google.

14. What Is The Difference Between One-Way Binding And Two-Way Binding?

The main difference between one-way binding and two-way binding is as follows.

5 Top AngularJS UI Frameworks

5 Top AngularJS UI Frameworks

These are some cool user interface frameworks which I think work well with AngularJS. They provide everything you need to bootstrap out your ng web application so that it “looks pretty” when it comes to your UI web components such as layout, forms, responsiveness, basic animations (some), icons, mobile support etc…

1. AngularSemantic

  AngularJS directives for…

Top 5 Maps and Geolocation AngularJS Modules

Top 5 Maps and Geolocation AngularJS Modules

Here is what we think are the Top 5 Maps and Geolocation AngularJS Modules.

1. Angular Google Maps by AngularUI angular-google-maps

AngularJS directives for the Google Maps Javascript API

GitHub

2. Angular Leaflet Directive by David Rubert angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library

GitHub W…

Top 5 Web Sockets AngularJS Modules

Top 5 Web Sockets AngularJS Modules

Here is what we think are the Top 5 Web Sockets AngularJS Modulesat them moment. With real-time messaging being all the rage with modern web apps it’s about time you had a look at using Web Sockets! In a nutshell, Web Sockets provide you with an open communication session between the user’s browser and a server so you can send and receive data instantly…

Top 5 Form Inputs AngularJS Modules

Top 5 Form Inputs AngularJS Modules

Here is what we think are the Top 5 Form Inputs AngularJS Modules.

1. ngTagsInput by Michael Benford ng-tags-input

Tags input directive for AngularJS

GitHub Website + Demo

2. jsTag by Eran Hirsch js-tag

Pure Angular Input Tags project

GitHub Website + Demo

3. Angular Placeholder Shim by Uri Shaked angular-placeholder-shim

Angular directive to make the…

Top 5 Testing and Mocking AngularJS Modules

Top 5 Testing and Mocking AngularJS Modules

Here is what we think are the Top 5 Testing and Mocking AngularJS Modules at the moment. There are many forms of testing with Angular apps such as integration/e2e testing, unit testing, performance testing etc… how do you keep on top of it all? Well AngularJS was designed with Testing in mind – dependency injection allows us to inject “mock” versions…