【17】 Interview questions to be mastered when entering a large factory - 50 angular interviews

Java Architect journey 2020-11-09 12:27:57
interview questions mastered entering large

We put together a major Angular Interview question list , Divided into three parts :

  • Angle interview questions – Beginner Level
  • Angle interview questions – intermediate
  • Angle interview questions – senior

Beginner Level – Interview questions

1. distinguish Angular and AngularJS.

features AngularJS Angular
Architecture Support MVC The design model Use components and instructions
Language Recommended language :JavaScript Recommended language :TypeScript
Expression syntax picture / Properties and events need to be specific ng Instructions Use () The binding event , Use [] Binding properties
Operational support No mobile support Provide mobile support
route $ routeprovider.when() For routing configuration @RouteConfig {(…)} For routing configuration
Dependency injection Does not support the concept of dependency injection Hierarchical dependency injection supporting tree based one-way change detection
Structure Difficult to manage Simplified structure , Make it easier to develop and maintain large applications
Speed Through two-way data binding , Development work and time are reduced Upgrade features than AngularJS faster
Support No more support or new updates Active support and frequent updates

2. What is? Angular?

Angular It's an open source front end Web frame . It's the most popular JavaScript One of the frames , Mainly by Google maintain . It provides an easy development based on Web The platform of the application , And enable front-end developers to manage cross platform applications . It integrates powerful features , For example, declarative templates , End to end tools , Dependency injection and a variety of other best practices that make the development path smoother .

3. Use Angular What are the advantages ?

The use of Angular Some of the main advantages of the framework :

  • Supports bidirectional data binding
  • It follows MVC Schema structure
  • It supports static templates and Angular Templates
  • You can add custom instructions
  • It also supports RESTfull service
  • Support validation
  • The communication between client and server is convenient
  • Support dependency injection
  • It has powerful functions , For example, event handlers , Animation, etc. .

4. Angular It's mainly used for what ?

Angular Typically used to represent a single page application SPA Development of .Angular Provides a set of ready-made modules , Simplify the development of single page applications . More Than This ,Angular It also has built-in data streams , Type security and modularization CLI The function of , Considered mature Web frame .

5. What is an angle expression ?

The angle expression is similar to JavaScript Code segment , It's usually placed in something like {{expression}} And so on . These expressions are used to bind application data to HTML

grammar :{{expression}}

6. Angular What is the template in ?

Angular Templates in are used to include specific to Angular Of the elements and attributes of HTML Compiling . These templates are combined with information from models and controllers , This information is further rendered to provide the user with a dynamic view .

7. stay Angular in , What is string interpolation ?

Angular String interpolation in is a special syntax , It's in double curly brackets **{{}} Use template expressions to display component data in . It is also known as Moustache grammar .**JavaScript Expressions are enclosed in curly braces , from Angular perform , Then embed the relative output into HTML In the code . These expressions are usually updated and registered like tables , As part of the summary loop .

8. Angular Medium Annotation and Decorator What's the difference? ?

Use Reflect Metadata library , Angle annotations are class “ only ” Metadata set . They are used to create “ notes ” Array . On the other hand , Decorators are design patterns used to separate decoration or modify classes , Without actually changing the original source code .

9. You are right. Angular How much does the controller know about ?

The controller is JavaScript function , for HTML UI Provide data and logic . seeing the name of a thing one thinks of its function , They control how data flows from the server to HTML UI.

10. Angular What is the scope of ?

Angular The scope in is an object that references the application model . It is the execution context of the expression . Scope to mimic application DOM The hierarchy of the structure . Scopes can monitor expressions and propagate Events .

11. Angular What are the instructions in ?

Angular The core function of is instruction , These properties allow you to write Application specific new HTML grammar . They are essentially Angular The compiler is in DOM Functions that execute when they are found in .Angular The instructions are divided into three parts :

  1. Component instructions
  2. Structure instruction
  3. Property directive

12. What is data binding ?

stay Angular in , Data binding is the most powerful , One of the most important features , Allows you to define components and DOM( Document object model ) Communication between . It fundamentally simplifies the process of defining interactive applications , You don't have to worry about pushing and extracting data between views or templates and components . stay Angular in , There are four forms of data binding :

  1. String interpolation
  2. Attribute binding
  3. Event binding
  4. Two way data binding

13. stay Angular What is the purpose of using filters in ?

Angular The filter in is used to format the value of an expression , In order to show it to the user . These filters can be added to the template , Instructions , Controller or service . More Than This , You can also create your own custom filters . Use them , You can easily organize data , To display data only when certain conditions are met . By using the vertical character |, Add a filter to the expression , And then there's the filter .

