commit

src/app/app-routing.module.ts

@@ -1,12 +1,26 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 16:21:23
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 10:52:53
+ */
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './pages/home/home.component';
+import { UserComponent } from './pages/user/user.component';
 
 const routes: Routes = [
+  // 路由前面的路径不需要加/
   {
-    path: 'home',
+    path: '',
     component: HomeComponent,
   },
+  {
+    path: 'user',
+    component: UserComponent,
+  },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-03 17:23:41
+ * @LastEditTime: 2022-03-04 11:00:55
 -->
 
 <!-- 路由配置后显示的区域 -->

src/app/app.component.scss

@@ -0,0 +1,8 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+.w {
+  width: 1200px;
+  margin: 0 auto;
+}

src/app/app.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:21:23
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-03 17:13:00
+ * @LastEditTime: 2022-03-04 10:09:24
  */
 // 引入核心模块
 import { NgModule } from '@angular/core';
@@ -16,6 +16,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 // @ngModule装饰器 @ngModule接受一个元数据对象 告诉angular如何编译和启动对象\
 import { CoreModule } from './core/core.module';
+
 @NgModule({
   declarations: [AppComponent], //配置项目运行的组件
   imports: [BrowserModule, AppRoutingModule, CoreModule], //配置当前项目运行依赖的其他模块

src/app/components/components.module.ts

@@ -1,15 +1,19 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 16:58:41
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 10:54:07
+ */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NewsComponent } from './news/news.component';
-
-
+import { ListComponent } from './list/list.component';
 
 @NgModule({
-  declarations: [
-    NewsComponent
-  ],
-  imports: [
-    CommonModule
-  ]
+  declarations: [NewsComponent, ListComponent],
+  imports: [CommonModule],
+  exports: [NewsComponent, ListComponent],
 })
-export class ComponentsModule { }
+export class ComponentsModule {}

src/app/components/list/list.component.html

@@ -0,0 +1 @@
+<p>list works!</p>

src/app/components/list/list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/list/list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/news/news.component.html

@@ -1 +1 @@
-<p>news works!</p>
+<p>{{ msg }}</p>

src/app/components/news/news.component.ts

@@ -1,15 +1,25 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 16:59:15
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 10:56:36
+ */
+
 import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-news',
   templateUrl: './news.component.html',
-  styleUrls: ['./news.component.scss']
+  styleUrls: ['./news.component.scss'],
 })
 export class NewsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
+  public msg: string = '我是新闻模块';
+  constructor() {
+    console.log(this.msg);
+    this.msg = '我是改变后msg的值';
+    console.log(this.msg);
   }
-
+  ngOnInit(): void {}
 }

src/app/core/core.module.ts

@@ -4,15 +4,16 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 16:48:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-03 17:10:50
+ * @LastEditTime: 2022-03-04 10:29:19
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PagesModule } from '../pages/pages.module';
-// import { }
+import { ComponentsModule } from '../components/components.module';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, PagesModule],
+  imports: [CommonModule, PagesModule, ComponentsModule],
+  exports: [PagesModule, ComponentsModule],
 })
 export class CoreModule {}

src/app/pages/home/components/body/body.component.html

@@ -1 +1,23 @@
-<p>body works!</p>
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:07:23
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 11:30:17
+-->
+<p>body {{ content }}</p>
+<!-- 渲染html标签 -->
+<span [innerHTML]="content"></span>
+<!-- 进行简单计算 -->
+<span>1+2 = {{ 1 + 2 }}</span>
+<!-- 使用数据 -->
+<hr />
+<div>
+  <head>
+    开始进行数组循环渲染
+  </head>
+  <ul>
+    <li *ngFor="let item of arrList">{{ item }}</li>
+  </ul>
+</div>

src/app/pages/home/components/body/body.component.ts

@@ -1,15 +1,21 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:07:23
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 11:31:45
+ */
 import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-body',
   templateUrl: './body.component.html',
-  styleUrls: ['./body.component.scss']
+  styleUrls: ['./body.component.scss'],
 })
 export class BodyComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  public content = '<h2>我是一个H2标签</h2>';
