This article directory

  • I. Project start
  • Write routing components
  • Write page components
    • 1. Write a single component
    • 2. Simulated data
    • 3. Write primary and secondary components
  • 4. Write services
    • 1. Why do you need service
    • 2. Write services
  • 5. Introduce RxJS
    • 1. About RxJS
    • 2. Introduce the RxJS
    • 3. Transform data acquisition methods
  • Six, the transformation of components
    • 1. Add a history component
    • 2. Add and delete historical records
  • 7. HTTP transformation
    • 1. Introduce the HTTP
    • 2. Request data through HTTP
    • 3. Modify data through HTTP
    • 4. Add data over HTTP
    • 5. Delete data over HTTP
    • 6. Search for data through HTTP
  • Eight, epilogue

This is an exercise I wrote myself after learning the Angular Hero Guide tutorial. Step by step, the final project source code can be viewed here.

Two Angular learning sites are recommended:

  1. Presents Chinese website
  2. Angular Path to immortality

What’s more, I didn’t pay much attention to styles, so styles are a little ugly, mostly in the core logic. Final implementation:

  • Home page book list data display
  • The static or dynamic routes on each page are redirected
  • Local analog data service
  • Add, delete, change and check book data
  • Parent-child component communication
  • Usage and introduction of common commands

Later, I will compile this series of articles into my [CuteJavaScript], which has organized the ES6/7/8/9 knowledge and review the JS basic series of articles.

So follow me through this introductory project step by step.

Zero. Angular installation

Angular requires 8.x or 10.x versions of Node.js. To check your node.js version, run the Node -v command in a terminal/console window. To install Node.js, visit nodejs.org.

  1. The installation presents CLI
npm install -g @angular/cli
Copy the code
  1. Common commands

These commands will be described in detail in subsequent use.

  • Start the service and open a new window
ng serve --open
# --open can be shortened to -o
Copy the code
  • Creating a new component
ng generate component books
# generate short for G
Copy the code
  • Creating a New service
ng generate service books
Copy the code
  • Creating a Routing Module
ng generate module app-routing --flat --module=app
Copy the code
  • other

In addition, the Angular CLI provides many commands. For details, see the official Angular CLI command documentation.

The final setup looks like this:

I. Project start

  1. Create a project
ng new books
cd books
Copy the code
  1. Create the two page components you need
ng g component index
ng g component detail
Copy the code

G is short for generate.

Write routing components

For the sake of the project structure, a simple route configuration will be followed. If you don’t understand something, check out Angular Routing and Navigation.

  1. Installing a Routing Module
ng g module app-routing --flat --module=app
Copy the code

Flat places this file in SRC /app instead of a separate directory. –module=app tells CLI to register it with the Imports array of AppModule.

  1. Import Routing Module
// app-routing.module.ts  
import { RouterModule, Routes } from '@angular/router';
Copy the code
  1. Export routing module instructions

Exports an array of @NgModule.exports and passes in the RouterModule. Exports the RouterModule so that the router directives can be used in the AppModule components.

// app-routing.module.ts  
@NgModule({
  imports: [CommonModule],
  declarations: [].exports: [RouterModule]
})
Copy the code
  1. Adding a Defined Route

When adding a route here, remember to import the components you want to point to. Here we need to import the components of two pages:

// app-routing.module.ts  
import { IndexComponent } from './index/index.component';
import { DetailComponent } from './detail/detail.component';
Copy the code

We then define the route we need in the routes variable, of type routes we introduced:

// app-routing.module.ts  
const routes: Routes = [
  { path: ' '.redirectTo:'/index'.pathMatch:'full' },    / / 1
  { path: 'index'.component: IndexComponent},            / / 2
  { path: 'detail/:id'.component: DetailComponent},      / / 3
]
Copy the code

Angular routes accept two parameters:

  • path: Matches the browser address barURLString of.
  • component: Component name that the router displays when navigating to this route.

Line 1: As the default route of the routing system, when all routes do not match, it is redirected to this route and the corresponding component is displayed. Line 2: Route configuration under normal conditions. Line 3: Configure the route with the parameter. After the route /, use: to concatenate the parameter name. The method to obtain the value of this parameter will be described later.

Alternatively, we can pass parameters like this, passing data directly through the route, as described below:

{ path: 'pathname'.component: DemoComponent, data: { title: 'pingan8787'}},Copy the code
  1. Adding Route Monitoring

You need a tool to monitor route changes. Add the RouterModule to the @NgModule.imports array and configure it with routes. We simply call the RouterModule.forroot () function in the imports array, like this:

// app-routing.module.ts  
imports: [ RouterModule.forRoot(routes) ],
Copy the code
  1. Adding a Routing Egress

in app.component.html:

<! -- app.component.html -->
<div>
  <h1>Welcome to my personal library!</h1>
  <router-outlet></router-outlet>
</div>
Copy the code

So this
is where we’re going to export the route, where the component is going to display it, and basically, it’s going to tell the router where to display the view of the route.

  1. Adding a Routing Link

Add 3 routerLinks to app.component.html:

<! -- app.component.html -->
<div>
  <h1>Welcome to my personal library!</h1>
  <a routerLink="">redirect</a> | 
  <a routerLink="/index">Open the home page</a> | 
  <a routerLink="/detail/1">Open the book details</a>
  <router-outlet></router-outlet>
</div>
Copy the code

For the three button routes, we pass the three routes defined above into the routerLink parameter, and now the project can jump to the page.

Alternatively, we can pass in an optional parameter, routerLinkActive=”className”, which represents the style to display when the tag is activated. The value is a string of the className of the style:

<a routerLink="/index" routerLinkActive="activeClass">Open the home page</a> | 
Copy the code
  1. Gets the parameters of the route with parameters

In step 7, when we click the Open Book Details button, we have a parameter in the route, and we need to get this parameter like this:

  • Pilot outlet moduleActivatedRouteandLocation:
// detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
Copy the code
  • Inject the value into the constructor as a private variable:
// detail.component.ts
export class DetailComponent implements OnInit {
  constructor(private route: ActivatedRoute, private location: Location){}ngOnInit(){}}Copy the code

ActivatedRoute saves the route information for the DetailComponent instance. You can get routing parameters and other data from the URL from this component. Location is an Angular service that deals with browsers. It is then used to navigate back to the previous view.

  • Extract routing parameters:

The getDetail method is declared, the route parameters are extracted, and the ngOnInit lifecycle hook method is executed in.

// detail.component.ts
ngOnInit() {
    this.getDetail()
}
getDetail(): void{
    const id = +this.route.snapshot.paramMap.get('id');
    console.log('The id of this textbook is${id}`)}Copy the code

Route. snapshot is a static snapshot of route information taken after a component is created. The paramMap is an object of the parameter values carried by the route in the URL. The value of “id” is the ID of the book to get. Note: Route parameters are always strings. Here we use the (+) operator to convert a string to a number.

Now refresh the page in your browser and click the Open Book Details button. You can see that the console outputs the textbook with ID 1. At this point, we’re done configuring the route, and we can start working on the logic of the page.

That’s the end of this section