14. Angular and jQuery What's the difference? ?

features jQuery Angular
DOM operation yes yes
RESTful API No, yes
Animation support yes yes
Deep link routing No, yes
Form validation No, yes
Two way data binding No, yes
AJAX / JSONP yes yes

15. Angular What are the providers in ?

Provider is Angular Configurable services in . This is an instruction to the dependency injection system , It provides information about how to get dependency values . It is one with $ get() Object of method , This method is called to create a new instance of the service . Providers can also include other methods , And use $ provide To register a new provider .

intermediate – Interview questions

16. Angular Whether nested controllers are supported ?

Yes ,Angular It does support the concept of nested controllers . Nested controllers need to be defined hierarchically , To use it in the view .

17. How to distinguish between Angular Expression and JavaScript expression ?

Angular expression JavaScript expression
1. They can contain words , Operators and variables . 1. They can contain words , Operators and variables .
2. They can be written in HTML In the mark . 2. They can't be written in HTML In the mark .
3. They don't support conditions , Loops and anomalies . 3. They do support conditions , Loops and anomalies .
4. They support filters . 4. They don't support filters .

18. List the use of the core Angular How functions communicate between application modules .

Here's how to use the core Angular The most common way for functions to communicate between application modules :

  • Use the event
  • The use of the service
  • By means of **$ rootScope** The upper allocation model
  • Directly between the controllers [ $ parent, $$ childHead, $$ nextSibling etc. ]
  • Directly between the controllers [ ControllerAs Or other forms of inheritance ]

19. service() and factory() What's the difference? ?

Angular Medium service() Is a function for the application business layer . It runs as a constructor , And use... At run time 'new' Keyword call once . and factory() Is a similar to service() Function of , But it's more powerful , More flexible .factory() Is a design pattern that helps create objects .

20. $ scope and Angular Medium scope What's the difference? ?

  • Angular Medium $ scope Used to implement dependency injection (DI) The concept of , On the other hand ,scope For command linking .
  • $ scope yes $ scopeProvider Services provided , Can be injected into the controller , In a command or other service , and Scope It could be anything , For example, function parameter name, etc .

21. Explain the concept of scope hierarchy ?

Angular Medium $ scope Objects are organized into a hierarchy , And it is mainly used by the view . It contains a root range , The range may further contain a range called a sub range . A root scope can contain multiple child scopes . ad locum , Each view has its own $ scope, Therefore, the variables set by its view controller will be hidden from other controllers . The scope hierarchy is usually shown as follows :

  • root $ scope
    • controller 1 Of $ scope
    • controller 2 Of $ scope
    • ..
    • controller 'n' Of $ scope

22. What is? AOT?

AOT representative Angular-Ahead-of-Time compiler . It is used to precompile application components and their templates during the build process . use AOT Compilation of Angular The application takes less time to start . Again , The components of these applications can be executed immediately , Without any client-side compilation . Templates in these applications are embedded in their components as code . It reduces downloads Angular Compiler needs , So that you don't have to do the tedious tasks .AOT The compiler can discard unused instructions , These instructions are further discarded using the tree shake tool .

23. explain jQLite.

jQlite Also known as jQuery lite yes jQuery Subset , Including all its functions . By default , It's packaged in Angular in . It helps Angular Operate in a compatible cross browser manner DOM.jQLite Basically, only the most commonly used functions are implemented , So it takes less space .

24. explain Angular The summary loop in ?

Angular The summary cycle in is the process of monitoring the watch list , To track changes in the values of monitored variables . In each summary loop ,Angular Both the previous version and the new version of the range model value are compared . Usually , This process is implicitly triggered , But you can also use **$ apply()** Activate it manually .

25. What is? Angular modular ?

all Angular Applications are modular , And follow what is called NgModules A modular system for . These containers hold dedicated application domains , A cohesive block of code for a workflow or set of closely related functions . These modules usually contain components , Service providers and other code files , Its scope is covered by the NgModule Definition . A module , Code becomes more maintainable , Testable and readable . Again , All dependencies of an application are usually defined only in modules .

26. What kind of components can we create custom directives on ?

Angular Support the creation of custom instructions for the following :

  • Element directive - When a matching element is encountered , The command will activate .
  • attribute - When a matching property is encountered , The command will activate .
  • CSS- The instruction will be in the middle of a match CSS When the style is active .
  • notes - When a matching comment is encountered , The command will activate

