Angular

What is use of $routeProvider in AngularJS?

$routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

Explain $q service, deferred and promises.

'Promises' are post processing logics which are executed after some operation/action is completed whereas 'deferred' is used to control how and when those promise logics will execute. We can think about promises as "WHAT" we want to fire after an operation is completed while deferred controls "WHEN" and "HOW" those promises will execute. "$q" is the angular service which provides promises and deferred functionality.

What is injector in AngularJS?

An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules. There is one injector per Angular application. Normally you don't need to interact with it directly. The injector is key to making dependency injection work in Angular. When you inject something (e.g., a service into a controller), the injector will lookup and then instantiate the service (if it wasn't instantiated already -- if it was, it will return the already-instantiated object).

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.

How to validate data in AngularJS?

AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in seamless way. Use novalidate with a form declaration to disable any browser specific validation. Following can be used to track error. $dirty − states that value has been changed. $invalid − states that value entered is invalid. $error − states the exact error. $pristine/$dirty tells you whether the user actually changed anything, while $touched/$untouched tells you whether the user has merely been there/visited.

What is AngularJS?

AngularJS is a Javascript framework used to build dynamic single page web applications.

How to make an ajax call using Angular JS?

AngularJS provides $https: control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https: can be used to get the data from server in the following manner: function studentController($scope,$https:) { var url = "data.txt"; $https:.get(url).success( function(response) { $scope.students = response; }); }

Which components can be injected as a dependency in AngularJS?

AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies. value factory service provider constant

What are the advantages of AngularJS?

AngularJS provides capability to create Single Page Application in a very clean and maintainable way. AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience. AngularJS code is unit testable. AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. With AngularJS, developer writes less code and gets more functionality. In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing. AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

What is bootstrapping in AngularJS?

Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping. Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM. Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

List at least three ways to communicate between modules of your application using core AngularJS functionality.

Common ways to communicate between modules of your application using core AngularJS functionality include: Using services Using events By assigning models on $rootScope Directly between controllers, using $parent, $$childHead, $$nextSibling, etc. Directly between controllers, using ControllerAs, or other forms of inheritance

What are compile & link options in Custom Directives?

Compile It traverses the DOM and collects all of the directives and deals with transforming the template DOM. The result is a linking function. Link The link function deals with linking scope to the DOM. Every directive is compiled only once and link function is retained for re-use. Therefore, if there's something applicable to all instances of a directive should be performed inside directive's compile function. Now, after compilation we have link function which is executed while attaching the template to the DOM. So, therefore we perform everything that is specific to every instance of the directive. For eg: attaching events, mutating the template based on scope, etc.

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.

What is data binding in AngularJS?

Data binding is the automatic synchronization of data between model and view components.

What is deep linking in AngularJS?

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Explain what is Dependency Injection in AngularJS?

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable. Dependency Injection is required for the following Separating the process of creation and consumption of dependencies. It allows us to create independent development of the dependencies. We can change the dependencies when required. It allows injecting mock objects as dependencies for testing. AngularJS uses dependency with several types Value Factory Service Provider Constant

How experienced are you with e2e testing? Explain how e2e testing of AngularJS applications works?

End-to-end (e2e) testing is the practice of testing an application from start to finish to determine whether all the components are working together properly. If unit tests are the first line of defense against bugs within the individual components, e2e testing can be thought of as the safety net that catches issues related to integration and flow within an application. The AngularJS team built Protractor, a Node.js application that can simulate user interactions and help developers test the overall health of their AngularJS applications. It's a good idea to ask an applicant about past experiences using Protractor to perform e2e testing on AngularJS applications.

What are AngularJS expressions?

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used. - javascript code snippets that can be written inside html, but can't support conditionals, loops and exceptions and do support filters Either written inside {{}} or inside directives like ng-bind="expression"

Explain Directives in AngularJS

Extended HTML attributes (pre-built ones come with the prefix ng-) ng-app, ng-inint, ng-model (two-way), ng-bind (one-way), ng-repeat, ng-if New directives are created with the .directive function In js declaration - use camel case (myDirective), in html invocation use a hyphen (my-directive) Can be invoked using an element name (restrict E), an attribute (restrict A), a class (restrict C) or a comment (restrict M) - by default the value is EA

What are the filters in AngularJS?

Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria. Currency, date, filter, json, limitTo, lowercase, number, orderBy, uppercase Added to expressions by using the pipe | You can make your own filter by registering a new filter factory function. To use different type of currency symbols we have to define our own symbol by using the unicode or Hexa-Decimal code of that Currency. E.g. - For Example If we want to define Indian Currency Symbol then we have to use (Unicode-value) or (Hexa-Decimal value) Indian Currency {{amount | currency:"&# 8377"}}

What is the difference between controller and link?

However, in keeping with the Angular way, most DOM manipulation and 2-way binding using $watchers is usually done in the link function while the API for children and $scope manipulation is done in the controller. This is not a hard and fast rule, but doing so will make the code more modular and help in separation of concerns (controller will maintain the directive state and link function will maintain the DOM + outside bindings).

What is internationalization and how to implement it in AngularJS?

Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

What is routing in AngularJS?

It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.

