To view the new tutorial, please visit the front end of the road to immortality

Recently I answered some questions in SF and QQ group, and found that some questions are likely to be encountered by beginners. I don’t have enough time, so I would like to create a group and record every problem you encounter into an Angular FAQ. If you are interested, you can add a QQ group: Angular Path to The Fairy – 153742079 (group name rule: city + nickname)

Compared with the previous shared path to immortality directory, more new content has been added. First of all to introduce myself: I am not “great god”, because still in xiu xian ha. Here are some notes you took while learning Angular 2. Read the official documentation for more detailed and authoritative learning resources. In addition, the starting point of this series is to break up the Angular 2 concepts from point to point, and then introduce them one by one, using simple examples as much as possible to give you a basic understanding of each of the concepts before connecting them with concrete examples. (If you don’t like it, please forgive me.)

In order to conveniently record the learning materials, I have compiled a copy of Angular 2 and Ionic 2 learning materials and posted them on GitHub for those who are interested in learning.

Updated – 2017-05-05

Angular 4.x Component Learning Path (for reference only)

For those who have just moved from Angular 1.x to Angular 4.x, it is recommended to read the Angular 4.x vs. Angular 1.x chapter (which is not yet complete). The learning routes provided below are for reference only, and readers can read them by themselves. This course will cover basic Angular 4.x components. Please point out any omissions. (Friendly tip: beginners do not need to fully understand the content of each part, especially the part of the design source code analysis, just understand the basic usage, and then more practice ha)

  • Angular 4.x Template Syntax & Common Directives
    • Learn Angular 4.x template syntax and common built-in directives (update ngIf… Else)
  • Angular 4.x Directive
    • Understand the differences between directives and components and Metadata information
  • Angular 4.x Directive Lifecycle
    • Learn about the common ngOnInit, ngOnChanges, ngAfterViewInit, ngAfterContentInit declaration cycle hook and trigger order
  • Angular 4.x constructor & ngOnInit
    • Understand the application scenarios of the Constructor and ngOnInit hooks
  • Angular 4.x ViewEncapsulation
    • Understand the differences between the three encapsulation modes in ViewEncapsulation
  • Angular 4.x Input
    • Understand the @Input() decorator, how to implement parent -> child communication
  • Angular 4.x Output
    • Understand the @output () decorator, how to implement child -> parent communication
  • Angular 4.x ViewChild & ViewChildren
    • Understand @viewChild (), @viewChildren () decorators, how to get child components
  • Angular 4.x ContentChild & ContentChildren
    • Understand how @ContentChild() and @ContentChildren() decorators are used and how they differ from @viewChild () and @ViewChildren() decorators
  • Angular 4.x HostListener & HostBinding
    • Understand the concept of host elements and the role of the @hostListener () and @hostBinding () decorators
  • Angular 4.x ElementRef
    • Understand the role of ElementRef, definition and application, and common methods of Renderer API
  • Angular 4.x TemplateRef & ViewContainerRef
    • Learn about TemplateRef and ViewContainerRef
  • Angular 4.x Components Communicate
    • Understand common ways in which components communicate
  • Angular 4.x Component Inheritance
    • Learn about object-oriented concepts of classes and inheritance and the application of Angular 4.x component inheritance
  • Angular 4.x Change Detection – 1,Angular 4.x Change Detection – 2
    • Learn about Angular 4.x change detection, component change detectors and OnPush policies, Mutable & Immutable, ChangeDetectorRef, Observables, and more

Angular 4.x vs Angular 1.x

  • Angular 4.x NgModule vs Angular 1 module

    • It involves the use of Angular 1.x root module, submodule, and Angular 4.x root module, root component, and subcomponent definitions

  • Angular 4.x Service vs Angular 1 Service

    • How does Angular 4.x and Angular 1 define service and how to use it

  • Angular 4.x Pipe vs Angular 1 filter

    • Involves the use of Angular custom pipes (filters), pipe (filter) parameters, and pipe object ($filter) services

  • Angular 4.x ngFor vs Angular 1 ng-repeat

    • The difference between apps that use Angular *ngFor(ng-repeat) directives, index($index), and trackBy(Track by)

