Angular2 entry-Architecture Overview, angular2 Architecture Overview

Angular2 entry-Architecture Overview, angular2 Architecture Overview
Too many rows too many rowsIntroduction

　　In March 23, Angular4 was officially released (not 3 ). It seems that Angular2 is now learning again later-_-|. Angular2 has made great changes based on Angular1. I asked an Angular2 question to a classmate (I have learned Angular1 before). He turned to the question that this is Angular code? It can be seen how much Angular1-> Angular2 changes. Let's take a look at the architecture of Angular2.

 

Zookeeper and zookeeper core modules

A complete Angular application consists of six important parts:Components,Template,Command,Service,Dependency InjectionAndRouting

Relationships between them:

We can see that:

1. The template view is used to interact with users. templates and component classes form components.

2. Routing controls the creation and destruction of components to drive interface switching

3. commands are associated with templates, which extends the template syntax.

4. A service is a unit that encapsulates several functional logics. it is introduced into the component through dependency injection.

 

Zookeeper Components

The Angular framework is designed based on components and controls a small area of the screen. For example, the navigation bar of a webpage is a component.

Code of a component:

import { Component, Input } from '@angular/core';import { Hero } from './hero';@Component({    selector: 'my-hero-detail',    template: `        <div *ngIf="hero">          
 
 
 
Templates
We define the component view through the built-in template of the component. The template exists in HTML format, telling Angular how to render the component.
For example, @ Component in the above Component is the Template
@Component({    selector: 'my-hero-detail',    template: `        <div *ngIf="hero">          
 
▓ Command
Commands are closely related to templates. commands can interact flexibly with DOM, and you can change the style or DOM. General commands are applied to existing DOM elements.
1. Modify the DOM
<Button * ngIf = "canEdit"> edit </button>
When canEdit is set to true, the button is displayed. Otherwise, the button is hidden.
 
2. Change the element style
<Button [ngStyle] = "setStyles ()"> edit </button>
SetStyles () is a function that allows you to modify the style of an element.
 
Zookeeper zookeeper services
A service is a unit that encapsulates a single function. It is often referenced inside a component and used as a function extension of the component. It can be a simple string or JSON data, a function or even a class.
The component itself does not obtain data from the server, does not perform verification input, or directly writes logs to the console. They delegate these tasks to the service.
A simple service (including a class ):
export class Hero {    id: number;    name: string;}
 
Dependency Injection
Through the dependency injection mechanism, services and other modules can be introduced into any component, and developers do not have to worry about how these modules are initialized. Because Angular has already helped you handle this, and other modules dependent on this module will also be initialized.
 
Zookeeper route entry
It regards the URL in the browser as an operation guide, and then navigate to a view generated by the client, and can pass the parameters to the corresponding components supporting the view, help determine the specific content to be presented. You can bind a route to the link on the page. When you click the link, the corresponding view in the application is located. When you click a button, select from the drop-down list, or respond to events from any location, you can also navigate under code control. The router also records these activities in the browser's history log, so that the browser's forward and backward buttons can also work as usual.
 
References:
Unveil chapter 2 of Angular2
TypeScript Handbook (Chinese Version)