commit
This commit is contained in:
28
README.md
28
README.md
@@ -1,27 +1 @@
|
|||||||
# LearnNg
|
# 自己搭建的一个基于 Angular13 的脚手架
|
||||||
|
|
||||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.3.
|
|
||||||
|
|
||||||
## Development server
|
|
||||||
|
|
||||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
|
||||||
|
|
||||||
## Code scaffolding
|
|
||||||
|
|
||||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
|
||||||
|
|
||||||
## Build
|
|
||||||
|
|
||||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
||||||
|
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
||||||
|
|
||||||
## Running end-to-end tests
|
|
||||||
|
|
||||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
|
||||||
|
|
||||||
## Further help
|
|
||||||
|
|
||||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
|
||||||
|
|||||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -16,6 +16,7 @@
|
|||||||
"@angular/platform-browser": "~13.0.0",
|
"@angular/platform-browser": "~13.0.0",
|
||||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||||
"@angular/router": "~13.0.0",
|
"@angular/router": "~13.0.0",
|
||||||
|
"normalize-scss": "^7.0.1",
|
||||||
"rxjs": "~7.4.0",
|
"rxjs": "~7.4.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.11.4"
|
"zone.js": "~0.11.4"
|
||||||
@@ -7661,6 +7662,11 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/normalize-scss": {
|
||||||
|
"version": "7.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/normalize-scss/-/normalize-scss-7.0.1.tgz",
|
||||||
|
"integrity": "sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A=="
|
||||||
|
},
|
||||||
"node_modules/npm-bundled": {
|
"node_modules/npm-bundled": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/npm-bundled/-/npm-bundled-1.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/npm-bundled/-/npm-bundled-1.1.2.tgz",
|
||||||
@@ -17853,6 +17859,11 @@
|
|||||||
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
|
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"normalize-scss": {
|
||||||
|
"version": "7.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/normalize-scss/-/normalize-scss-7.0.1.tgz",
|
||||||
|
"integrity": "sha512-qj16bWnYs+9/ac29IgGjySg4R5qQTp1lXfm7ApFOZNVBYFY8RZ3f8+XQNDDLHeDtI3Ba7Jj4+LuPgz9v/fne2A=="
|
||||||
|
},
|
||||||
"npm-bundled": {
|
"npm-bundled": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmmirror.com/npm-bundled/-/npm-bundled-1.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/npm-bundled/-/npm-bundled-1.1.2.tgz",
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "ng serve",
|
"start": "ng serve --open",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development",
|
||||||
"test": "ng test"
|
"test": "ng test"
|
||||||
@@ -18,6 +18,7 @@
|
|||||||
"@angular/platform-browser": "~13.0.0",
|
"@angular/platform-browser": "~13.0.0",
|
||||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||||
"@angular/router": "~13.0.0",
|
"@angular/router": "~13.0.0",
|
||||||
|
"normalize-scss": "^7.0.1",
|
||||||
"rxjs": "~7.4.0",
|
"rxjs": "~7.4.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.11.4"
|
"zone.js": "~0.11.4"
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 16:21:23
|
* @Date: 2022-03-03 16:21:23
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:00:55
|
* @LastEditTime: 2022-03-04 15:50:32
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- 路由配置后显示的区域 -->
|
<!-- 路由配置后显示的区域 -->
|
||||||
|
|||||||
@@ -1,8 +1 @@
|
|||||||
* {
|
@import "../../node_modules/normalize-scss/sass/normalize";
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.w {
|
|
||||||
width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,18 +4,18 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 16:21:23
|
* @Date: 2022-03-03 16:21:23
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:09:24
|
* @LastEditTime: 2022-03-04 15:49:55
|
||||||
*/
|
*/
|
||||||
// 引入核心模块
|
// 引入核心模块
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from "@angular/core";
|
||||||
// 引入浏览器解析模块
|
// 引入浏览器解析模块
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
// 引入路由模块
|
// 引入路由模块
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from "./app-routing.module";
|
||||||
// 引入根组件
|
// 引入根组件
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from "./app.component";
|
||||||
// @ngModule装饰器 @ngModule接受一个元数据对象 告诉angular如何编译和启动对象\
|
// @ngModule装饰器 @ngModule接受一个元数据对象 告诉angular如何编译和启动对象\
|
||||||
import { CoreModule } from './core/core.module';
|
import { CoreModule } from "./core/core.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AppComponent], //配置项目运行的组件
|
declarations: [AppComponent], //配置项目运行的组件
|
||||||
|
|||||||
@@ -4,12 +4,12 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 16:58:41
|
* @Date: 2022-03-03 16:58:41
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:54:07
|
* @LastEditTime: 2022-03-04 15:44:31
|
||||||
*/
|
*/
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from "@angular/core";
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from "@angular/common";
|
||||||
import { NewsComponent } from './news/news.component';
|
import { NewsComponent } from "./news/news.component";
|
||||||
import { ListComponent } from './list/list.component';
|
import { ListComponent } from "./list/list.component";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [NewsComponent, ListComponent],
|
declarations: [NewsComponent, ListComponent],
|
||||||
|
|||||||
@@ -1 +1,18 @@
|
|||||||
<p>list works!</p>
|
<!--
|
||||||
|
* @Description: {{ByRuin}}
|
||||||
|
* @Version: 2.0
|
||||||
|
* @Author: Ruin 🍭
|
||||||
|
* @Date: 2022-03-04 10:47:32
|
||||||
|
* @LastEditors: 刘引
|
||||||
|
* @LastEditTime: 2022-03-04 14:21:15
|
||||||
|
-->
|
||||||
|
<div class="root">
|
||||||
|
<header>
|
||||||
|
<h2>管道的相关用法</h2>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<div class="time">
|
||||||
|
{{ today | date: "yyyy-MM-dd HH:mm:ss" }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,24 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
/*
|
||||||
|
* @Description: {{ByRuin}}
|
||||||
|
* @Version: 2.0
|
||||||
|
* @Author: Ruin 🍭
|
||||||
|
* @Date: 2022-03-04 10:47:32
|
||||||
|
* @LastEditors: 刘引
|
||||||
|
* @LastEditTime: 2022-03-04 14:39:52
|
||||||
|
*/
|
||||||
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-list',
|
selector: "app-list",
|
||||||
templateUrl: './list.component.html',
|
templateUrl: "./list.component.html",
|
||||||
styleUrls: ['./list.component.scss']
|
styleUrls: ["./list.component.scss"],
|
||||||
})
|
})
|
||||||
export class ListComponent implements OnInit {
|
export class ListComponent implements OnInit {
|
||||||
|
public today: any = new Date();
|
||||||
|
|
||||||
constructor() { }
|
constructor() {
|
||||||
|
console.log(this.today);
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +1,27 @@
|
|||||||
|
<!--
|
||||||
|
* @Description: {{ByRuin}}
|
||||||
|
* @Version: 2.0
|
||||||
|
* @Author: Ruin 🍭
|
||||||
|
* @Date: 2022-03-03 16:59:15
|
||||||
|
* @LastEditors: 刘引
|
||||||
|
* @LastEditTime: 2022-03-04 15:34:24
|
||||||
|
-->
|
||||||
|
<div class="root">
|
||||||
|
<div class="w">
|
||||||
|
<div class="container">
|
||||||
|
<h2>事件的相关用法</h2>
|
||||||
|
<div class="demo">
|
||||||
|
<button (click)="getNum()">执行事件</button>
|
||||||
|
<button (click)="getData()">获取数据</button>
|
||||||
|
<button (click)="setData()">改变数据</button>
|
||||||
|
<button (click)="changeDom($event)">更高按钮颜色</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo2">
|
||||||
|
<!-- 传递input输入框中的值 -->
|
||||||
|
<input (keydown)="pressKeyboard($event)" type="text" />
|
||||||
|
</div>
|
||||||
<p>{{ msg }}</p>
|
<p>{{ msg }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -4,22 +4,44 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 16:59:15
|
* @Date: 2022-03-03 16:59:15
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:56:36
|
* @LastEditTime: 2022-03-04 14:58:48
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-news',
|
selector: "app-news",
|
||||||
templateUrl: './news.component.html',
|
templateUrl: "./news.component.html",
|
||||||
styleUrls: ['./news.component.scss'],
|
styleUrls: ["./news.component.scss"],
|
||||||
})
|
})
|
||||||
export class NewsComponent implements OnInit {
|
export class NewsComponent implements OnInit {
|
||||||
public msg: string = '我是新闻模块';
|
public msg: string = "我是新闻模块";
|
||||||
constructor() {
|
constructor() {}
|
||||||
console.log(this.msg);
|
|
||||||
this.msg = '我是改变后msg的值';
|
|
||||||
console.log(this.msg);
|
|
||||||
}
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
getNum() {
|
||||||
|
alert("执行方法");
|
||||||
|
}
|
||||||
|
getData() {
|
||||||
|
console.log(this.msg);
|
||||||
|
}
|
||||||
|
setData() {
|
||||||
|
this.msg = "我是再次改变的msg";
|
||||||
|
}
|
||||||
|
pressKeyboard(e: any) {
|
||||||
|
// keyCode为13代表回车
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
// e.target.value 代表获取dom元素中input输入框中的值
|
||||||
|
console.log("按下了回车", e.target.value);
|
||||||
|
} else {
|
||||||
|
//获取当前输入的值
|
||||||
|
console.log(e.code);
|
||||||
|
// 获取按键的代号
|
||||||
|
console.log(e.keyCode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
changeDom(e: any): any {
|
||||||
|
// 操作dom更改字体颜色
|
||||||
|
e.target.style.color = "red";
|
||||||
|
console.log(e.target.style);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,16 +4,14 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 16:48:51
|
* @Date: 2022-03-03 16:48:51
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:29:19
|
* @LastEditTime: 2022-03-04 15:50:01
|
||||||
*/
|
*/
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from "@angular/core";
|
||||||
import { CommonModule } from '@angular/common';
|
import { PagesModule } from "../pages/pages.module";
|
||||||
import { PagesModule } from '../pages/pages.module';
|
import { ComponentsModule } from "../components/components.module";
|
||||||
import { ComponentsModule } from '../components/components.module';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [],
|
declarations: [],
|
||||||
imports: [CommonModule, PagesModule, ComponentsModule],
|
imports: [PagesModule, ComponentsModule],
|
||||||
exports: [PagesModule, ComponentsModule],
|
exports: [PagesModule, ComponentsModule],
|
||||||
})
|
})
|
||||||
export class CoreModule {}
|
export class CoreModule {}
|
||||||
|
|||||||
@@ -4,8 +4,9 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:07:23
|
* @Date: 2022-03-03 17:07:23
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:30:17
|
* @LastEditTime: 2022-03-04 13:35:29
|
||||||
-->
|
-->
|
||||||
|
<div class="root">
|
||||||
<p>body {{ content }}</p>
|
<p>body {{ content }}</p>
|
||||||
<!-- 渲染html标签 -->
|
<!-- 渲染html标签 -->
|
||||||
<span [innerHTML]="content"></span>
|
<span [innerHTML]="content"></span>
|
||||||
@@ -21,3 +22,14 @@
|
|||||||
<li *ngFor="let item of arrList">{{ item }}</li>
|
<li *ngFor="let item of arrList">{{ item }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<hr />
|
||||||
|
<h5>引入图片</h5>
|
||||||
|
<div>
|
||||||
|
<span>引入本地图片</span>
|
||||||
|
<img src="assets/images/home/cat.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>引入网络图片</span>
|
||||||
|
<img [src]="picUrl" alt="无法显示" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
.root {
|
||||||
|
div img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -4,18 +4,20 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:07:23
|
* @Date: 2022-03-03 17:07:23
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:31:45
|
* @LastEditTime: 2022-03-04 13:34:58
|
||||||
*/
|
*/
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-body',
|
selector: "app-body",
|
||||||
templateUrl: './body.component.html',
|
templateUrl: "./body.component.html",
|
||||||
styleUrls: ['./body.component.scss'],
|
styleUrls: ["./body.component.scss"],
|
||||||
})
|
})
|
||||||
export class BodyComponent implements OnInit {
|
export class BodyComponent implements OnInit {
|
||||||
public content = '<h2>我是一个H2标签</h2>';
|
public content = "<h2>我是一个H2标签</h2>";
|
||||||
public arrList: Array<Number> = [1111, 222, 333, 444, 555];
|
public arrList: Array<Number> = [1111, 222, 333, 444, 555];
|
||||||
|
public picUrl: string =
|
||||||
|
"http://img7.dl.ltimg.net/emoji/egg/5c4055492549591e51027e88?imageView2/1/w/300/h/300&sign=870d77486943cef24b9208b37ae48f07&t=6221b257";
|
||||||
constructor() {}
|
constructor() {}
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,38 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:07:14
|
* @Date: 2022-03-03 17:07:14
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:04:54
|
* @LastEditTime: 2022-03-04 14:11:19
|
||||||
-->
|
-->
|
||||||
<p>{{ userName }}{{ title }}</p>
|
<div class="root">
|
||||||
<p [title]="userName">我是一个p标签</p>
|
<div class="demo1">
|
||||||
|
<h2>1.循环数据显示数据的索引</h2>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let item of newsList; let key = index">
|
||||||
|
<span [class]="key === 1 ? 'red' : ''">
|
||||||
|
{{ key + 1 }} {{ item.title }}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo2">
|
||||||
|
<h2>2.条件判断语句</h2>
|
||||||
|
<img src="assets/images/home/cat.png" alt="" *ngIf="flag == true" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ng-switch">
|
||||||
|
<h2>3.switch条件判断</h2>
|
||||||
|
<span [ngSwitch]="orderStatus">
|
||||||
|
<p *ngSwitchCase="1">表示已经支付</p>
|
||||||
|
<p *ngSwitchCase="2">已经支付并且确认订单</p>
|
||||||
|
<p *ngSwitchCase="3">表示已经发货</p>
|
||||||
|
<p *ngSwitchCase="4">已经没有货了</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo4">
|
||||||
|
<h2>3.[*ngClass] [*ngStyle]</h2>
|
||||||
|
<p [ngClass]="{ red: flag, blue: !flag }">[*ngClass演示]</p>
|
||||||
|
<p [ngStyle]="{ color: red, fontSize: '12px' }">[*ngStyle演示]</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
.root {
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -4,25 +4,25 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:07:14
|
* @Date: 2022-03-03 17:07:14
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:23:02
|
* @LastEditTime: 2022-03-04 14:10:42
|
||||||
*/
|
*/
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-head',
|
selector: "app-head",
|
||||||
templateUrl: './head.component.html',
|
templateUrl: "./head.component.html",
|
||||||
styleUrls: ['./head.component.scss'],
|
styleUrls: ["./head.component.scss"],
|
||||||
})
|
})
|
||||||
export class HeadComponent implements OnInit {
|
export class HeadComponent implements OnInit {
|
||||||
public title = '我是头部组件';
|
public newsList: Array<any> = [
|
||||||
public userName: string = '张三';
|
{ title: "我是新闻1" },
|
||||||
private age: number = 12;
|
{ title: "我是新闻2" },
|
||||||
protected school: string = 'xx中学';
|
{ title: "我是新闻3" },
|
||||||
|
];
|
||||||
public userInfo: object = {
|
public flag: boolean = true;
|
||||||
userName: '李四',
|
//1表示已经支付 2并且确认订单 3表示已经发货 4表示已经收货
|
||||||
age: 20,
|
public orderStatus: number = 1;
|
||||||
};
|
public red: string = "blue";
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
|||||||
@@ -4,10 +4,24 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:06:15
|
* @Date: 2022-03-03 17:06:15
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:53:57
|
* @LastEditTime: 2022-03-04 15:53:16
|
||||||
-->
|
-->
|
||||||
<p>home works!</p>
|
<p>home works!</p>
|
||||||
<app-head></app-head>
|
<!-- <app-news></app-news> -->
|
||||||
<app-news></app-news>
|
<!-- <app-head></app-head> -->
|
||||||
<app-list></app-list>
|
<!-- <app-news></app-news> -->
|
||||||
<app-body></app-body>
|
<!-- <app-list></app-list> -->
|
||||||
|
<!-- <app-body></app-body> -->
|
||||||
|
<div class="root">
|
||||||
|
<div class="container">
|
||||||
|
<div class="w">
|
||||||
|
<h2>双向数据绑定用法(只适用于表单) MVVM</h2>
|
||||||
|
<input type="text" [(ngModel)]="textContent" />
|
||||||
|
<span>{{ textContent }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="changeKey">
|
||||||
|
<button (click)="changeKeyword()">改值</button>
|
||||||
|
<button (click)="getKeyword()">获取值</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,19 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-home',
|
selector: "app-home",
|
||||||
templateUrl: './home.component.html',
|
templateUrl: "./home.component.html",
|
||||||
styleUrls: ['./home.component.scss']
|
styleUrls: ["./home.component.scss"],
|
||||||
})
|
})
|
||||||
export class HomeComponent implements OnInit {
|
export class HomeComponent implements OnInit {
|
||||||
|
public textContent: any;
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {}
|
||||||
|
changeKeyword() {
|
||||||
|
this.textContent = "改变keywords的值";
|
||||||
|
}
|
||||||
|
getKeyword() {
|
||||||
|
console.log(this.textContent);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,17 +4,20 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:06:01
|
* @Date: 2022-03-03 17:06:01
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:01:41
|
* @LastEditTime: 2022-03-04 15:42:19
|
||||||
*/
|
*/
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from "@angular/core";
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from "@angular/common";
|
||||||
import { HomeComponent } from './home.component';
|
import { HomeComponent } from "./home.component";
|
||||||
import { HeadComponent } from './components/head/head.component';
|
import { HeadComponent } from "./components/head/head.component";
|
||||||
import { BodyComponent } from './components/body/body.component';
|
import { BodyComponent } from "./components/body/body.component";
|
||||||
import { ComponentsModule } from 'src/app/components/components.module';
|
import { ComponentsModule } from "src/app/components/components.module";
|
||||||
|
// 引入双向数据绑定
|
||||||
|
import { FormsModule } from "@angular/forms";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [HomeComponent, HeadComponent, BodyComponent],
|
declarations: [HomeComponent, HeadComponent, BodyComponent],
|
||||||
imports: [CommonModule, ComponentsModule],
|
imports: [CommonModule, ComponentsModule, FormsModule],
|
||||||
// exports: [HomeComponent, HeadComponent, BodyComponent],
|
exports: [HomeComponent, HeadComponent, BodyComponent],
|
||||||
})
|
})
|
||||||
export class HomeModule {}
|
export class HomeModule {}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-03 17:03:51
|
* @Date: 2022-03-03 17:03:51
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:32:51
|
* @LastEditTime: 2022-03-04 15:46:33
|
||||||
*/
|
*/
|
||||||
import { NgModule } from "@angular/core";
|
import { NgModule } from "@angular/core";
|
||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
@@ -13,6 +13,6 @@ import { UserModule } from "./user/user.module";
|
|||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [],
|
declarations: [],
|
||||||
imports: [CommonModule, HomeModule, UserModule],
|
imports: [CommonModule, HomeModule, UserModule],
|
||||||
// exports: [CommonModule, HomeModule, UserModule],
|
exports: [CommonModule, HomeModule, UserModule],
|
||||||
})
|
})
|
||||||
export class PagesModule {}
|
export class PagesModule {}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-04 10:45:56
|
* @Date: 2022-03-04 10:45:56
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 10:48:52
|
* @LastEditTime: 2022-03-04 15:36:47
|
||||||
-->
|
-->
|
||||||
<p>user works!</p>
|
<p>user works!</p>
|
||||||
<app-info></app-info>
|
<app-info></app-info>
|
||||||
|
|||||||
@@ -4,17 +4,17 @@
|
|||||||
* @Author: Ruin 🍭
|
* @Author: Ruin 🍭
|
||||||
* @Date: 2022-03-04 10:42:33
|
* @Date: 2022-03-04 10:42:33
|
||||||
* @LastEditors: 刘引
|
* @LastEditors: 刘引
|
||||||
* @LastEditTime: 2022-03-04 11:02:36
|
* @LastEditTime: 2022-03-04 15:47:19
|
||||||
*/
|
*/
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from "@angular/core";
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from "@angular/common";
|
||||||
import { InfoComponent } from './components/info/info.component';
|
import { InfoComponent } from "./components/info/info.component";
|
||||||
import { MineComponent } from './components/mine/mine.component';
|
import { MineComponent } from "./components/mine/mine.component";
|
||||||
import { UserComponent } from './user.component';
|
import { UserComponent } from "./user.component";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [InfoComponent, MineComponent, UserComponent],
|
declarations: [InfoComponent, MineComponent, UserComponent],
|
||||||
imports: [CommonModule],
|
imports: [CommonModule],
|
||||||
// exports: [InfoComponent, MineComponent, UserComponent],
|
exports: [InfoComponent, MineComponent, UserComponent],
|
||||||
})
|
})
|
||||||
export class UserModule {}
|
export class UserModule {}
|
||||||
|
|||||||
BIN
src/assets/images/home/cat.png
Normal file
BIN
src/assets/images/home/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@@ -1,11 +1,19 @@
|
|||||||
<!doctype html>
|
<!--
|
||||||
|
* @Description: {{ByRuin}}
|
||||||
|
* @Version: 2.0
|
||||||
|
* @Author: Ruin 🍭
|
||||||
|
* @Date: 2022-03-03 16:21:23
|
||||||
|
* @LastEditors: 刘引
|
||||||
|
* @LastEditTime: 2022-03-04 12:28:19
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<title>LearnNg</title>
|
<title>angular-frame</title>
|
||||||
<base href="/">
|
<base href="/" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
|||||||
Reference in New Issue
Block a user