What are the 8 main building blocks of the angular 2 application _angularjs

In front of the words: recent free time learning angular 2, national day time to see the official website of QuickStart, also wrote an article, just a Hello World demo. After continuing to read a project tutorial, just start still can keep up, when the back is more confusing. Indeed, for beginners, it is more troublesome to understand a framework. So stop the project and start looking at how angular's overall framework is, contact the project, analyze it, take it slow.

Learning Link: China Civil Service Network

Body Start:

Angular applications: Use HTML to write templates with angular, use component classes to manage these templates, add application logic with services, and package and publish components and services in modules. Start the application by booting the root module. Angular takes over in the browser, displays the content of the application, and responds to user interaction based on the instructions we provide.

These nouns are very important, throughout the angular application development.

8 Main building blocks for angular applications:

Module modules
Component components
Template Template
Meta-data metadata
Data binding Binding
Directive directive
Service services
Dependency Injection Dependency Injection

Module

Angular application is modular, has its own module system, called Angular module/ngmodules.

What exactly is a module? What does modularity mean in angular?

The angular application has at least one module (the root module), called the Appmodule.

Most applications have many other feature modules, which are formed by aggregation of a group of domain classes, workflows, or closely related functions.

All modules of the angular are a class with @NgModule adorners.

The angular module is class!!!

Adorners are functions that are used to decorate JavaScript classes. is responsible for attaching metadata to the class.

Ngmodule is an adorner function that receives a metadata object that describes the properties of a module. Properties are:

declarations (Declaration): The view class that is owned in this module. Angular has three view classes: components, directives, pipelines.
A subset of exports:declarations that can be used for component templates in other modules.
Imports: Classes that need to be exported by other templates in this module component template.
Providers: The creator of the service. This module adds them to the Global service table so that they can be accessed in any part of the application.
Bootstrap: Identifies the main view (root component) of the application. Only the root module can set this property.

The following is a simple root module:

App.module.ts
Import {ngmodule} from   ' @angular/core ';
Import {Browsermodule} from ' @angular/platform-browser ';

@NgModle an adorner function that accepts an object with several properties
@NgModule ({
 imports:   [Browsermodule],
 providers:  [Logger],
 declarations: [appcomponent],
 exports:   [appcomponent],
 bootstrap:  [appcomponent]
})

Appcomponent Export statement, the root module does not need to be exported, and other components do not import the root module.
Export class Appmodule {}

Boot the root module to start the application. To boot the appmodule in the Main.ts file:

App/main.ts
Import {platformbrowserdynamic} from ' @angular/platform-browser-dynamic ';
Appmodule import
{appmodule} from './app.module '

was imported from the App.module file Platformbrowserdynamic (). Bootstrapmodule (Appmodule);

At this point, the project has only app/app.module.ts files and app/main.ts, which defines the root module of the application, which references it to start the application.

The angular module is compared to the JavaScript module:

The modularity of JavaScript is file-import, and each file is a module.

Angular modules (classes decorated with @NgModule) are the basic features of angular.

The JavaScript module system manages a set of JavaScript objects.

In JavaScript, each file is a module, and the object defined in that file is subordinate to that module. With the Export keyword, some of its objects can be declared as public. Other modules can use the import statement to access exposed objects.

This feature of JavaScript is useful.
The Export keyword is declared as public, and the import statement accesses the exposed object.

Both of these will be used in angular, as you can see from the two files above.

Module Library

Above said, angular used JavaScript module, so its JS module is the Library module, JS file library.

The names of the angular libraries are prefixed with @angular, and can be installed using the NPM Package management tool, and the import statement above can access the objects in them.

This is very good to understand, angular is based on JS to achieve a single page frame, so it itself or need to enrich the JS library.
For example, import the Component adorner from the @angular/core library:

Import {Component} from ' @angular/core ';

Use JavaScript import statements to import some of the angular's modules from the angular library.

Import {Browsermodule} from ' @angular/platform-browser ';

In the code of the root module above, the application module needs to browsermodule some of the material, so add it to the Imports @NgModule meta data:

Imports: [Browsermodule];

Let's see what JS modules are in the basic @angular library:

Common
Compiler
Core
Forms
http
Platform-browser
Platform-browser-dynamic
Router
Upgrade

Therefore, we also use the modular system of angular and JavaScript.

This piece of imports and exports more chaotic, you can comb their own.

Component

The component is responsible for controlling a small piece of space on the screen, which is the view.

Define the application logic of the component in the class (used to support the view). The component interacts with the view through a number of APIs consisting of properties and methods.

So the component is the contact view.

The previous export keyword can declare the class in the module to be public, and then access is implemented in the import.

There are many properties and methods inside the class.

Template

Define the view with the template that the component comes with. Templates exist as HTML, which tells angular how to render a component (view).

Look at a template for a component file:

app/hero-list.component.html
 
 

The template looks like standard HTML, which has some nonstandard HTML syntax. *ngfor, {{hero.name}}, {click}, [Hero], and

So, angular is handling HTML in this way.

Meta data

Meta-data tells angular how to handle a class.

There are some methods and properties in the previously export class, but how do you handle this class?

Just attaching metadata to this class means that the class is a component.

In typescript, we use adorners (decorator) to attach metadata.

