Declarations - In declarations, the reference to the components is stored. The App Component is the default component that is created whenever a new project is initiated. We will learn about creating new components in a different section.
Imports - This will have the modules imported as shown above. At present, Browser Module is part of the imports which is imported from @angular/platform-browser.
Providers - This will have reference to the services created. The service will be discussed in a subsequent chapter.
app.component.css - You can write your css structure over here. Right now, we have added the background color to the div as shown below.
app.component.html - The html code will be available in this file.
app.component.spec.ts - These are automatically generated files which contain unit tests for source component.
app.component.ts - The class for the component is defined over here. You can do the processing of the html structure in the .ts file. The processing will include activities such as connecting to the database, interacting with other components, routing, services, etc.
Environment
This folder has the details for the production or the dev environment. The folder contains two files.
environment.prod.ts
environment.ts
Both the files have details of whether the final file should be compiled in the production environment or the dev environment.
The body has <app-root></app-root>. This is the selector which is used in app.component.ts file and will display the details from app.component.html file.
Angular 4 uses the <ng-template> as the tag instead of <template> which is used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because there is a name conflict between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. This is one of the major changes in Angular 4.
Directives in Angular is a js class, which is declared as @directive. We have 3 directives in Angular. The directives are listed below -
Component Directives
These form the main class having details of how the component should be processed, instantiated and used at run time.
Structural Directives
A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor.
Attribute Directives
Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as shown below.
Imports - This will have the modules imported as shown above. At present, Browser Module is part of the imports which is imported from @angular/platform-browser.
Providers - This will have reference to the services created. The service will be discussed in a subsequent chapter.
app.component.css - You can write your css structure over here. Right now, we have added the background color to the div as shown below.
app.component.html - The html code will be available in this file.
app.component.spec.ts - These are automatically generated files which contain unit tests for source component.
app.component.ts - The class for the component is defined over here. You can do the processing of the html structure in the .ts file. The processing will include activities such as connecting to the database, interacting with other components, routing, services, etc.
Environment
This folder has the details for the production or the dev environment. The folder contains two files.
environment.prod.ts
environment.ts
Both the files have details of whether the final file should be compiled in the production environment or the dev environment.
The body has <app-root></app-root>. This is the selector which is used in app.component.ts file and will display the details from app.component.html file.
Angular 4 uses the <ng-template> as the tag instead of <template> which is used in Angular2. The reason Angular 4 changed <template> to <ng-template> is because there is a name conflict between the <template> tag and the html <template> standard tag. It will deprecate completely going ahead. This is one of the major changes in Angular 4.
Directives in Angular is a js class, which is declared as @directive. We have 3 directives in Angular. The directives are listed below -
Component Directives
These form the main class having details of how the component should be processed, instantiated and used at run time.
Structural Directives
A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor.
Attribute Directives
Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as shown below.
No comments:
Post a Comment