Angular implements a simple home page navigation function with tabs switching

Angular version: 16.1.1

 Project structure:

angular.json configuration:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-router": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-router",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-router:build:production"
            },
            "development": {
              "browserTarget": "angular-router:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-router:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

 package.json:

{
  "name": "angular-router",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.1",
    "@angular/cli": "~16.1.1",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

tsconfig.app.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

styles.scss global style sheet clears some default styles

/* You can add global styles to this file, and also import other style files */
*{
    margin: 0;
    padding: 0;
    border: 0;
}

1. The ng command adds 4 page components (tabs, tab1, tab2, tab3, info), and angular will automatically import the components into app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 所有页面导入根模块
import { TabsComponent } from './tabs/tabs.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';
import { InfoComponent } from './info/info.component';

@NgModule({
  declarations: [
    AppComponent,
    TabsComponent,//声明所有页面组件
    Tab1Component,
    Tab2Component,
    Tab3Component,
    InfoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Add a route placeholder tag in app.component.html. According to the routing rules, the page matching the route will be inserted here for display. The <router-outlet></router-outlet> here will be the first level of the routing rule The component matched by the route is inserted, because app.component.html is a page in the root module of the project

<!-- index.html加载本页面组件，本页面只有一个路由占位标签 -->
<!-- 路由占位，会将本模块（这里是根模块）的一级路由对应页面插入进来显示 -->
<!-- 这里会将我们的一级路由的页面插入进来显示，当路由到tabs页面时也就是带导航选项卡的页面 -->
<!-- 本案例的一级路由有2个页面，分别是tabs和info，输入http://localhost:port/默认导航到tabs/tab1显示导航页，这个在定义的路由规则中可以看到 -->
<!-- 可以看到tabs页面组件中同样存在此占位标签，将tabs子路由的页面插入到tabs页面中<router-outlet></router-outlet>显示 -->
<router-outlet></router-outlet>

app.component.scss and app.component.ts have no modified content by default

3. Write routing rules in app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsComponent } from './tabs/tabs.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';
import { InfoComponent } from './info/info.component';
// 一级路由匹配到的页面在定义该路由规则所在的模块的组件中的<router-outlet></router-outlet>中插入显示
//相应的，一级路由下匹配到的页面的子路由在相应页面的<router-outlet></router-outlet>中显示
//这里一级路径在app模块（本项目根模块）中定义，则一级路由页面插入到app.component.html里的<router-outlet></router-outlet>中
// 这里一级路由有2个分别为tabs和info页面，tabs页面的子路由匹配到的页面插入到tabs页面组件中的<router-outlet></router-outlet>中显示
// tabs子路由有三个页面，在tabs中通过路由指令routerLink指定路径，配合tabs页面的<router-outlet></router-outlet>即实现首页导航
const routes: Routes = [
  // 一级路由，输入http://localhost:port/默认导航到/tabs/tab1，
  //tabs是首页，带多个导航选项卡，点击切换不同内容
  //输入http://localhost:port/info则进入info页面，也可通过
 
  { 
    path:"tabs",
    component:TabsComponent,
    children:[
      //tabs的子路由，实现了一个首页导航tab切换选项卡，
      //输入http://localhost:port默认导航到/tabs/tab1页面
      {
        path:"tab1",
        component:Tab1Component
      },
      {
        path:"tab2",
        component:Tab2Component
      },
      {
        path:"tab3",
        component:Tab3Component
      },
      {//这里路径为空则会重定向到tabs/tab1
        //比如http://localhost:port/tabs就会默认到http://localhost:port/tabs/tab1
        path:"",
        redirectTo:"tabs/tab1",
        pathMatch:"full"
        
      }
    ]
  },
  {
    path:"info",
    component:InfoComponent
  },
  //这里路径为空就会重定向到tabs/tab1
  //比如http://localhost:port就会默认到http://localhost:port/tabs/tab1
  {
    path:"",
    redirectTo:"tabs/tab1",
    pathMatch:"full"
  }
 
 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. Write the page in tabs.component.html and display three navigation switching cards. The <router-outlet></router-outlet> tag in tabs will be inserted into the component display according to the rules of the sub-routing of the tabs component to realize the top <a The routing instruction routerLink in the ></a> tag switches the content display of different components at the bottom

<nav>
    <a routerLink="/tabs/tab1">tab1</a>
    <a routerLink="/tabs/tab2">tab2</a>
    <a routerLink="/tabs/tab3">tab3</a>
</nav>
<!-- 路由占位，将tabs的子路由匹配到的页面插入到这里，上面a标签中的routerLink指令即是路由指令 -->
<!-- 点击上面任意a标签根据路由指令路径匹配到相关页面后插入到这里显示，即实现导航页 -->
<!-- 本页面有三个导航切换标签，点击tab1或其他会相应在<router-outlet></router-outlet>插入tab1页面或其他页面显示，这里实现了顶部导航切换，底部相应内容显示 -->
<!-- 在tab1中设置了一个按钮，点击会跳转到info页面，info和tabs为一级路由中定义的路由页面，会在app.component.html里的<router-outlet></router-outlet>中显示，即离开导航页，也就看不到导航选项卡 -->
<router-outlet></router-outlet>

tabs.component.scss

nav{
    width: 100%;
    height: 60px;
    background-color: antiquewhite;
    display: flex;
}
a{
    flex: 1;
    text-align: center;
    height: 60;
    line-height: 60px;
    text-decoration:none;
}

tabs.component.ts

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

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss']
})
export class TabsComponent {
  
}

Five, write tab1, tab2, tab3, info page components

1、table1

tab1.component.html

<p>tab1 works!</p>
<button (click)="go()">点击跳转info页面</button>

tab1.component.scss

button{
    width: 100px;
    height: 100px;
}

tab1.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: './tab1.component.html',
  styleUrls: ['./tab1.component.scss']
})
export class Tab1Component {
  constructor(private router:Router){

  }
  go(){
    this.router.navigateByUrl("info");
  }
}

2、tab2

tab2.component.html

<p>tab2 works!</p>

tab2.component.scss and tab2.component.ts have no modified content by default

3、tab3

tab3.component.html

<p>tab3 works!</p>

tab3.component.scss and tab3.component.ts have no modified content by default

4、info

info.component.html

<p>info works!</p>

info.component.scss and info.component.ts have no modified content by default

So far all the writing is completed, execute ng serve to run, the default home page is http://localhost:4200/tabs/tab1, click on different navigation tabs, the content of different components is displayed below, click the button under tab1 to jump directly to http:/ /localhost:4200/info, the info component will replace the tabs component and display it in app.component.html, so there will be no top navigation tab, because the navigation tab is in the tabs component

 

 

 Angular implements simple home page top navigation tabs switching