Angular js Interview Question

/////////// Angualr Interview Question ///////////

1.) Define the features of AngularJS.

    The Template (View)
    The Scope (Model)
    The Controller (Controller)
    Services
    Filters
    Directives

2.) What are the directive scopes in AngularJs?

    Parent scope
        – Whatever change you make in your directive that comes from the parent scope, will also reflect in the parent scope,
        and it is also a default scope.
    Child scope
        – It is a nested scope which inherits a property from the parent scope. Also if any properties and function on the scope are not
        connected with the parent scope directive, then a new child scope directive is created.
    Isolated scope
        – It is reusable and is used when we build a self-contained directive. It is only used for private and internal use which means it does not contain
        any properties of the parent scope.

3.) How can we share the data between controllers in AngularJs?

    Answer: First, we have to create a "service". Service is used to share the data between controllers in AngularJs in a very lucid,
            easy and fastest way. We use events, $parent, next sibling, and controller by using "$rootScope".
       
4.) Difference between sessionStorage, cookies, and localStorage.


5.) How are AngularJs prefixes $ and $$ used?

    Answer: $$ variable in AngularJS is used as a private variable, as it is used to prevent accidental code collision with the user code.
    Whereas $ prefix can be used to denote angular core functionalities (like a variable, parameter, property or method).

6.) Where can we implement the DOM manipulation in AngularJs?

    Answer: Manipulation of DOM is in directives and apart from this it should not exist in controllers’ services or anywhere else.

7.) How can we show that a scope variable should have one-time binding only?

    Answer: To show one-time binding we have to use “::” in front of the scope.


8.) What are the binding directives in AngularJs?

    ng-bind
    ng-bind-html
    ng-bind-template
    ng-non-bindable
    ng-model

9.) Explain ng-bind and ng-bind-html directives.

    ng-bind-html: It is a directive which binds the content to the HTML element(view) in a secure way.
        $sanitize service is used to sanitize the content to bind into an HTML element.
            To do this ‘angular-sanitize.js’ must be included in our application.

9.1) how to compile html which is in String formate.

    Use $src to compile in secure way.


10.) What is ng-repeat directive in AngularJs?

    Answer: It renders or iterates over a collection of items and creates DOM elements.
        It regularly monitors the source of data to re-render a template in response to a change.

     
         
                {{stu.name}}
            {{stu. grade}}
       

    

11.) What is ng-App directive in AngularJs?

    We can define any number of ng-app directives inside the HTML document, but only one AngularJS application can be bootstrapped automatically
    (auto-bootstrapped) and the other applications need to be bootstrapped manually.

11.1) What will happen if i use same controller two place in same html

        Each controller will have it's own $scope. So, two different instances of controllers might have the same code, but they will still have different scopes.
        So, you want to pass the changes from one controller to another. In that case, there are a few solutions:


12.) What are the attributes that can be used during the creation of a new AngularJs directives?

    Template:       It describes an inline template as a string.
    Template URL:   This attribute specifies the AngularJs HTML compiler to replace the custom directive inside a template with the HTML content located inside a separate file.
    Replace:        It replaces the current element if the condition is true, if false append this directive to the current element.
    Transclude:     It allows you to move the original children of a directive to a location inside the new template.
    Scope:          It creates a new scope for this directive rather than inheriting the parent scope.
    Controller:     It creates a controller which publishes an API for communicating across the directives.
    Require:        It requires another directive to be present to function the current directive efficiently.
    Link:           It modifies resulting DOM element instances, adds event listeners, and set up data binding.
    Compile:        It modifies 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.

13.) Is Nested Controllers possible or not in AngularJs?

    Answer: Yes, it is possible as Nested Controllers are well-defined in a classified manner while using a view.

14.) Difference between services and factory.

        Answer: Factories are functions that return the object, while services are constructor functions of the object which is used by a new keyword.

        Factory – module.factory(`factoryName`, function);
        Service – module.service(`serviceName`, function);

14.1) how to usePromise in angular js’

        by $q by defer and resolve

       
15.)  If both factory and service are equivalent, then when should I use them?

    Answer:
    "Factory provider" is preferred using an object, return object need to create manually,
        -- Factories offer slightly more flexibility than services because they can return functions which can then be "new" 

        --OOP code
            app.factory('helloFactory', function() {
                return function(name) {
                    this.name = name;

                    this.hello = function() {
                        return "Hello " + this.name;
                    };
                };
            });


    "service provider" is preferred using with class, Instantiate will happen automatically by this operater

        --
            app.service('helloWorldService', function(){
                this.hello = function() {
                    return "Hello World";
                };
            });


16.) Difference between ng-bind and ng-model directive.

17.) Define ng-if, ng-show and ng-hide.

18.) What is the difference between ngRoute and ui-router?

    Answer: ngRoute is a module developed by angularJS team which was a part of the core angularJS framework.
        Whereas ui-router was developed by a third-party community to overcome the problems of ngRoute.

    ngRoute is a location or URL based routing, and ui-router is a state-based routing which allows nested views.