+  public arrList: Array<Number> = [1111, 222, 333, 444, 555];
+  constructor() {}
+  ngOnInit(): void {}
 }

src/app/pages/home/components/head/head.component.html

@@ -1 +1,10 @@
-<p>head works!</p>
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:07:14
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 11:04:54
+-->
+<p>{{ userName }}{{ title }}</p>
+<p [title]="userName">我是一个p标签</p>

src/app/pages/home/components/head/head.component.ts

@@ -1,15 +1,29 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:07:14
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 10:23:02
+ */
 import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-head',
   templateUrl: './head.component.html',
-  styleUrls: ['./head.component.scss']
+  styleUrls: ['./head.component.scss'],
 })
 export class HeadComponent implements OnInit {
+  public title = '我是头部组件';
+  public userName: string = '张三';
+  private age: number = 12;
+  protected school: string = 'xx中学';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  public userInfo: object = {
+    userName: '李四',
+    age: 20,
+  };
+  constructor() {}
 
+  ngOnInit(): void {}
 }

src/app/pages/home/home.component.html

@@ -4,8 +4,10 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-03 17:11:33
+ * @LastEditTime: 2022-03-04 10:53:57
 -->
 <p>home works!</p>
 <app-head></app-head>
+<app-news></app-news>
+<app-list></app-list>
 <app-body></app-body>

src/app/pages/home/home.module.ts

@@ -1,11 +1,20 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:06:01
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 11:01:41
+ */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HomeComponent } from './home.component';
 import { HeadComponent } from './components/head/head.component';
 import { BodyComponent } from './components/body/body.component';
-
+import { ComponentsModule } from 'src/app/components/components.module';
 @NgModule({
   declarations: [HomeComponent, HeadComponent, BodyComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, ComponentsModule],
+  // exports: [HomeComponent, HeadComponent, BodyComponent],
 })
 export class HomeModule {}

src/app/pages/pages.module.ts

@@ -4,13 +4,15 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:03:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-03 17:09:57
+ * @LastEditTime: 2022-03-04 11:32:51
  */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HomeModule } from './home/home.module';
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { HomeModule } from "./home/home.module";
+import { UserModule } from "./user/user.module";
 @NgModule({
   declarations: [],
-  imports: [CommonModule, HomeModule],
+  imports: [CommonModule, HomeModule, UserModule],
+  // exports: [CommonModule, HomeModule, UserModule],
 })
 export class PagesModule {}

src/app/pages/user/components/info/info.component.html

@@ -0,0 +1 @@
+<p>info works!</p>

src/app/pages/user/components/info/info.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InfoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/user/components/info/info.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.scss']
+})
+export class InfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/user/components/mine/mine.component.html

@@ -0,0 +1 @@
+<p>mine works!</p>

src/app/pages/user/components/mine/mine.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MineComponent } from './mine.component';
+
+describe('MineComponent', () => {
+  let component: MineComponent;
+  let fixture: ComponentFixture<MineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MineComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/user/components/mine/mine.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mine',
+  templateUrl: './mine.component.html',
+  styleUrls: ['./mine.component.scss']
+})
+export class MineComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/user/user.component.html

@@ -0,0 +1,11 @@
+<!--
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-04 10:45:56
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 10:48:52
+-->
+<p>user works!</p>
+<app-info></app-info>
+<app-mine></app-mine>

src/app/pages/user/user.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+  let component: UserComponent;
+  let fixture: ComponentFixture<UserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/user/user.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './user.component.html',
+  styleUrls: ['./user.component.scss']
+})
+export class UserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/user/user.module.ts

@@ -0,0 +1,20 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-04 10:42:33
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-04 11:02:36
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InfoComponent } from './components/info/info.component';
+import { MineComponent } from './components/mine/mine.component';
+import { UserComponent } from './user.component';
+
+@NgModule({
+  declarations: [InfoComponent, MineComponent, UserComponent],
+  imports: [CommonModule],
+  // exports: [InfoComponent, MineComponent, UserComponent],
+})
+export class UserModule {}