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:
[Related tutorial recommendations: "angular Tutorial"]
#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.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:
There are some common Angular Global API functions, such as:
#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!
How to set font in css
The latest ranking of the top ten exchanges in the currency circle
How many types of usb interfaces are there?
Main purpose of file system
Windows checks port occupancy status
Is it legal to buy and sell Bitcoin on Huobi.com?
Mac shortcut key list
What is an empty array in php
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