Provider

  • Angular 4.x Provider
    • This topic describes how to use useClass, useValue, useExisting, useFactory, and Provider
  • Angular 4.x Multi Providers
    • Multi Provider functions and Angular 4.x internal applications
  • Angular 4.x Forward Reference
    • The function of the forwardRef and the inner workings of the forwardRef explain that the JavaScript interpreter does not automatically promote classes
  • Angular 4.x OpaqueToken & InjectionToken
    • There are problems involving the use of string as Token. How to use OpaqueToken and InjectionToken to solve the problem is introduced in detail

Directive (instruction)

  • Angular 4.x Template Syntax & Common Directives
    • It involves template syntax, common instruction introduction and NgStyle instruction analysis, *ngFor trackBy application, etc
  • Angular 4.x Directive
    • Directive classes, Angular 4.x built-in property directives, structural directives,*directiveStructural directives syntax sugar, custom attribute directives, structural directives, etc
  • Angular 4.x Directive Lifecycle
    • It covers the difference between directives and components, the function and calling sequence of directive LifecycleHooks, LifecycleHooks, Angular 4.x LifecycleHooks, SimpleChanges interfaces, etc
  • Angular 4.x Components Communicate
    • Common methods of communication involving components: @input, @Output, @viewchild, template variable, MessageService, Broadcaster (Angular 1.x)On, $broadcast), pub-sub mode, and RxJS Subject
  • Angular 4.x Pass Async Data
    • A scheme for handling asynchronous input properties when parent-child component communication is involved
  • Angular 4.x Component Inheritance
    • Covers the concepts of classes and inheritance in object orientation and the application and considerations of Angular 4.x component inheritance
  • Angular 4.x Dynamically Creating Components
    • How to create components dynamically in Angular<ng-container>Function of instruction

Decorator

  • Angular 4.x Decorator – 1
    • It covers decorator definitions and classifications, TypeScript class decorators, property decorators, method decorators, parameter decorators, and more
  • Angular 4.x Decorator – 2
    • Examples of Angular 4.x class decorators, property decorators, method decorators, and parameter decorators
  • Angular 4.x Decorator – 3
    • Address Angular 4.x Metadata classes: Annotations, Design: ParamTypes, propMetadata, parameters, and mappings
  • Angular 4.x Input
    • Input, @Input(‘bindingPropertyName’), @Component() -Inputs, setter & getter, ngOnChanges, etc
  • Angular 4.x Output
    • Outputs include @output, @Output(‘bindingPropertyName’), @Component() -outputs, two-way Data Binding, [()] syntax example, ngModel, etc
  • Angular 4.x Inject Decorator
    • The function, practical application and internal implementation of @Inject decorator are discussed. The reason why non-type parameters can only be injected by @Inject(Something) is explained. In addition, the @Injectable and Reflect apis are introduced
  • Angular 4.x ViewChild & ViewChildren
    • It involves the use of @viewChild, @ViewChildren decorator and the principle of @viewChild decorator
  • Angular 4.x ContentChild & ContentChildren
    • It involves the use of @ContentChild, @ContentChildren decorator, and @ContentChild interface and decorator. It also introduces the concept of Content Projection and the difference between @contentChild and @viewChild decorators
  • Angular 4.x HostListener & HostBinding
    • It involves Host Element, HostListener decorator definition and application, Host Event Listener, HostBinding decorator definition and application, Host Property Bindings, etc

Pipe (Pipe)

  • Angular 4.x Pipe
    • Angular 4.x built-in pipe classes and usage examples, pipe parameters, pipe chains, custom pipes, pipe classes, Pipe probes, and more
  • Angular 4.x AsyncPipe
    • AsyncPipe with Promise, AsyncPipe with Observables, solutions to repeated sending requests using AsyncPipe and internal execution flow of AsyncPipe (source code parsing)

Dependency Injection

  • Angular 4.x IoC & DI
    • It covers IoC and DI, the application of DI in AngularJS 1.x, internal working principles and existing problems, etc
  • Angular 4.x Injector
    • Covers the concept of dependency injection and the internal implementation of the Angular 4.x injector

Change Detection

  • Angular 4.x Change Detection – 1
    • Involves changes and change trigger sources, Zones, NgZone, and how to access Zone pre-patched methods such as setTimeout, clearTimeout, etc.
  • Angular 4.x Change Detection – 2
    • Components and change detectors, OnChanges, change detection performance optimization, OnPush policies, Mutable & Immutable, ChangeDetectorRef, Observables, etc

