Hey friends, here is the most likely asked Top 30 AngularJS Interview Questions and Answers.
Angular 2/4 is an open-source front-end web application platform, which works as a binding framework created by google development team
Angular 2/4 is complete revamp of Angular 1.In fact, we can say that it was completely rewritten from the ground-up.
Angular 2/4 is complete revamp of Angular 1.In fact, we can say that it was completely rewritten from the ground-up.
Angular 1 is controller and $scope based while Angular 2/4 is based on an architecture of component hierarchy, dependency injections and directives.
Angular 2/4 is much more geared towards Mobile development unlike Angular 1 as mobile development is much bug prone. If mobile development is handled first desktop development will not have much issues.
Angular 2/4 focuses much more on modularity as much of its core functionality has been transferred to its modules leading to a faster and lighter application in development.
Angular 2/4 is mainly written in Typescript Which introduces features like Class-based Object Oriented Programming, Generics and Static Typing to framework, which makes it more appealing to developers from non-JavaScript background and leading to shorter development time.
Unlike Angular 1, Angular 2/4 is mainly introduced to be compatible with modern browsers. Angular 2/4 not only introduces new features like lazy loading/Dynamic loading, Asynchronous template compilation, Simpler Routing and Reactive programming support-using RxJS but also improves on legacy features like dependency injection.
➔ In Simple word Typescript is a Superset of JavaScript meaning any JavaScript code is valid typescript code.
Typescript is Trans piled to JavaScript behind the scene in the IDE.
JavaScript is function based which can get confusing to a C# or Java developer while reviewing code So Typescript allows us to use generic programming (classes and modules).
Typescript follows the ECMAScript 2015 standard which contains features like:
➢Generic
➢Namespaces
➢Enumerated type
➢Interfaces etc.
➔ The new View Engine (for AOT) in Angular 4 which reduces the generated code from components up to 60%. Now in Angular 4 we can use the "if-else" conditional syntax instead of just using "if" like in Angular 2. Angular 4 requires a minimum of Typescript 2.1 or higher. Animations is removed from @angular/core so as to reduce the size of our code bundle. But we can add animations by importing {BrowserAnimationsModule} from @angular/platform-browser/animations our NgModule. Renderer is replaced by Renderer 2 in '@angular/core'. In Angular 4 there no need of adding pattern for validation we can just define type="email" in our HTML Input which is an Html Dom property and angular will take care of it.
➔ Angular is based on Components, as Components are the logical piece of code, which consists of Classes, Template and Metadata.
To say more simplistically Components are used to bind model and template while also providing the logical part.
➔ Modules are used for organizing components, models, templates and other parts instead of coding everything into a single application.
This results in a more modular application, which is separated into different modules depending on their functionality and need of our app.
➔ @Input decorator allows us to pass data into our application controller and templates through html as well as defining custom properties.
The @Input decorator binds a property with our child component so that it can communicate and pass values from parent to child.
➔ @Output along with EventEmitter is used to push out events in components.
The @Output decorator binds a property with our child component so that our child component can call its parent component. We can say it is used for communication between parent and child component.
➔ Npm stands for Node package manager. It is an online repository and works as a package manager for JavaScript.
A package.json file in our application defines the dependencies that we want to download for our application.
➔ The routing mechanism allows us to navigate between different views(via components) and allowing us to configure it to make it more flexible while providing us with features like lazy loading to ease load times and increase performance.
Routing used for the following : -
➢ It is used to create a modular application
➢ To implement role based authorization in our application providing access to certain users to certain parts of the application.
➢ It is used for State management in the application
Steps :-
➔ AOT stands for Ahead of Time, There is no different compiler used in AOT just the sequence of process is changed.
Instead of compiling at runtime in the browser like JIT compilation.
The components and templates are compiled at built time and converted to native JavaScript and html.
So the browser does not have compile the application so it can directly render it and save time and system resources.
Advantages:AOT provides build time error detection so many compile type errors are detected before it running the application.
Faster download times as the application is compiled and bundled at build time, which eliminates the need of loading the angular compiler and its libraries leading to a lesser runtime.
Faster Rendering time as the application is already compiled and only needs to be rendered on the browser.
Disadvantages:
Angular version lower than 4 produces large JavaScript bundles after compilation, which defeats the purpose of AOT.
It only works only with HTML and CSS, other file types need to be built previously.
It needs a clean-up step before compiling.
➔ Lazy loading modules speeds up our applications startup time.
Lazy loading creates multiple bundles and loads them on demand in runtime.
If we had loaded all our components and templates into one big bundle, it would lead to a large performance penalty.
➔To say as simple as possible ECMAScript is a subset of JavaScript.
ECMAScript is at the core of JavaScript and JavaScript just builds up on it.
ActionScript, JavaScript, Jscript and all other languages have ECMAScript at its core.
➔ Pipes are used in Angular 2/4 to edit/transform and format our data in the template itself.
Angular has built-in pipes for dates, currency, percentage and character cases.
In Addition to this we can create custom pipes ourselves and use them in angular.
Therefore, we can say that pipes take in data as input and transforms it to output we desire.
➔ Change detection basically is the process of detecting the changes in the internal state of our application which might be caused due to Events, XHR and Timers and make it visible in the user interface.
Change detection work on the principle of zone.js in Angular 2/4.
➔ Directives in Angular are used to add behavior to our existing DOM elements.
We use @Directive meta-data annotation to register directives.
Directives in angular are used to design reusable components.
Directives do not have their own views.
➔ If the change in one of the child components needs to be reflected to any of its parent component, we can emit the event by using Event Emitter API in Angular.
EventEmitter is class present in @angular/core module, which is used by components and directives to emit custom events.
➔ In Angular 2/4, dependency injection gives us the ability to add functionality of a component at runtime.
It also provides us a way to create a service that is a reusable piece of code, which can be used across our application to perform a particular function.
➔ Typings is a way of installing the Typescript definitions using typings.json file, as it is necessary as the browser does not understand typescript natively and hence it must be transpiled first before rendering.
➔ Module loaders in Angular are used to bundle different modules that contain their dependencies along with angular components into one bundle or multiple bundles (For lazy loading) and load them in the browser.
➔ Systemjs is a client side module bundler in angular as it loads modules (components and other files) on demand instead of loading an entire application at startup.
This largely reduces load times while starting up the app.
The up side of Webpack over Systemjs is that it bundles and creates a single file called bundle.js, which contains HTML, CSS and JS etc.
While the initial load time might take a few seconds once the app is cached it becomes lightning fast and will lead to a large boost in performance.
➔ In Angular 2/4 services are reusable function which include their properties used to perform some common functionality which can be used by different components instead of writing the same code again and again for different components a data service can be used by multiple components (via dependency injection).
➔ Steps to enable lazy loading in Angular 2/4 are as follows:
Add loadChildren in place of components in the routes in the exported class in the Main Routing module of your application.
Now change forRoot to forChild in the module or feature level router config module and you are done.
Angular 2/4 and JQuery at its core are very different concept all together.
JQuery deals with manipulating DOM directly while Angular is used primarily for binding data.
In some scenarios, using JQuery libraries can be used as quick solutions but doing this we might face problems in the future in terms of pre-rendering.
➔ Steps to add and use jQuery in Angular 2/4 are as follows:
In your node.js terminal type npm install --save jQuery and hit enter.
Then install jQuery Declaration files by typing npm install -D @types/jquery and hitting enter.
Next Import into your component and then provide a typed reference for jQuery.
➔ @ViewChild decorator is used when a parent component needs to communicate with and pass data to the child component.
We need to pass the class name of the child component to @Viewchild decorator function.
➔ In Angular 2/4, services are used to communicate data between different components.
As one component could pass, the data to the service while another component could read from it.
Therefore, this data service could pass the data from one components to multiple components.
