Q1: What Is AngularJS?A1: It has been developed by one of the biggest technology giants Google. It is a JavaScript framework that helps you to create dynamic Web applications.
- It supports to use HTML as the template language and enables the developer to create extended HTML tags that help to represent the application’s components more clearly. These tags make the code efficient by reducing the lines of code that a developer may need to write when using JavaScript.
- It is open-source and licensed under the Apache License version 2.0.
- It helps to develop a maintainable architecture that is easy to test at the client-end.
Q2: What Browsers Do AngularJS Support?
A2: 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.
A2: 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.
Q3: What Are Angular Prefixes $ And $$?
A3: To prevent accidental name collisions within the code, AngularJS prefixes the names of public objects with $ and the names of private objects with $$.
A3: To prevent accidental name collisions within the code, AngularJS prefixes the names of public objects with $ and the names of private objects with $$.
Use of these literals ($ or $$) for any other reason is not recommended.
Q4: What Is “$RootScope” In AngularJS?
A4: Every AngularJS application has a “$rootScope” that is the top-most scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope, we can set the value in one controller and read it from the other controller.
A4: Every AngularJS application has a “$rootScope” that is the top-most scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope, we can set the value in one controller and read it from the other controller.
Q5: How Is AngularJS Compilation Different From Other JavaScript Frameworks?
A5: Javascript frameworks like backbone and jQuery process the template as a string and returns the result as a string. You have to dump this resulting string into the DOM where you wanted it with innerHTML().
A5: Javascript frameworks like backbone and jQuery process the template as a string and returns the result as a string. You have to dump this resulting string into the DOM where you wanted it with innerHTML().
AngularJS process the template in another way. It directly works on HTML DOM rather than strings and manipulates it as required. It uses two-way data binding between model and view to sync the data.
Q6: Explain data binding in AngularJS.A6: According to AngularJS.org, “Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.”
There are two ways of data binding:
- Data mining in classical template systems
- Data binding in angular templates
Q7: Name the key features of AngularJS?
A7: The key features of AngularJS are:
A7: The key features of AngularJS are:
- Scope
- Controller
- Model
- View
- Services
- Data Binding
- Directives
- Filters
- Testable
Q8: What are directives in AngularJS?A8: A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.
The different types of directives are:
- Element directives
- Attribute directives
- CSS class directives
- Comment directives
Q9: What are Controllers in AngularJS?A9: 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.
Q10: What is the difference between link and compile in Angular.js?A10:
- Compile function is used for template DOM Manipulation and to collect all the directives.
- Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.
Q11: What is the difference between AngularJS and backbone.js?A11: AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps. While Backbone.js does these jobs individually.
Q12: What is bootstrapping in AngularJS?A12: An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.
Q13: Does Angular use the jQuery library?A13: Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Q14: What is internationalization and how to implement it in AngularJS?A14: 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.
Q15: What is bootstrapping in AngularJS?
A15: Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.
A15: 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.
Q16: Is AngularJS compatible with all browsers?A16: Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).
Q17: Mention some advantages of using AngularJS framework.A17: Some of the key advantages of using AngularJS framework include:
- It provides a great “desktop-like” experience to the end user.
- By freeing the developer from having to register callbacks manually or write repetitive low-level DOM manipulation tasks, it saves months of development.
- By separating DOM manipulation from app logic, it makes code modular and easy to test.
- It supports two-way data binding.
Q18: Define scope in AngularJS.A18: Scope is a special JavaScript object that plays the role of joining the controller (JavaScript) with the views (HTML). The controller sets properties on the scope and the view binds to them.
Q19: Explain the concept of scope hierarchy.A19: Each AngularJS application has only one root scope. Child controllers, however, create a scope for each view. When the new scopes are created, they are added to their parent root scope as child scopes. This creates a hierarchical structure when they are attached.
Q20: In what ways can you use a directive? A20: You can use a directive as an element, attribute or class name. To define the way your directive will be used, you need to set the restrict option in the directive declaration. The restrict option can be set to:
‘A’ – Only matches attribute name
‘C’ – Only matches class name
‘E’ – Only matches element name
‘C’ – Only matches class name
‘E’ – Only matches element name
You can combine these restrictions to produce needed results.
Q21: Explain e2e testing of AngularJS applications.
A21: End-to-end (e2e) testing involves testing an application from start to finish to determine whether all the components are working properly. It catches issues within an application related to integration and flow.
A21: End-to-end (e2e) testing involves testing an application from start to finish to determine whether all the components are working properly. It catches issues within an application related to integration and flow.
Q22: What is Single Page Application (SPA)?
A22: SPA is the concept whereby pages are loaded from the server not by doing post backs, rather by creating a single shell page or master page and loading the web pages into the master page.
A22: SPA is the concept whereby pages are loaded from the server not by doing post backs, rather by creating a single shell page or master page and loading the web pages into the master page.
Q23: How can digest cycle time be decreased?
A23: Digest cycle time can be decreased by decreasing the number of watchers. To do this you can:
A23: Digest cycle time can be decreased by decreasing the number of watchers. To do this you can:
- Use web worker
- Work in batches
- Cache DOM
- Remove unnecessary watchers
- Use one-time Angular binding
Q24: What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?
A24: Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.
A24: Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.
The main differences between Angular expressions and JavaScript expressions are:
- Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
- Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
- No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
- Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it
Q25: Can AngularJS have multiple ng-app directives in a single page?A25: No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.
Q26: Explain $q service, deferred and promises.A26:
- ‘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.
Q27: What is MVC?A27: 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.
Q28: What is use of $routeProvider in AngularJS?A28: $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.
Q29: What is $rootScope?A29: 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.
Q30: What is a service?
A30: 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.
A30: 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.
Q31: Is AngularJS extensible?
A31: Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.
A31: 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.
Q32: What is internationalization?
A32: 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.
A32: 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.
Q33: On which types of component can we create a custom directive?
A33: AngularJS provides support to create custom directives for following type of elements.
A33: AngularJS provides support to create custom directives for following type of elements.
- Element directives− Directive activates when a matching element is encountered.
- Attribute− Directive activates when a matching attribute is encountered.
- CSS− Directive activates when a matching css style is encountered.
- Comment− Directive activates when a matching comment is encountered.
Q34: Is it a good or bad practice to use AngularJS together with jQuery?A34: It is definitely a bad practice. We need to stay away from jQuery and try to realize the solution with an AngularJS approach. jQuery takes a traditional imperative approach to manipulating the DOM, and in an imperative approach, it is up to the programmer to express the individual steps leading up to the desired outcome.
AngularJS, however, takes a declarative approach to DOM manipulation. Here, instead of worrying about all of the step by step details regarding how to do the desired outcome, we are just declaring what we want and AngularJS worries about the rest, taking care of everything for us.
Q35: If you were to migrate from Angular 1.4 to Angular 1.5, what is the main thing that would need refactoring?A35: Changing .directive to .component to adapt to the new Angular 1.5 components.
Q36: What is the difference between one-way binding and two-way binding?A36: – One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value
– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value
Q37: Explain how $scope.$apply() works
A37: $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.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
A37: $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.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
Q38: What makes the angular.copy() method so powerful?
A38: It creates a deep copy of the variable.
A38: 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 one is changed, the other changes as well.
0 comments:
Post a Comment