Http

  • Angular 4.x Http Module – HTTP
    • It covers B/S, URI, MIME, HTTP request and response messages, HTTP request methods and status codes, and includes classic HTTP tutorials and related tools. For example, Cookie and Session, HTTP cache, CORS, HTTP/2, HTTPS and common HTTP packet capture tools, Chrome plug-ins, HTTP packages of various platforms, and stress testing tools
  • Angular 4.x Http Module – XMLHttpRequest
    • Related to AJAX, XMLHTTP, XMLHttpRequest detail, XMLHttpRequest Level 1, Level 2 detail, XHR upload, download data, XHR streaming, XHR The differences between scheduled polling and long polling, advantages and disadvantages, common XMLHttpRequest code snippets, FAQ, etc
  • Angular 4.x HttpModule brain map
  • Angular 4.x HttpModule Reveal
    • This section describes HTTP, HTTP Request packets, HTTP Response packets, HttpModule Request, Response, RequestOptions, ResponseOptions, and XHRBackend objects
  • Angular 4.x Http Interceptor (Incomplete)

The Form (Form)

  • Angular 4.x Template Driven Forms
    • Involves ngModel, [ngModel], [(ngModel)], ngModelGroup, and template-driven Error Validation
  • Angular 4.x Reactive Forms
    • Involves FormControl, FormGroup, Reactive Submit, Reactive Forms error Validation, and FormBuilder
  • Angular 4.x customizes form validation based on AbstractControl
    • FormGroup, FormBuilder and FormGroup source code, AbstractControl, custom validation rules, etc
  • Angular 4.x Custom Form Control
    • ControlValueAccessor and user-defined authentication rules are involved
  • Angular 4.x Custom Validator Directive
    • It involves required, email, minLength and other built-in validators and custom validation instructions
  • Angular 4.x Forms patchValue and setValue
    • Covers the use and differences between FormControl and FormGroup classes patchValue() and setValue() methods
  • Angular 4.x ngModel bidirectional binding revealed
    • Examples of ngModel usage (one-way binding, two-way binding, ngModelOptions, disabled, etc.) and the implementation principle of ngModel two-way binding are involved
  • Angular 4.x Creating Dynamic Form
    • Deals with dynamically creating forms

Router

  • Angular 4.x Quick start routing

    • It involves route configuration, dynamic routing, child routing, routerLink, routerLinkActive directive, and Router API.

  • Angular 4.x LocationStrategy

    • History objects, Hash and HTML 5 patterns, and Angular HashLocationStrategy and PathLocationStrategy strategies.

  • Angular 4.x Router Link Directives

    • RouterLink, RouterLinkWithHref, and RouterLinkActive directives in Angular 4.x Router

Events

  • Angular 4.x Events Bubbling
    • Event bubbling in Angular 4.x and how to prevent bubbling directives based on the Angular directive system
  • Angular 4.x EventManager & Custom EventManagerPlugin
    • How the EventManager works in Angular 4.x and how to customize the EventManagerPlugin

Compiler

  • Angular 4.x JIT vs AOT
    • It involves just-in-time & Ahead-of-time, JIT vs AOT, AOT detail, AOT actual combat, etc
  • Angular 4.x Compiler (incomplete)

Reference Object

  • Angular 4.x ElementRef
    • Involves the role of ElementRef, definition and application, and common methods of Renderer API
  • Angular 4.x TemplateRef & ViewContainerRef
    • HTML 5 Template, TemplateRef, ViewContainerRef, Angular 4.x view types, ViewRef and EmbeddedViewRef are introduced

RxJS

  • Functional Programming

    • Functional programming concepts, basic conditions, important features, advantages, common methods, etc

  • Observable

    • It involves Observer, iterator pattern, Observable proposal, custom Observable, Create Operators, Observer, Pull vs Push, Observable vs Promise, etc

  • Operators

    • Marble Diagrams, Create Operators, Transformation Operators, Filtering Operators, Combination Operators, and Utility Operators are involved Etc.

  • Subject

    • Observable Subscribe, Custom Subject, RxJS Subject, Angular 4.x RxJS Subject Application, BehaviorSubject, ReplaySubject, and AsyncSubject

Others (other)

  • Angular 4.x ViewEncapsulation
    • This topic describes the differences between Web Components, Shadow DOM, and ViewEncapsulation modes
  • Angular 4.x constructor & ngOnInit
    • Involving constructor, ngOnInit, constructor & ngOnInit application scenarios, etc
  • Angular 4.x DomSanitizer
    • Topics include Cross-site scripting, Angular 4.x XSS protection, DomSanitizer, custom keepHtml directives, and more