27. Angular What are the different types of filters in ?

Here are Angular Various filters supported :

  • currency : Format numbers as currency .
  • date : Format the date to the specified format .
  • filter: Select a subset of items from an array .
  • json: Format the object as JSON character string .
  • **limit:** Will array / The string is limited to a specified number of elements / character .
  • A lowercase letter : Format the string as A lowercase letter .
  • number: Format numbers as strings .
  • orderBy: Array by expression Sort .
  • Capitalization : Format the string as Capitalization .

28. What is? Angular Dependency injection in ?

Dependency injection (DI) It's a software design pattern , Where objects are passed as dependencies , Instead of hard coding it in a component . When you try to separate the logic of object creation from the logic of using objects , The concept of dependency injection comes in handy .“ config” Operation and use DI, When loading modules to retrieve elements of the application , Must be pre configured DI. Use this feature , Users can change the dependencies according to their own requirements .

29. Distinguish between one-way binding and two-way data binding .

stay A one-way Data binding , Whenever you change the data model ,“ View ” or “ UI” Part of it doesn't update automatically . You need to write custom code manually , To update the view every time it changes .

And in the two-way Data binding , Once you change the data model , Then implicitly update View or UI part . Unlike one-way data binding , It's a synchronization process .

30. What is the lifecycle hook between components and instructions ?

Angular Components have discrete lifecycles , It includes different stages of the transition from birth to death . To better control these stages , We can use the following methods to connect it :

  • Constructors : By calling new It is called when a component or instruction is created .
  • **ngOnChanges:** Whenever any input properties of a component are changed or updated , Will call it .
  • **ngOnInit:** It is called every time a given component is initialized . At the first ngOnChanges after , The hook is called only once in its lifetime .
  • **ngDoCheck:** Whenever a change detector for a given component is called , It will be called . This allows you to implement your own change detection algorithms for the provided components .
  • ngOnDestroy: stay Angular Call the component immediately before destroying it . You can use this hook to unsubscribe from observable objects and detach event handlers , To avoid any type of memory leak .

31. Through to Angular Do a dirty check , What do you know about ?

stay Angular in , The process is called Dirty examination . The reason for calling it , Because it scans the entire range to make changes . let me put it another way , It compares all new scope model values with previous scope values . Because all the monitored variables are contained in a single loop , So any change in any variable / All updates will result in reallocation DOM The remaining monitoring variables that exist in . The monitored variable is in a single loop ( Abstract cycle ) in , Any change in the value of any variable will occur in DOM Redistribute the values of other monitored variables in the

32. distinguish DOM and BOM.

DOM Bill of material
1. Represents the document object model 1. Represents the browser object model
2. Represents the content of a web page 2. Work at the top of the page , And contains browser properties
3. All objects are arranged in a tree structure , And only through the provided API To manipulate and access documents 3. All in all JavaScript object , Variables and functions are implicitly window Members of the object
4. Handle HTML file 4. Access and manipulate browser windows
5. W3C Recommended standard specifications 5. Each browser has its own implementation

33. What is? Angular Medium Transpiling?

Angular Compiling in is the process of converting source code from one programming language to another . Usually , stay Angular in , This conversion is from TypeScript To JavaScript Of . It's an implicit process , It happens inside .

34. How to perform animation in Angular?

In order to be in Angular Perform animation in the application , You need to include a one called Animate Library Special Angular library , And then ngAnimate Modules are referenced into your application , Or will ngAnimate Add as a dependency to your application module .

35. What is? Angular Contains ?

Angular Contains in allows you to transfer the original children of an instruction to a specific location within the new template .ng Directive indicates that the included of the most recent parent of the containing is being used DOM The insertion point of . Such as ng-transclude or ng-transclude-slot And Class property directives are mainly used to contain .

36. Angular What is the event in ?

Angular Events in are specific instructions , Help customize various DOM The behavior of the event . Listed below Angular Supported events :

  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

37. List some tools for testing angle applications ?

  1. Karma
  2. Angular Mocks
  3. Mocha
  4. Browserify
  5. Sion

38. How to be in Angular Create service ?

stay Angular in , Services are replaceable objects , The objects are linked together using dependency injection . Create a service by registering it in the module that you want to execute in . Basically , You can create angle services in three ways . Basically , They are in Angular Three ways to create services in :

  • Factory
  • Service
  • Provider

39. What is singleton mode , stay Angular You can find it in ?

