Home > Article > Web Front-end > 50 Angular interview questions you must master (Collection)
50 Angular interview questions you must master (Collection)
- 青灯夜游forward
- 2021-07-23 10:12:509738browse
This article will share with you 50 Angular interview questions that you must master. These 50 interview questions will be analyzed from three parts: beginner-intermediate-advanced and will help you understand them thoroughly!
We have compiled a list of the top Angular interview questions divided into three parts:
- Angular Interview Questions – Beginner Level
- Angular Interview Questions – Intermediate
- Angle Interview Questions – Advanced
[Related tutorial recommendations: "angular Tutorial"]
Beginner Level – Interview Questions
#1. Differentiate between Angular and AngularJS.
| ##Features | AngularJS | Angular||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Building | Support MVC design modelUse components and directives | ||||||||||||||||
| Language | Recommended language: JavaScriptRecommended language: TypeScript | ||||||||||||||||
| Expression syntax | Pictures/properties and events require specific ng directivesUse () to bind events, Use [] for attribute binding | ||||||||||||||||
| Mobile support | Does not provide any mobile supportProvide mobile support | ||||||||||||||||
| routing | $ routeprovider.when() for routing configuration@RouteConfig {(…)} is used for routing configuration | ||||||||||||||||
| Dependency Injection | Does not support the concept of dependency injectionHierarchical dependency injection supporting tree-based one-way change detection | ||||||||||||||||
| Structure | Hard to manageSimplified structure makes development and maintenance of large applications easier | ||||||||||||||||
| Speed | With two-way data binding, development effort and time are reducedUpgrading features is faster than AngularJS | ||||||||||||||||
| Support | No more support or new updatesActive support and frequent new updates |
| ##Features | jQuery | ## Angular|
|---|---|---|
| DOM operations | isYes | |
| No | Yes | |
| Yes | is | |
| No | ##Yes | ##Form verification |
| No | Yes | ##Two-way data binding |
| No## is | ##AJAX/JSONP | |
| is | ##15 . What are providers in Angular? |
##g
et() method, This method is called to create a new instance of the service. Providers can also contain other methods and objects using the （
Yes, Angular does support the concept of nested controllers. The nested controller needs to be defined hierarchically in order to use it in the view.17. How to distinguish Angular expressions and JavaScript expressions?
Angular Expression
JavaScript Expression
| 2. They can be written within HTML tags. | 2. They cannot be written within HTML tags.|||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 3. They do support conditions, loops and exceptions. | |||||||||||||||||
| 4. They don't support filters. | |||||||||||||||||
| ##DOM | ##Bill of Materials||
|---|---|---|
| 1. Represents the browser object model | ||
| 2. Works above the web page and includes browser properties | ||
| 3. All global JavaScript objects, variables and functions implicitly become members of the window object | ||
| 4. Access and manipulate browser windows | ||
| 5. Each browser has its own implementation |
| Provider | Service | Factory |
|---|---|---|
| A provider is a way to pass part of an application into app.config | A service is a way to create something with 'new' Method of the service instantiated by the keyword. | This is the method used to create and configure services. Here you create an object, add properties to it and then return the same object and pass the factory method into the controller. |
45. What is Angular Global API?
The Angular Global API is a combination of global JavaScript functions used to perform a variety of common tasks, such as:
- Compare objects
- Iterate Object
- Convert data
There are some common Angular Global API functions, such as:
- ** Angular. Lowercase: **Convert the string to lowercase.
- Horned. Uppercase: Convert a string to uppercase.
- Horned. isString: Returns true if the current reference is a string.
- **Horned. isNumber: **Returns true if the current reference is a number.
Advanced Level – Interview Questions
#46. In Angular, describe how to set, get and clear cookies?
In order to use cookies with Angular, you need to include a module called ngCookies angular-cookies.js.
Set Cookies – To set Cookies in key-value format, use the “put” method.
cookie.set("nameOfCookie","cookieValue");**Getting Cookies –**To get Cookies, the “get” method is used.
cookie.get（"nameOfCookie"）;
**Clear Cookies –** Use the “Delete” method to delete cookies.
cookie.delete（"nameOfCookie"）;
#47. If your data model is updated outside the "area", please explain the process, how will you view the view?
You can use any of the following to update the view:
ApplicationRef.prototype.tick() : it Change detection will be performed on the entire component tree.
**NgZone.prototype.run(): **It will perform change detection on the entire component tree. Here run() under the hood will call the tick itself and then the parameters will get the function before the tick and execute it.
**ChangeDetectorRef.prototype.detectChanges(): **It will start change detection on the current component and its subcomponents.
#48. Explain ng-app directive in Angular.
The ng-app directive is used to define an Angular application, allowing us to use auto-bootstrapping in Angular applications. It represents the root element of an Angular application and is usually declared near the or tag. Any number of ng-app directives can be defined in an HTML document, but only an Angular application can be officially bootstrapped implicitly. The remaining applications must be booted manually.
Example
<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div>49. What is the process of inserting an embedded view from a prepared TemplateRef?
@Component({
selector: 'app-root',
template: `
<ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
`
})
export class AppComponent implements AfterViewChecked {
@ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
constructor() { }
ngAfterViewChecked() {
this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}
}50. How to hide an HTML element just by clicking the corner button?
HTML elements can be easily hidden using the ng-hide directive with a controller to hide HTML elements when a button is clicked.
View
<div ng-controller ="MyController"> <button ng-click ="hide()">欢迎关注全栈程序员社区公众号</ button> <p ng-hide ="isHide">欢迎关注Java架构师社区公众号！</ p> </ div>
Controller
controller: function() {
this.isHide = false;
this.hide = function(){
this.isHide = true;
};
}For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of 50 Angular interview questions you must master (Collection). For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- A brief discussion on how RxJS maps data operations in Angular
- How to improve the performance of Angular applications using pipes?
- Let’s briefly talk about Angular template engine ng-template
- Let’s talk about template input variables (let-variables) in Angular
- Let’s talk about how to modify .css files to .scss files in Angular projects
- A brief discussion on how to add and use Font Awesome in Angular