Angular Important Questions and Answers-1










WHAT IS ANGULAR FRAMEWORK

Angular is a Client-side (front side) JavaScript framework, which is designed by Google. It is used to make client-side application using the HTML and JavaScript or typescript and then it compiles to JavaScript
Why we use Angular
Developing a web application using JQuery or JavaScript is difficult, so angular came as front end framework to reusable the library.
The main important goal was to separate the client-side from the server-side. The development of client-side and server-side together is very complicated.
The structure of development needed to be improved. Everything should be in proper order from the user interface design, through writing business logic, to testing.
this is why it uses angular.
ADVANTAGE OF ANGULAR
DEVELOP ACROSS ALL PLATFORMS
   Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.
SPEED & PERFORMANCE
Improved Architecture
Typescript
Mobile Support
Component-Based UI
SEO Friendly
ANGULAR Modules
An angular module is a group of components, directives, pipes and services that are related to the application.
 If we are going to design an application and that application contain multiple portals so all those the portal we can define as a module and this is also called a feature module.
To be able to define modules we have to use the decorator NgModule.

Command to create a module
 Ng g m ModuleName
ANGULAR Component
Angular is component-based architecture. Angular application is a collection of components, and a component handles one view or HTML page.
An Angular component controls a part of the UI of your application. For example, the header, footer, or whole page can all be components. Depending on how much reusability, you want in your code.
A component is a typescript class which is decorated with ‘@’ symbol.
A component contains the following things
        1. Selector: A selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML.
         2. TemplateUrl: path of HTML Page
         3. StyleUrl : Path of Style page
Command to create a component
      Ng g c ComponentName
ANGULAR Directive
Directives are used to manipulate the DOM( Document object model). Directives are elements which used to change the appearance, behavior or a layout of a DOM element. It also helps us to extend HTML as well.
 There are 3 types of directive exists in angular
Component directive
      This directive is used in the main class, this directive contains the details how the component should proceed and how it should use at run time.
      An angular application has at least one component which is attached with a template along with the behavior.

ANGULAR Directive
v  Structural  directive
      Structural directives start with a * sign. These directives are used to manipulate and add or remove elements from DOM elements.
There are basically 3 types of structural directive
       *ngIf directive
       *ngSwitch directive
       *ngFor directive 
Attribute directive
Attribute directives are used to modify the look and the behavior of the DOM elements.
There are mainly 2 types of Attribute directive
ngClass Directive: The ngClass directive is used to change CSS classes in the HTML element.
ngStyle Directive: The ngStyle directive used you to change the style of an HTML element using the expression.
ANGULAR Routing
v  Routing is a mechanism that is used to communicate b/w the component and based on that it shows the respective page on the browser or we can say like Angular  Router uses to navigate between views or pages that trigger by the user's actions. 
v  Router import from @angular/router package.
v  When we click on the button or we can say like when we hit any URL for navigate to other page then angular looks into the route array, and match the path as requested and based on that it load component as well as respective HTML and show on the browser.
v  Please watch Part 21 of angular 8 tutorial series for understanding more on it
v  ANGULAR Service
v  In Angular, services are always singleton objects it means it instantiated only once during the lifetime of application or module, Every Angular Service contains methods that always contain the data throughout the life of an application.
v   It is a mechanism to share responsibilities within one or multiple components. 
v  An angular service is basically a function.
v  It helps us to maintain code reusability means instead of using the same code again and again we can create a service and whenever we need it, so use that service in component.
v It is easy to do unit testing as well.
v  Command to create Service

v  Ng g s ServiceName
v  Please watch Part 24 of angular 8 tutorial series for understanding more on it

ANGULAR Pipe
v  Angular provides some filters known as Pipes which is used to format or transform data to desire output.
v  Pipes are used with a Pipe (|) symbol, it takes an input and returns a desired formatted output
v  For ex, if given input by the user , we want to show in upper case on browser we use Pipe for formatting.
v  Angular provide many built-in type pipes which is used to translate the data into desire output and we can create a custom Pipe as well.
Types of Pipe:
v  Built-in pipe
v        Parameterize pipe
v        Multiple pipes (chaining pipe)
v  2.   Custom pipe
Please watch Part 19,20 of angular 8 tutorial series for understanding more on it

ANGULAR Dependency injection
v  Dependency Injection always is one of the main benefits of an Angular Framework.
v  It’s a technique where one object is dependent on another object. In angular, a dependency is an object that is used as a service.
v   
v  Basically DI is a design pattern where class receive their dependency from external resources rather than creating himself.



v  In above picture basically, Class b depends on class A to execute class B methods, then class A  is a dependency of class B
Please watch Part 25 of angular 8 tutorial series for understanding more on it
ANGULAR Data Binding
v  Data binding means the communication between the component and the HTML page (DOM), or we can say like it’s a communication b/w typescript code of component and HTML the page which the user sees on the browser.
Data binding basically One-way data-binding or two-way data binding.
One Way Data Binding has different ways to bind data from component to HTML
v  String Interpolation
v  Property Binding
v  Style Binding
v  Class Binding
v  Attribute Binding
v  Two Way Data Binding
v  In one way data binding when we change element in HTML file,it doesn’t reflect to component file so to overcome this problem, we use two data binding like if I change anything in DOM then changes reflect the component as well so basically it updates data from component to view and vice-versa.
v  The combination of property binding and the event binding is called the two way data binding.
Please watch Part 12 of angular 8 tutorial series for understanding more on it
ANGULAR Forms
v  Angular forms are used to collect  the data based on the user's input. We can use Angular form for  users to log in, register page, and to perform many other data-entry tasks.
v  In Angular 8, there are 2 type forms:
v  Template-driven forms
v  Reactive forms (model-driven forms)
Both types of Forms are used to collect user input, validate the user input, create a form model and data model to update.
Please watch angular Form tutorial series for understanding more on it

ANGULAR  Template-driven forms
v  Template-driven forms are simple forms  it is good if we create a simple form for your application.
v  In template-driven forms we do most of the work on the template side.
v  Template-driven forms are easy to use but they are not as scalable as Reactive forms.
v  Its good for the simple scenarios not for the complex scenarios.
v  Very less code on the component side.
v  Unit testing is difficult in it.
v  Prerequisite
v  Need to import FormModule in App.module.ts  file
Please watch angular Form tutorial series for understanding more on it
ANGULAR Reactive Form
v  Reactive forms are better than template form.
v  Reactive forms are more scalable, reusable, and testable.
v  In these forms model which is created under app.module.ts file is responsible to handle all the user interaction and validation.
v  No any data Binding is done.
v  Mostly code is in the component side.
v  Prerequisite
v  Need to import ReactiveFormModule  under  app.module.ts file
Please watch angular Form tutorial series for understanding more on it

WHAT IS COMPILER
v  Compiling is a term of transforming one source code language to another.
WHAT IS TRANSPILING
v  It’s a process of converting typescript code into the JavaScript by using traceur, JS compiler.
What is JIT and AOT compilation
v  Angular compile components to native JavaScript and HTML.
v  There are 2 types of compilation
v  JIT(just in time)
v  The compilation happens on the user browser at runtime
      
       AOT (Ahead of time)
v  The application is compiled and optimized at the build time instead of run time, so it improves the rendering of the application UI
v  What is TRACEUR compiler
v  It compiles ECMA script Edition 6(ES6) code to regular javascript (ES5) to make it compatible with the browser.




Share this

Related Posts

Previous
Next Post »