Angular Medium Singleton Patterns are a great pattern , It limits a class from being used more than once .Angular Medium Singleton Patterns are mainly implemented in dependency injection and services . therefore , If you don't use it “ new Object()” Instead of setting it as a singleton , Two different storage locations will be assigned to the same object . And if you declare the object as a singleton , If the object already exists in memory , It will simply be reused .

40. You are right. Angular Medium REST Learn about those ?

REST Express RE appearance trumpet the venerable elderly frigging awesome Transfer the possession of (BOT).REST Is applicable to HTTP Requested API( Application programming interface ) style . under these circumstances , Requested URL It can precisely locate the data that needs to be processed . then ,HTTP Method will identify the specific action that needs to be performed on the requested data . therefore , Follow this method API go by the name of RESTful API.

41. Angular What is bootstrapping in ?

stay Angular Booting in is just initialization or startup Angular Applications .Angular Support automatic and manual boot .

  • *** Automatic bootloader :*** This is through ng-app Instructions are added to the application's root directory , Usually on a mark or mark ( If you wish angular Auto boot application ). When Angular find ng-app When the command , It will load its associated module , Then compile DOM.
  • Manual guidance : Manual boot gives you information on how and when to initialize Angular More control of the application . If you want to Angular Do anything else before you wake up and compile the page , This will be very useful .

42. stay Angular What's the difference between linking and compiling ?

  • The compilation function is used for templates DOM Manipulate and collect all instructions .
  • The link function is used to register DOM Listeners and instances DOM operation , And execute after cloning the template .

43. You are right. Angular What do you know about constants in ?

stay Angular in , Constants are similar to services used to define global data . Constants use keywords “ constant” Statement . They are created with constant dependencies , It can be injected anywhere in the controller or service .

44. Angular The provider of , What's the difference between service and factory ?

Provider service factory
A provider is a way to pass part of an application to app.config The method in A service is one that is used to create to 'new' Keyword instantiation of the service method . This is the method used to create and configure services . ad locum , You can create an object , Add properties to it , Then return to the same object , And pass the factory method to the controller .

45. What is? Angular Global API?

Angular Global API It's a global view for performing a variety of common tasks JavaScript Combination of functions , for example :

  • Comparison object
  • Iteration objects
  • Conversion data

There are some common Angular Global API function , for example :

  • ** With horns . A lowercase letter :** Convert a string to a lowercase string .
  • With horns . Capitalization : Convert a string to an uppercase string .
  • With horns .isString: If the current reference is a string , Then return to true.
  • ** With horns .isNumber:** If the current reference is a number , Then return to true.

Advanced level – Interview questions

46. stay Angular in , Describes how to set up , Get and clear cookie?

In order to be in Angular Use in cookie, You need to include a name called ngCookies angular-cookies.js Module .

Set up Cookies – To set... In key value format Cookies, Use “ put” Method .


** obtain Cookie –** In order to obtain Cookie, Used “ get” Method .


** eliminate Cookie –** Use “ Delete ” Methods to remove Cookie.


47. If your data model is in " Area " It's new , Please explain the process , How you're going to see the view ?

You can use any of the following to update the view :

  1. ApplicationRef.prototype.tick(): It will perform change detection on the entire component tree .
  2. **NgZone.prototype.run():** It will perform change detection on the entire component tree . ad locum , Under the hood run() Will call tick In itself , Then the parameters will be in tick Before getting the function and executing it .
  3. **ChangeDetectorRef.prototype.detectChanges():** It will start change detection on the current component and its subcomponents .

48. stay Angular Explained in ng-app Instructions .

ng-app Instructions are used to define Angular Applications , So that we can be in Angular Auto boot is used in applications . It said Angular Root element of the application , Usually in <html> or <body> Statement near the label . stay HTML Any number of ng-app Instructions , But there is only one Angular Applications can be implicitly formally booted . The rest of the applications have to be booted manually .


<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
Full Name: {{firstName + ” ” + lastName }}

49. From the prepared TemplateRef What is the process of inserting an embedded view ?

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 just by clicking the corner button HTML Elements ?

have access to ng-hide Commands can be easily hidden with the controller HTML Elements , To hide when you click a button HTML Elements .


<div ng-controller ="MyController">
<button ng-click ="hide()"> Welcome to the official account of the whole stack programmer community </ button>
<p ng-hide ="isHide"> Welcome to your attention Java Architect community official account !</ p>
</ div>


controller: function() {
this.isHide = false;
this.hide = function(){
this.isHide = true;

Welcome to your attention Java Architect community official account Reprinted from Java Architects must see , For more information, click to see !

本文为[Java Architect journey]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple