A brief discussion of 12 classic problems in Angular

1. Please explain what are the lifecycle hooks of Angular 2 application?

Angular 2 components/directives have lifecycle events, which are managed by @angular/core. @angular/core creates the component, renders it, creates and renders its descendants. When a data-bound property of @angular/core changes, the handler is changed and before removing its template from the DOM, it is destroyed. Angular provides a set of lifecycle hooks (special events) that can be tapped into the lifecycle and perform actions when required. The constructor is executed before all lifecycle events. Each interface has a hook method prefixed with ng. For example, the OnInit method of the ngOnint interface, this method must be implemented in the component.

Some events apply to components/directives, while a few events only apply to components.

• ngOnChanges: Responds when Angular sets a data-bound property that receives the current and previous object values.
• ngOnInit: Initializes the component/directive after the first ngOnChange triggers. This is the most common method used to retrieve data for a template from a backend service.
• ngDoCheck: Detects and executes when the Angular context changes. This is called every time change detection runs.
• ngOnDestroy: Cleans up before Angular destroys the directive/component. Unsubscribe from observables and detach from event handlers to avoid memory leaks.

Component specific hooks:

• ngAfterContentInit: Component content has been initialized
• ngAfterContentChecked: After Angular checks the external content of the bindings that are projected into its view.
• ngAfterViewInit: After Angular creates the component's view.
• ngAfterViewChecked: After Angular checks the bindings of the component's view.

2. What are the advantages of using Angular 2 compared to Angular 1?

1. Angular 2 is a platform, not just a language

2. Better speed and performance

3. Easier Dependency Injection

4. Modularity and cross-platform

5. It has the benefits of ES6 and Typescript.

6. Flexible routing with delayed loading function

7. Easier to learn

3. How does routing work in Angular 2?

Routing is the mechanism that enables users to navigate between views/components. Angular 2 simplifies routing and provides flexibility to configure and define at module level (lazy loading).

Angular application has a single instance of router service and whenever the URL changes, the corresponding route is matched against the route configuration array. On a successful match, it applies the redirect, at which point the router builds a tree of ActivatedRoute objects, including the current state of the router. Before redirecting, the router will check if the new state is allowed by running a guard (CanActivate). Route Guard is just an interface method that the router runs to check route authorization. Once the guard runs, it parses the routing data and activates the router state by instantiating the required components into <router-outlet></router-outlet>.

Further reading:

https://www.codeproject.com/Articles/1164813/Angular-Routing

https://vsavkin.com/angular-2-router-d9e30599f9ea

4. What is an event emitter? How does it work in Angular 2?

Angular 2 does not have a bidirectional digest cycle, which is different from Angular 1. In Angular 2, any changes that happen in a component are always propagated from the current component to all its child components. If changes to a child component need to be reflected up the hierarchy of its parent components, we can emit events by using the event emitter api.

In short, EventEmitter is a class defined in the @angular/core module and is used by components and directives to emit custom events.

@output() somethingChanged = new EventEmitter();

We use somethingChanged.emit(value) method to emit the event. This is usually used in setters when the value in the class is changed.

You can use the subscription method to implement event subscription through any component of the module.

myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

Further reading:

http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML

5. How to use codelyzer in Angular 2 application?

All enterprise applications follow a set of coding conventions and guidelines to maintain the code in a better way. Codelyzer is an open source tool for running and checking compliance with predefined coding guidelines. Codelyzer only performs static code analysis for Angular and TypeScript projects.

Codelyzer runs on top of tslint, and its coding conventions are usually defined in a tslint.json file. Codelyzer can be run directly through the Angularcli or through npm. Editors like Visual Studio Code and Atom also support codelyzer, which can be enabled by doing a basic setup.

To setup codelyzer in visual studio code, we can add the path to tslint rules in File -> Options -> User Settings.

{

    "tslint.rulesDirectory": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}

Run the code from the cli: ng lint.

Run the code from npm: npm run lint

Further reading:

https://github.com/mgechev/codelyzer

https://www.youtube.com/watch?v=bci-Z6nURgE

6. What is lazy loading? How to enable lazy loading in Angular 2?

Most enterprise applications consist of a variety of modules designed for specific business cases. Bundling the entire application code and loading it completely incurs a huge performance overhead on the initial call. Lazy loading allows us to load only the modules that the user is interacting with, while the rest of the modules are loaded on demand at runtime.

Lazy loading speeds up the initial loading process of an application by splitting the code into multiple bundles and loading them on demand.

Every Angular application must have a main module called AppModule. The code should be divided into different sub-modules (NgModules) based on the application business case.

Plunkr example with lazy loading enabled:

1. We don’t need to import or declare lazy loaded modules in the root module.

2. Add the route to the top level routing (app.routing.ts) and set loadChildren. loadChildren will get the absolute path from the root folder. RouterModule.forRoot() takes the routes array and configures the router.

3. Import module specific routes in submodules.

4. In the submodule routing, specify the path as an empty string "", that is, an empty path. RouterModule.forChild will again use the routes array to load and configure the router for the child module component.

5. Then, export const routes: ModuleWithProviders = RouterModule.forChild(routes);

7. What security threats should we be aware of in Angular 2 applications?

Just like any other client-side or web application, Angular 2 applications should also follow some basic guidelines to mitigate security risks. Some of them are:

1. Avoid using/injecting dynamic HTML content into your components.

2. If you are using external HTML, that is, coming from a database or somewhere outside your application, you need to sanitize it.

3. Don't put external URL in the application unless it is trusted. Avoid URL redirection unless it is trusted.