Analyze the following meta data:

App/hero-list.component.ts
@Component ({
 moduleId:module.id,
 selector:  ' hero-list ',
 Templateurl: ' hero-list.component.html ',
 providers: [Heroservice]
})
Export class Herolistcomponent Implements OnInit {/
* ... */
}

The @Component adorner marks the immediately following class as a component class.

Will the class behind the adorner be converted to a component class?

The configuration item in the adorner:

ModuleID: provides a base address for the URL associated with the module.
How is this address used?
selector: CSS selector, which tells angular to look for a tag in the parent HTML, and then creates the component instance and inserts it into the label.
Implements the display of HTML.
templateurl: module-relative address of the component HTML template.
The location where the HTML template is set.
providers: array that contains the dependency injection providers required by the services on which the component depends. Tells Angular that the constructor of the component requires a service that the component can fetch data from the service.
The delivery of some data is done through the service, otherwise, the other views can only control the static display.

The metadata in the @Component tells Angular how to get the metadata you have set for the component.

Templates, metadata, and components describe this view together.

The component is the view, and the template provides the structure of the HTML.

Data binding

If there are no frames, then we need to do some. You can use jquery to implement this process by pushing data values to HTML controls and converting the feedback received by users into actions and value updates.

The angular framework implements data binding, a mechanism for linking parts of a template to parts of a component. Adds a binding tag to the template HTML, and angular connects the templates and components.

means that we deliberately automatically update the view data because it binds the component to implement the Data association.

Look at an example:

App/hero-list.component.ts

<li>{{hero.name}}</li>
 
 

Observed in this template HTML, there are some nonstandard HTML characters.

{{hero.name}}} Interpolation expression: Displays the value of the component's Hero.name property in the element.
[Hero] Property binding: Uploads the values of the parent component to the Hero property of the subassembly.
(click) Event Binding: The method is called when the user clicks on the element.

The relationship between documents needs to be sorted out.
Bidirectional data binding: the ability to implement property bindings and event bindings at the same time. See Example:

App/hero-detail.component.ts

<input [(Ngmodel)]= "Hero.name" >

The value of the Data property is passed to the input box from the component with the property binding, which causes the user's modifications to be passed back to the component, setting the property value to the most recent value.

Instructions

The angular template is dynamic. When angular renders them, it modifies the DOM according to instructions.

That is, when parsing template html, the instructions are parsed.

The instruction is a class with instruction metadata.

The instruction is a class, and it contains instruction source data.

In typescript, the metadata is attached to the class by @Directive adorner.

As with the metadata of the previous class, the metadata is appended to the following class by the @Component adorner, the programming component class. This is to attach some metadata to the following instruction class by @Directive adorner.

Structured instruction: modifies the layout by adding, removing, and replacing elements in the DOM. Ngfor, Ngif.

property directive: modifies the appearance or behavior of an existing element. Ngmodel

Service

Services are divided into a number of types, values, functions, applications required characteristics.

Almost anything can be a service. A typical service is a class.

For example:

Log service
Data Services
Message bus
Tax Calculator
Application Configuration

Component is the largest consumer of services.

Some of the operations of the component require the service to provide some data.

example, display logging to the browser console:

App/logger.service.ts

Export class Logger {
 log (Msg:any)  {console.log (msg);}
 Error (Msg:any) {console.error (msg);}
 Warn (msg:any) {Console.warn (msg);}
}

These services allow the component to not go to the server to get data, validate ..., all of which can be done through the service.

The task of the component is to provide the user experience, that's all!

It is between the view (rendered by the template) and the application logic (including the model).

Well-designed components provide properties and methods for data binding and entrust services to things that are not important to them.

Dependency Injection

Dependency injection is a way to provide a new instance of a class that handles all the dependencies (services) that are required for a class.

Angular uses dependency injection to provide the services needed for the components and components we need.

Angular can see the required service for the value component by looking at the constructor's parameter type.

Example:

App/hero-list.component.ts

Constructor (private Service:heroservice) {}

The parameters of the constructor refer to a service.

When angular creates a component, an injector (Injector) is first found for the service required by the component.

An injector is a container for maintaining an instance of a service that is stored in a previously created instance. If the requested service instance is not yet in the container, the injector creates a service instance, adds it to the container, and returns the service to angular. When all the services are parsed and returned, angular invokes the component's constructor with these services as parameters, which is dependency injection.

This means that the service is executed before the component. It processes all the services to a warehouse, then processes the components, and the component needs to be taken out of the warehouse for you.
The provider is added to the root module, where the same instance of the service is used everywhere:

App/app.module.ts

providers: [
 backendservice,
 heroservice,
 Logger
],

Provider is the component that must exist before the component is determined to be processed
You can also register it with the component layer:

App/hero-list.component.ts

@Component ({
 moduleId:module.id,
 selector:  ' hero-list ',
 Templateurl: ' hero-list.component.html ',
 providers: [Heroservice]
})

Added to the properties of the adorner meta data.

The main points of dependency injection:

1. Dependency injection permeates the entire angular framework
2, the injector is the core of the mechanism
The injector is responsible for maintaining a container, storing the created service instance
The injector can use the provider to create a new service instance
3. A provider is a recipe for creating a service.
4, register the provider to the injector.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.