Skip to content

ng-demo
ng-demo

sonicwater / ng-demo

通知 48
Star 0
Fork 1
ng-demo
ng-demo

体验新版 GitCode，发现更多精彩内容 >>

提交 b7c3134b 编写于 作者: sonicwater's avatar sonicwater 🎮
浏览文件
操作

create

上级 ad00da0b
展开全部 隐藏空白更改
内联 并排
Showing with 499 addition and 530 deletion
angular.json
浏览文件 @ b7c3134b
......@@ -28,10 +28,17 @@
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"src/styles.sass"
// "src/theme.less",
"src/styles.scss",
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
"scripts": []
},
......
package-lock.json
浏览文件 @ b7c3134b
......@@ -244,6 +244,23 @@
"tslib": "^2.0.0"
}
},
"@angular/cdk": {
"version": "11.2.12",
"resolved": "https://registry.nlark.com/@angular/cdk/download/@angular/cdk-11.2.12.tgz",
"integrity": "sha1-wcnI1KV2N0X+LTJPwlPyIbnCsbM=",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.1.tgz",
"integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=",
"optional": true
}
}
},
"@angular/cli": {
"version": "11.2.12",
"resolved": "https://registry.nlark.com/@angular/cli/download/@angular/cli-11.2.12.tgz",
......@@ -458,6 +475,23 @@
"tslib": "^2.0.0"
}
},
"@ant-design/colors": {
"version": "5.1.1",
"resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-5.1.1.tgz",
"integrity": "sha1-gAshhrHifmZDLmfQPtlq8+IdiUA=",
"requires": {
"@ctrl/tinycolor": "^3.3.1"
}
},
"@ant-design/icons-angular": {
"version": "11.0.1",
"resolved": "https://registry.npm.taobao.org/@ant-design/icons-angular/download/@ant-design/icons-angular-11.0.1.tgz",
"integrity": "sha1-j/MTHz2bSyX9KMZMSpvf422lSUI=",
"requires": {
"@ant-design/colors": "^5.0.0",
"tslib": "^2.0.0"
}
},
"@babel/code-frame": {
"version": "7.12.13",
"resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.12.13.tgz?cache=0&sync_timestamp=1612314635887&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.12.13.tgz",
......@@ -1568,6 +1602,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@ctrl/tinycolor": {
"version": "3.4.0",
"resolved": "https://registry.npm.taobao.org/@ctrl/tinycolor/download/@ctrl/tinycolor-3.4.0.tgz",
"integrity": "sha1-w8WuVDyJfKqcKmhjC+01W+X5mQ8="
},
"@discoveryjs/json-ext": {
"version": "0.5.2",
"resolved": "https://registry.npm.taobao.org/@discoveryjs/json-ext/download/@discoveryjs/json-ext-0.5.2.tgz",
......@@ -4177,6 +4216,11 @@
"assert-plus": "^1.0.0"
}
},
"date-fns": {
"version": "2.21.3",
"resolved": "https://registry.nlark.com/date-fns/download/date-fns-2.21.3.tgz?cache=0&sync_timestamp=1620446248863&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdate-fns%2Fdownload%2Fdate-fns-2.21.3.tgz",
"integrity": "sha1-j19oidepa7zB8OpQI5s5eoM1f5s="
},
"date-format": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/date-format/download/date-format-3.0.0.tgz",
......@@ -7990,6 +8034,18 @@
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
"dev": true
},
"ng-zorro-antd": {
"version": "11.4.1",
"resolved": "https://registry.nlark.com/ng-zorro-antd/download/ng-zorro-antd-11.4.1.tgz",
"integrity": "sha1-ukxWTs48KgIFyIQdzugovktt6C0=",
"requires": {
"@angular/cdk": "^11.0.2",
"@ant-design/icons-angular": "^11.0.1",
"date-fns": "^2.10.0",
"resize-observer-polyfill": "^1.5.1",
"tslib": "^2.0.0"
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz?cache=0&sync_timestamp=1614510498841&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnice-try%2Fdownload%2Fnice-try-1.0.5.tgz",
......@@ -9990,6 +10046,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz",
......
package.json
浏览文件 @ b7c3134b
......@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start": "ng serve --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
......@@ -19,6 +19,7 @@
"@angular/platform-browser": "~11.2.13",
"@angular/platform-browser-dynamic": "~11.2.13",
"@angular/router": "~11.2.13",
"ng-zorro-antd": "^11.4.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
......
src/app/app-routing.module.ts
浏览文件 @ b7c3134b
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
import { LoginComponent } from './components/login/login.component';
import { ProductsComponent } from './components/products/products.component';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'products', component: ProductsComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
......
src/app/app.component.html
浏览文件 @ b7c3134b
此差异已折叠。
src/app/app.component.ts
浏览文件 @ b7c3134b
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'ng-demo';
JSON = JSON;
public title = {
msg : 'app-component'
};
onSave(str:string) {
console.log(str);
}
onSubmit(obj:any):Boolean{
console.log(obj);
return false;
}
}
src/app/app.module.ts
浏览文件 @ b7c3134b
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginModule } from './components/login/login.module';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
registerLocaleData(zh);
@NgModule({
declarations: [
......@@ -10,9 +20,14 @@ import { AppComponent } from './app.component';
],
imports: [
BrowserModule,
AppRoutingModule
AppRoutingModule,
LoginModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
ReactiveFormsModule
],
providers: [],
providers: [{ provide: NZ_I18N, useValue: zh_CN }],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/components/home/home.component.html 0 → 100644
浏览文件 @ b7c3134b
<div class="container">
products
</div>
src/app/components/home/home.component.ts 0 → 100644
浏览文件 @ b7c3134b
import { Component } from '@angular/core';
@Component({
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss']
})
export class ProductsComponent {
public title = {
msg : 'products-component'
};
}
src/app/components/login/login.component.html 0 → 100644
浏览文件 @ b7c3134b
<div class="container">
<div class="row row-center" >
<div class="col-center">
<div id="loginui" class="login-layout">
<h3 class="login-title">登录中心</h3>
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="4">用户名</nz-form-label>
<nz-form-control nzHasFeedback [nzSpan]="20">
<input nz-input name="required" required />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">密&nbsp;&nbsp;&nbsp;&nbsp;码</nz-form-label>
<nz-form-control nzHasFeedback [nzSpan]="20">
<input nz-input name="maxlength" required />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="20" [nzOffset]="4">
<button nz-button nzType="primary">登录</button>
</nz-form-control>
</nz-form-item>
</form>
<!-- <form name="form" class="row" novalidate>
<div class="col-md-12">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<input
type="text"
class="form-control"
id="validationCustomUsername"
ng-model="entity.username"
required
/>
<div class="invalid-feedback">
请输入用户名
</div>
</div>
</div>
<div class="col-12">
<button
class="btn btn-primary"
type="button"
ng-disabled="form.$invalid"
(click)="onSave('this')"
>登录</button>
</div>
</form> -->
<!-- <ul>
<li *ngFor="let product of products; index as productId">
<a [title]="product.name" (click)="jump(product.id)">
{{ product.name }}
</a>
</li>
</ul> -->
</div>
</div>
</div>
</div>
<!-- <div class="toolbar" role="banner">
<form (submit)="onSubmit(this)">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
<div class="content" role="main">
{{JSON.stringify(title)}}--
<button (click)="onSave('save1')" type="button" class="btn btn-primary">test log</button>
</div> -->
src/app/components/login/login.component.scss 0 → 100644
浏览文件 @ b7c3134b
.row-center {
text-align:center;
height: 100vh;
position: relative;
.col-center {
text-align:left;
.login-layout {
background-color: #f1f1f1;
padding: 20px;
border-radius: 4px;
border-color: #00a3ff;
border-width: 2px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
.login-title {
text-align: center;
color: rgb(12, 81, 160);
font-size: 24px;
}
}
}
}
\ No newline at end of file
src/app/components/login/login.component.ts 0 → 100644
浏览文件 @ b7c3134b
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent {
JSON = JSON;
public title = {
msg : 'login-component'
};
public products = [
{
id:1,
name:'foo'
},
{
id:2,
name:'bar'
}
]
public entity = {
username:'',
password:''
}
onSave(str:string) {
console.log(str);
}
onSubmit(obj:any):Boolean{
console.log(obj);
obj.classList.add('was-validated')
return false;
}
jump(id:number){
console.log(id);
}
}
src/app/components/login/login.module.ts 0 → 100644
浏览文件 @ b7c3134b
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LoginComponent } from './login.component';
import { NgZorroAntdModule } from '../ng-zorro-antd.module';
@NgModule({
declarations: [
LoginComponent
],
imports: [
BrowserModule,
NgZorroAntdModule
],
providers: [],
bootstrap: [
LoginComponent
]
})
export class LoginModule { }
src/app/components/ng-zorro-antd.module.ts 0 → 100644
浏览文件 @ b7c3134b
import { NgModule } from '@angular/core';
import { NzAffixModule } from 'ng-zorro-antd/affix';
import { NzAlertModule } from 'ng-zorro-antd/alert';
import { NzAnchorModule } from 'ng-zorro-antd/anchor';
import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
import { NzBackTopModule } from 'ng-zorro-antd/back-top';
import { NzBadgeModule } from 'ng-zorro-antd/badge';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCalendarModule } from 'ng-zorro-antd/calendar';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzCommentModule } from 'ng-zorro-antd/comment';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
import { NzWaveModule } from 'ng-zorro-antd/core/wave';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzListModule } from 'ng-zorro-antd/list';
import { NzMentionModule } from 'ng-zorro-antd/mention';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzNotificationModule } from 'ng-zorro-antd/notification';
import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzRateModule } from 'ng-zorro-antd/rate';
import { NzResultModule } from 'ng-zorro-antd/result';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
import { NzSliderModule } from 'ng-zorro-antd/slider';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzStatisticModule } from 'ng-zorro-antd/statistic';
import { NzStepsModule } from 'ng-zorro-antd/steps';
import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
import { NzTimelineModule } from 'ng-zorro-antd/timeline';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzTransferModule } from 'ng-zorro-antd/transfer';
import { NzTreeModule } from 'ng-zorro-antd/tree';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { NzTypographyModule } from 'ng-zorro-antd/typography';
import { NzUploadModule } from 'ng-zorro-antd/upload';
import { NzResizableModule } from 'ng-zorro-antd/resizable';
@NgModule({
exports: [
NzAffixModule,
NzAlertModule,
NzAnchorModule,
NzAutocompleteModule,
NzAvatarModule,
NzBackTopModule,
NzBadgeModule,
NzButtonModule,
NzBreadCrumbModule,
NzCalendarModule,
NzCardModule,
NzCarouselModule,
NzCascaderModule,
NzCheckboxModule,
NzCollapseModule,
NzCommentModule,
NzDatePickerModule,
NzDescriptionsModule,
NzDividerModule,
NzDrawerModule,
NzDropDownModule,
NzEmptyModule,
NzFormModule,
NzGridModule,
NzI18nModule,
NzIconModule,
NzInputModule,
NzInputNumberModule,
NzLayoutModule,
NzListModule,
NzMentionModule,
NzMenuModule,
NzMessageModule,
NzModalModule,
NzNoAnimationModule,
NzNotificationModule,
NzPageHeaderModule,
NzPaginationModule,
NzPopconfirmModule,
NzPopoverModule,
NzProgressModule,
NzRadioModule,
NzRateModule,
NzResultModule,
NzSelectModule,
NzSkeletonModule,
NzSliderModule,
NzSpinModule,
NzStatisticModule,
NzStepsModule,
NzSwitchModule,
NzTableModule,
NzTabsModule,
NzTagModule,
NzTimePickerModule,
NzTimelineModule,
NzToolTipModule,
NzTransButtonModule,
NzTransferModule,
NzTreeModule,
NzTreeSelectModule,
NzTypographyModule,
NzUploadModule,
NzWaveModule,
NzResizableModule
]
})
export class NgZorroAntdModule {
}
src/styles.sass 已删除 100644 → 0
浏览文件 @ ad00da0b
/* You can add global styles to this file, and also import other style files */
src/styles.scss 0 → 100644
浏览文件 @ b7c3134b
// @import "~ng-zorro-antd/ng-zorro-antd.min.css";
src/theme.less 0 → 100644
浏览文件 @ b7c3134b
// Custom Theming for NG-ZORRO
// For more information: https://ng.ant.design/docs/customize-theme/en
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
// Override less variables to here
// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
// @primary-color: #1890ff;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或