4. Consider using AOT compilation or offline compilation.

5. Prevent XSRF attacks by limiting APIs and choosing apps that use known or secure environments/browsers.

Further reading: https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

8. How to optimize Angular 2 application for better performance?

Optimization depends on the type and size of your application and many other factors. But in general, here are some things I consider when optimizing an Angular 2 application:

1. Consider AOT compilation.

2. Make sure the application is bundled, uglified, and tree shaken.

3. Make sure that your application does not have unnecessary import statements.

4. Make sure that unused third-party libraries have been removed from the application.

5. All dependencies and dev-dependencies are clearly separated.

6. If the app is larger, I would consider lazy loading instead of fully bundling the app.

Further reading:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/

9. How to implement custom types without editor warnings?

In most cases, third-party libraries come with their .d.ts files for type definitions. In some cases, we need to extend an existing type by providing some more properties to it or if we need to define additional types to avoid TypeScript warnings.

If we need to extend the type definition of an external library, a good practice is that we do not modify the node_modules or existing typings folder, but create a new folder named "custom types" to store all custom types.

To define types of our application (JavaScript/Typescript) objects, we should define interfaces and entity classes in the models folder of the corresponding module of our application.

For these cases, we can define or extend types by creating our own ".d.ts" files.

Further reading:

https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML

https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file

10. What is Shadow DOM? How does it help Angular 2 perform better?

Shadow DOM is part of the HTML specification that allows developers to encapsulate their own HTML tags, CSS styles, and JavaScript. Shadow DOM, along with other technologies, enables developers to build their own first-class tags, web components, and APIs like the <audio> tag. Collectively, these new tags and APIs are called Web Components. Shadow DOM provides better separation of concerns by achieving fewer conflicts between styles and scripts with other HTML DOM elements.

Since the shadow DOM is static in nature and inaccessible to developers, it is a good candidate. Because it caches the DOM it will render faster in the browser and provide better performance. Furthermore, the shadow DOM can be managed relatively well while detecting changes to the Angular 2 application and managing the repainting of the view efficiently.

Further reading:

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966

11. What is AOT compilation? What are its advantages and disadvantages?

AOT compilation stands for Ahead Of Time compilation, where the Angular compiler compiles Angular components and templates into native JavaScript and HTML at build time. The compiled HTML and JavaScript are then deployed to the web server so that the browser can save compilation and rendering time.

advantage:

1. Faster downloads: Since the application is already compiled, many Angular compiler-related libraries no longer need to be bundled, and the application package becomes smaller, so the application can be downloaded faster.

2. Fewer Http Requests: If the application is not bundled to support lazy loading (or for any reason), there will be a separate server request for each associated HTML and CSS. But precompiled application will align all templates and styles with components, so number of Http requests to server will be less.

3. Faster rendering: If the application is not AOT compiled, the compilation process will happen in the browser when the application is fully loaded. This requires waiting for all the necessary components to download, and then waiting for the compiler to take time to compile the application. Using AOT compilation, optimization can be achieved. exist

4. Detect errors during build time: Due to pre-compilation, many compile-time errors can be detected, which can provide better stability for the application.

shortcoming:

1. Only applies to HTML and CSS, other file types require the previous build steps

2. There is no watch mode, you have to do it manually (bin/ngc-watch.js) and compile all files

3. The AOT version of the bootstrap file needs to be maintained (not required when using tools such as cli)

4. Before compiling, a cleanup step is required

Further reading: https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

12. What is the core difference between Observables and Promises?

From Stack Overflow here is a distinction:

A Promise handles a single event, when an asynchronous operation completes or fails.

An Observable is similar to a Stream (in many languages), allowing zero or more events to be delivered, with a callback function being called for each event. Observable is usually preferred over Promise because it provides not only Promise features but also other features. Using Observable you can process 0, 1, or more events. You can use the same API in each case. Observable is cancelable, which is also an advantage over Promise. If the results of the HTTP request to the server or some other asynchronous operation are no longer needed, the subscriber to the Observable can unsubscribe, and the Promise will eventually call the success or failure callback, even if you don't need the notification or the result it provides. Observable provides array-like operators like map, forEach, reduce, as well as powerful operators like retry() or replay(), which are quite convenient to use.

Promises vs Observables

Promises:

1. Return a single value

2. No cancellation

Observables:

1. Multiple values ​​can be used

2. Cancellable

3. Support map, filter, reduce and similar operators

4. Features proposed in ES 2016

5. Use Reactive Extensions (RxJS)

6. Array members can be obtained asynchronously according to the changes in time

The official version of Angular 2 has been released, and some products already support the official version of Angular 2. Among them, Wijmo responded the fastest. It released the official version of Wijmo that supports Angular2 a few hours after Angular2 was released. Wijmo provides Angular2 components for each UI control. All Angular2 components provide fully declarative markup.

Original link: https://www.codeproject.com/Articles/1169073/Angular-Interview-Questions

Self-check quiz

Now that you have learned about Angular, do you also want to know how well you have mastered it? Interested students can try to build a "question answering system application", the specific requirements are:

• There are three components: Test View, Review Results, and Display Results
• Accepts questions in json format. You can send json from the server in a predefined format. The Angular2 test application needs to present the answer interface on the client side.

The finished product interface is as follows:

Demo effect: http://ng2-quiz.anuraggandhi.com/

The answer is here (implementation code): https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

The above is the detailed content of the brief discussion of 12 classic problems of Angular. For more information about 12 classic problems of Angular, please pay attention to other related articles on 123WORDPRESS.COM!