1. Explain me what is injector?
An injector is a service locator. It is used to retrieve object instances as defined by provider, instantiate types, invoke methods and load modules. There is a single injector per Angular application, it helps to look up an object instance by its name.
2. Tell me when should you use an attribute versus an element?
Use an element when you are creating a component that is in control of the template. Use an attribute when you are decorating an existing element with new functionality.
This topic is important so developers can understand the several ways a directive can be used inside a view and when to use each way.
3. What is ng-disabled directive?
ng-disabled directive disables a given control.
In below example, we've added ng-disabled attribute to a HTML button and pass it a model. Then we've attached the model to an checkbox and can see the variation.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>
4. Tell me what is string interpolation in Angular.js?
In Angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.
5. Tell me 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.
6. Tell me how $scope.$apply() works?
$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)
Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values
7. Explain what are the characteristics of “Scope”?
☛ To observer model mutations scopes provide APIs ($watch)
☛ To propagate any model changes through the system into the view from outside of the Angular realm
☛ A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
☛ Scope provides context against which expressions are evaluated
8. Tell me is AngularJS extensible?
Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.
9. Explain routing in AngularJS?
It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.
10. Explain me 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.
11. What is 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.
12. Explain me what is the difference between ng-show/ng-hide and ng-if directives?
ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.
ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.
We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.
13. Explain me what is scope in AngularJS?
Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.
14. Tell us what Browsers Do AngularJS Support?
AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).
It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.
Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.
15. Tell me what is internationalization?
Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.
16. Tell me directives in AngularJS?
Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.
17. Explain me which are the core directives of AngularJS?
Following are the three 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.
18. Explain me 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
Traceur compiler compiles ECMAScript Edition 6 (ES6) (including classes, generators and so on) code on the fly to regular Javascript (ECMAScript Edition 5 [ES5]) to make it compatible for the browser.
20. 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
21. Explain me what is factory method?
Using factory method, we first define a factory and then assign method to it.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
22. Explain the advantages of AngularJS?
Following 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.
23. What is ng-click directive?
ng-click directive represents a AngularJS click event.
In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
24. Tell me what is $rootScope and how does it relate to $scope?
$rootScope is the parent object of all $scope Angular objects created in a web page.
25. Tell me what is directive and Mention what are the different types of Directive?
During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as directive. It is executed when the compiler encounters it in the DOM.
Different types of directives are
► Element directives
► Attribute directives
► CSS class directives
► Comment directives
26. What are Controllers in AngularJS?
Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.
27. Explain with options on page load how you can initialize a select box?
You can initialize a select box with options on page load by using ng-init directive
<div ng-controller = “ apps/dashboard/account ” ng-switch
On = “! ! accounts” ng-init = “ loadData ( ) ”>
28. Explain me 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.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
29. What is 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.
30. Tell me 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.
31. What is 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".
Uppercase filter converts a text to upper case text.
In below example, we've added uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $https: is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.
34. Tell me what makes the angular.copy() method so powerful?
It creates a deep copy of the variable.
A deep copy of a variable means it doesn't point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well
35. Tell me what is linking function and type of linking function?
Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After the template is cloned it is executed.
☛ Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.
☛ Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function
