Learn AngularJS
Angular js mvc
- Describe MVC in reference to angular.AngularJS is based on MVC framework, where MVC stands for Model-View-Controller. MVCperforms the following operations: A model is the lowest level of the pattern responsible for maintaining data. A controller is responsible for a view that contains the logic to manipulate that data. It is basically a software code which is used for taking control of the interactions between the Model and View. A view is the HTML which is responsible for displaying the data. For example, a $scope can be defined as a model, whereas the functions written in angular controller modifies the $scope and HTML displays the value of scope variable.
- Is AngularJS dependent on JQuery?AngularJS is a JavaScript framework with key features like models, two-way binding, directives, routing, dependency injections, unit tests, etc. On the other hand, JQuery is a JavaScript library used for DOM manipulation with no two-way binding features.
- What are the directives in AngularJS?Directives are the markers on DOM element which are used to specify behavior on that DOM element. All AngularJS directives start with the word "ng". There are many in-built directives in AngularJS such as "ng-app", "ng-init", "ng-model", "ng-bind", "ng-repeat" etc. ng-app The ng-app directive is the most important directive for Angular applications. It is used to locate the beginning of an Angular application for AngularJS HTML compiler. It marks the HTML elements that Angular intends to make the root element of the application. The custom attributes use spinal-cases, whereas the corresponding directives follow the camelCase. If we do not use this directive and try to process other directives, it gives an error. ng-init The ng-init directive is useful for initializing the data variable's inline statement of an AngularJS application. Therefore, those statements can be used in the specified blocks where we can declare them. A directive ng-init is like a local member of the ng-app directive, and it may be a single value or a group of the values. It directly supports JSON data. ng-model The ng-model directive binds the values of HTML elements such as input, select, textarea to the application data. It provides two-way binding behavior with the model value. Sometimes, it is also used for databinding. ng-bind The ng-bind directive is used to bind the model/variable's value to HTML controls of an AngularJS application. It can also be used with HTML tags attributes like: , and more but it does not support two-way binding. We can only check the output of the model values. ng-repeat The ng-repeat directive is used to repeat HTML statements. It works the same as for each loop in C#, Java or PHP on a specific collection item like an array.
- What is the module in AngularJS?A module is a container for the different parts of the application like a controller, services, filters, directives, etc. It is treated as a main() method. All the dependencies of applications are generally defined in modules only. A module is created using an angular object's module() method. For example: var app = angular.module('myApp', []);
- What is a template in AngularJS?A template consists of HTML, CSS, and AngularJS directives, which are used to render the dynamic view. It is more like a static version of a web page with some additional properties to inject and render that data at runtime. The templates are combined with information coming from model and controller.
- What do you understand by validation of data in AngularJS?AngularJS enriches form filling and validation. AngularJS provides client-side form validation. It checks the state of the form and input fields (input, text-area, select), and notify the user about the current state. It also holds the information about whether the input fields have been touched, or modified, or not. There are following directives that can be used to track error: $dirty It states that the value has been changed. $invalid It states that the value which is entered is invalid. $error It states the exact error. Moreover, we can use novalidate with a form declaration to disable the browser's native form validation.
- What do you understand by linking function? Explain its type.Link is used for combining the directives with a scope and producing a live view. The link function is used for registering DOM listeners as well as updating the DOM. The linking function is executed as soon as the template is cloned. There are two types of linking function: Pre linking function Pre-linking functions are executed before the child elements are linked. This method is not considered as a safe way for DOM transformation. Post linking function Post-linking functions are executed after the child elements are linked. This method is a safe way for DOM transformation.
- Is it possible to have two ng-app directives for a single Angular application?No, there can't be more than one ng-app directive for a single AngularJS application. The ng-app directive helps AngularJS application to make sure that it is the root element. In our HTML document, we can have only one ng-app directive. If there is more than one ng-app directive, then whichever appears first will be used.
- What are the different types of directives available in AngularJS?AngularJS provides support for creating custom directives for the following type of elements: Element Directive Element directives are activated when a matching element is encountered. Attribute Attribute directives are activated when a matching attribute is encountered. CSS CSS directives are activated when a matching CSS style is encountered. Comment Comment directives are activated when a matching comment is encountered.
- Explain the compilation process of AngularJS?Angular's HTML compiler allows us to teach the browser, new HTML syntax. It also allows the developer to attach new behavior or attributes to any HTML element known as directives. AngularJS compilation process automatically takes place in the web browser. It does not contain any server-side or pre-compilation procedure. AngularJS uses service for the compilation process of an Angular HTML page. Its compilation process starts after the HTML page (static DOM) is completely loaded. It occurs in two phases: Compile It checks into the entire DOM and collects all of the directives. Link It connects the directives with a scope and produces a live view. The concept of compile and link has been added from C language. The code is compiled and then linked.
4iv>