What is MVC?

Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts: Model − It is the lowest level of the pattern responsible for maintaining data. View − It is responsible for displaying all or a portion of the data to the user. Controller − It is a software Code that controls the interactions between the Model and View.

Configuring Ajax Requests

Name Descriptions data Sets the data sent to the server. If you set this to an object, AngularJS will serialize it to the JSON format. headers Used to set request headers. Set headers to an object with properties whose names and values correspond to the headers and values you want to add to the request. method Sets the HTTP method used for the request. params Used to set the URL parameters. Set params to an object whose property names and values correspond to the parameters you want to include. timeout Specifies the number of milliseconds before the request expires. transformRequest Used to manipulate the request before it is sent to the server. transformResponse Used to manipulate the response when it arrives from the server url Sets the URL for the request. withCredentials When set to true, the withCredentials option on the underlying browser request object is enabled, which includes authentication cookies in the request.

What are the disadvantages of AngularJS?

Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure. Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

What are the attributes that can be used during creation of a new AngularJS Directives?

Restrict The restrict attribute is how AngularJS triggers the directive inside a template. The default value of the restrict option is "A". The value of "A" causes the directives to be triggered on the attribute name. Other than "A", restrict option has "E" (only match element name), "C" (only match class name) and "M" (only match the comment name) or any combination among four options. TemplateUrl The templateUrl attribute tells the AngularJS HTML compiler to replace custom directive inside a template with HTML content located inside a separate file. The link-Menu (say, our custom directive name) attribute will be replaced with the content of our original menu template file. Template Specify an inline template as a string. Not used if you're specifying your template as a URL. Replace If true, replace the current element. If false or unspecified, append this directive to the current element. Transclude Lets you move the original children of a directive to a location inside the new template. Scope Create a new scope for this directive rather than inheriting the parent scope. Controller Create a controller which publishes an API for communicating across directives. Require Require that another directive be present for this directive to function correctly. Link Programmatically modify resulting DOM element instances, add event listeners, and set up data binding. Compile Programmatically modify the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.

What is $rootScope?

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

What is scope hierarchy in AngularJS?

Scopes are controllers specific. If we define nested controllers then child controller will inherit the scope of its parent controller.

What is scope in AngularJS?

Scopes are objects that refer to the model. They are the link between controller and view.

What is SPA (Single page application) in AngularJS?

Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. A single-page web application, however, is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers, and better overall performance for the end user.

Explain templates in AngularJS.

Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".

Why are there two "destroy" events associated with the termination of a scope in AngularJS?

The first $destroy is an AngularJS event associated with components like controllers or link functions. The second is actually a jqLite/jQuery event associated with the removal of a node, which may occur without a scope teardown.

How do you reset a "$timeout", and disable a "$watch()"?

The key to both is assigning the result of the function to a variable. To cleanup the timeout, just ".cancel()" it. The same applies to "$interval()". To disable a watch, just call it.

Which means of communication between modules of your application are easily testable?

Using a service is definitely easy to test. Services are injected, and in a test either a real service can be used or it can be mocked. Events can be tested. In unit testing controllers, they usually are instantiated. For testing events on $rootScope, it must be injected into the test. Testing $rootScope against the existence of some arbitrary models is testable, but sharing data through $rootScope is not considered a good practice. For testing direct communication between controllers, the expected results should probably be mocked. Otherwise, controllers would need to be manually instantiated to have the right context.

Explain AngularJS boot process.

When the page is loaded in the browser, following things happen: HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed. Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function. Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

How to implement routing in AngularJS?

With ngRoute, route is configured with $routeProvider, with ui-router it's configured with $stateProvider and $urlRouterProvider <a ui-sref="customersState"> Customers </a> vs <a href="#/customers"> Customers </a> $urlRouterProvider.otherwise('/customers'); vs $routeProvider.otherwise({redirectTo: '/customers'}); $state.go('customersState', {id:'123'}); vs $location.path( "/customer/123" );

How to create a service and factory in Angular:

app.service('MyService', function () { this.sayHello = function () { console.log('hello'); }; }); app.factory('MyService', function () { return { sayHello: function () { console.log('hello'); } } });

What is constant?

constants are used to pass values at config phase considering the fact that value cannot be used to be passed during config phase. mainApp.constant("configParam", "constant value");

What are the differences between service and factory methods?

factory() method is used to define a factory which can later be used to create services as and when required whereas service() method is used to create a service whose purpose is to do some defined task. a service is a constructor function while a factory is a function that must be called. a service is actually calling a predefined factory deep within the Angular.js file loaded into all AngularJS applications. - no matter what we use, service() or factory(), it's always a factory that is called which creates a provider for our service.

Explain ng-app directive.

ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

Which are the core directives of AngularJS?

ng-app − This directive defines and links an AngularJS application to HTML. ng-model − This directive binds the values of AngularJS application data to HTML input controls. ng-bind − This directive binds the AngularJS Application data to HTML tags.

Explain ng-bind directive.

ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control's data when model data is updated by controller.

Explain ng-controller directive.

ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

Explain ng-init directive.

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

Explain ng-model directive.

ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

Explain ng-repeat directive.

ng-repeat directive repeats html elements for each item in a collection.

What is provider?

provider is used by AngularJS internally to create services, factory etc. during config phase(phase during which AngularJS bootstraps itself).