Angular 4.0 learning tutorial architecture detailed explanation


The front time Google released a 4.0 version of a popular Angular JavaScript framework, which is committed to zooming in the size of the generated code and the simplified release plan of the framework.

I haven’t written this kind of thing for a long time, but I don’t think there is no knowledge structure, and learning efficiency will be greatly reduced. Share my understanding knowledge here for everyone, some of the contents of the official documentation. Below the topic

Angular Architecture Overview

Let’s first look at the architectural diagram of the official release.

Architecture Overview Angular 4.0学习教程之架构详解

This architecture exhibits eight main structural blocks in Angular applications:

  • Template
  • metadata
  • data binding (Data binding)
  • Directive
  • Service
Next I sequentially and combined with Let’s talk about it.

1. Module

Angular or Ionic new project exists that there is a root module, the default name is AppModule. If you use modularization to create an app, including AppModule, there is a class of @NGModule decorator (although he is very like annotations in Java, his official name is a decorator). Our new page, if you don’t use lazy loading, you must be @NGModule is repayed first after the first declaration. Let’s take an example, briefly introduce the contents of @ngmodule

// app.module.tsimport {ngmodule} from ‘@ Angular / Core ‘; import {BrowserModule} from’ @ angular / platform-browser ‘; @ NgModule ({imports: [BrowserModule], providers: [Logger], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent]} ) Export class appmodule {}
 Imports This module declares other modules required by other modules required by the components.  The creator of the Providers service and adds to the global service list to apply any part.  Declarations declares the view class owned in this module. Angular has three views: Components, instructions, and pipelines. 
The subset of Exports Declarations can be used for component templates for other modules.
bootstrap specifies the main view of the application (called root component), which is the host of all other views. Only the root module can set the bootstrap attribute.
  • On the meaning of the figure: Look at the upper left corner, the module is used to receive a module attribute metadata object.
  • 2. Component, Template (Template), metadata
  • This time we talk about these three points, first look at this code

/ /Hero-List.component.ts@component (}), templateURL: ‘./hero-list.component.html’, providers: [heroService]} Export Class HerolistComponent Implements Oninit {/ *.


Component is a decorator, he accepts a configuration object, Angular Create and present components and their views based on this information.

Selector: CSS selector, tells Angular to find the
tab in the parent HTML, create and insert the component.
 TemplateURL: The module of the component HTML template relatively address, if you use the template to write, use the "` "symbol to write the HTML code directly.  Providers: Dependent injection of services required for components.  

The template is that HTML code, can be introduced outside with templateURL or written directly with Template“.


The metadata decorator guides Angular behavior in a similar manner. For example @ INPUT, @ output, @ inJectable et al. is some of the most commonly used decorators, and the usage is not unfold here.
  • On the meaning of the figure: the block, template, metadata, and components in the middle, together drawn this view.
  • 3. Data Binding
  • A total of four data bindings, see sample code:

// Interpolated Expression Display Component’s property of {}
// Property Binding to pass the value of the parent component SelectEro to the child In the HERO attribute of the component

// Event Binding the user to call the Selecthero method of the component when you click on the name of the hero

// Bidirectional binding data attribute value flows from the component from the component by attribute binding frame. The user’s modification flows back to the component through the event binding, set the value value to the latest value

It may be that everyone looks at various parentheses. He summarizes:

Double brackets are one-way binding, and the value is transmitted. The direction is the component -> template.

Square brackets are one-way binding, and the attribute is passed. The direction is the parent component -> subcomponents. Parentheses is an event binding, actions, and other activities (Actions).

Square Clay Parentheses is two-way binding, the direction is the component

 On the meaning of the figure: the block in the middle, the data is bound to the template and components to provide data interaction.  
  • 4. Directive
  • Strict components are an instruction, but the components are very unique and located in the central position in Angular, so In the architecture overview, we have independently from the instructions.
  • There are two types mentioned here:
    Structure Structural instructions and attribute Attribute type instructions.

    put about the original proof of what component really be regarded as a command:

    While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from Directives.
      TWO Other Kinds of Directives EXIST: STRUCTURAL AND Attribute Directives.
    • The structural instruction is Ngfor, NGIF, by adding, removing, and replacing in the DOM Elements to modify layout.
    • The attribute command is NgModel, used to modify the appearance or behavior of an existing element.
    • Angular also has a small amount of instructions, which modifies structural layouts (such as ngswitch), or modifies the various aspects of the DOM element and components (such as NGStyle and NGCLASS). After that, I will write an article that tells their usage.
    • On the meaning of the figure: see the one in the upper right corner, the component is a template command, just extended some template-oriented features.
    • 5. Service

    The concept of the official document:

    Service is a broad scope, including: value , Functions, or applications required. There is nothing special for Angular. ANgular has no definition for services, and it does not even define the base class of the service, and there is no place to register a service.

    This is like a class named httpservice in iOS or Android, encapsulates the network request service, is not a specific thing, is a concept of understanding.

    On the meaning of the figure: Look at the top left corner corner, the service is used to encapsulate reusable business logic.

    6. Dependency Injection

    Dependency Injection is a way of providing a new instance of the class, and is also responsible for all required by the processing class. rely. Most dependencies are services. Angular uses dependency injection to provide new components and services required to components.

    For example, we have to import the HOMESERVICE service to a component, see this code:

    Constructor (Private Service: HeroService) {…}

    This constructor is a constructor that is based on the injection in the constructor. You may feel that it is very blamed for the previous written private, publication, this is a TypeScript syntax, habit.

    When Angular Create a component, the service needs to be requested for the service required by the component. We must first sign up a provider provider for HeroService with an injector injector.

    Look at the following code, it means we must write in Providers to use

    @component ({Selector: ‘Hero-List’, TemplateURL: ‘./hero-list.component.html’, Providers: [HEROSERVICE]})

    In the figure, the picture is viewed in the lower left corner corner, dependence Introduction is mainly used to import services.

    The above is the full content of this article, I hope this paper has a certain reference value for everyone’s learning or work. If you have any questions You can leave a message to communicate, thank you for your support of Tumi Cloud.

    © Copyright Notice
    Just support it if you like
    comment Grab the couch

    Please log in to comment