Angular新建项目指南

一 参考资料：

https://opentiny.design/

中后台解决方案：https://opentiny.design/pro/home
https://opentiny.design/ng-pro/docs/introduction

组件库介绍文档：https://opentiny.design/tiny-ng/overview

华为云云速建站服务：https://www.huaweicloud.com/product/cloudsite/course.html

https://www.huaweicloud.com/product/cloudsite.html?utm_source=3.baidu.com&utm_medium=organic&utm_adplace=kapian

搭建个人博客网站：https://www.huaweicloud.com/zhishi/edits-15808163.html

华为云搭建网站：https://www.huaweicloud.com/special/hwcjianzhan.html

自主建站方式：https://support.huaweicloud.com/bestpractice-ecs/ecs_web_0001.html#section2

弹性公网IP说明：https://support.huaweicloud.com/productdesc-eip/eip_pro_0001.html

nodejs：http://nodejs.p2hp.com/learn/

expressJS：https://www.expressjs.com.cn/

http://127.0.0.1:3000/
https://www.expressjs.com.cn/starter/generator.html
ng generate component xxx
ng generate module xxx --route xxx --module pages.module

二 重要设置

tsconfig.json ： 

"paths": {
  "@shared/all": [
    "src/app/@shared/index.ts"
  ],
  "@images/*": [ "src/assets/images/*" ]
}

angular.json：

"outputPath": "server/public",

"styles": [
  "node_modules/@opentiny/ng/themes/styles.css", // 基础样式
  "node_modules/@opentiny/ng/themes/theme-default.css", // 主题样式
  "src/styles.less"
],

server/app.js

app.use(express.static(path.join(__dirname, 'public')));

三 目录结构

 四 核心代码

app.component.html、app.component.less、app.component.ts：

<t-pro-header></t-pro-header>

<div class="sj-container">
  <div class="sj-container-card">
    <router-outlet></router-outlet>
  </div>
</div>

.sj-container {
  position: relative;
  margin: 0px;
  background: #eef0f5;
  min-height: calc(100vh - 65px);
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 65px);
  overflow: auto;
}

.sj-container-card {
  background: #ffffff;
  margin: 15px;
  box-shadow: 0 1px 3px #02192a1a;
  border-radius: 6px;
  min-height: calc(100vh - 95px);
  box-sizing: border-box;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 15px;
  overflow: auto;
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'shaji-console';
}

 app.module.ts：

import { NgModule } from '@angular/core';
import {HttpClientModule} from "@angular/common/http";
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // TinyUI部分组件依赖angular动画，可能需要引入animations模块


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from "@shared/all";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'shangji'
  },
  {
    path: 'shangji',
    loadChildren: () =>
      import('./page/shangji/shangji.module').then(m => m.ShangjiModule),
  },
];

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

shared.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ClipboardModule } from '@angular/cdk/clipboard';
// 导入Tiny3模块
import {
  TiAccordionModule,
  TiActionmenuModule,
  TiAlertModule,
  TiAutocompleteModule,
  TiButtongroupModule,
  TiButtonModule,
  TiCheckboxModule,
  TiCollapseModule,
  TiDateModule,
  TiDateRangeModule,
  TiDatetimeModule,
  TiDatetimeRangeModule,
  TiFormfieldModule,
  TiIconModule,
  TiInputNumberModule,
  TiIntroServiceModule,
  TiIpModule,
  TiIpsectionModule,
  TiLeftmenuModule,
  TiLoadingModule,
  TiMenuModule,
  TiMessageModule,
  TiModalModule,
  TiOverflowModule,
  TiPaginationModule,
  TiProgressbarModule,
  TiPopconfirmModule,
  TiRadioModule,
  TiSearchboxModule,
  TiSelectModule,
  TiSliderModule,
  TiSpinnerModule,
  TiStepsModule,
  TiSwitchModule,
  TiTableModule,
  TiTabModule,
  TiTagsInputModule,
  TiTextareaModule,
  TiTextModule,
  TiTimeModule,
  TiTipModule,
  TiTreeModule,
  TiTreeselectModule,
  TiUploadModule,
  TiValidationModule,
  TiNavModule,
} from '@opentiny/ng';

import {
  HeaderComponent,
} from './components';

const COMPONENTS = [
  HeaderComponent,
];

// 引入Tiny3相关module
const TINY_MODULES = [
  TiButtonModule,
  TiButtongroupModule,
  TiRadioModule,
  TiCheckboxModule,
  TiSelectModule,
  TiSliderModule,
  TiSpinnerModule,
  TiSwitchModule,
  TiTreeselectModule,
  TiTextModule,
  TiTextareaModule,
  TiAutocompleteModule,
  TiSearchboxModule,
  TiIconModule,
  TiIpModule,
  TiIpsectionModule,
  TiTagsInputModule,
  TiInputNumberModule,
  TiDateModule,
  TiDateRangeModule,
  TiDatetimeModule,
  TiDatetimeRangeModule,
  TiTimeModule,
  TiValidationModule,
  TiFormfieldModule,
  TiUploadModule,
  TiMenuModule,
  TiActionmenuModule,
  TiLeftmenuModule,
  TiAccordionModule,
  TiTabModule,
  TiStepsModule,
  TiAlertModule,
  TiMessageModule,
  TiModalModule,
  TiPopconfirmModule,
  TiTipModule,
  TiOverflowModule,
  TiCollapseModule,
  TiTableModule,
  TiPaginationModule,
  TiTreeModule,
  TiProgressbarModule,
  TiIntroServiceModule,
  TiLoadingModule,
  TiNavModule,
];

@NgModule({
  declarations: [...COMPONENTS],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    ClipboardModule,
    ...TINY_MODULES,
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...TINY_MODULES,
    ...COMPONENTS,
  ],
  providers: [],
})
export class SharedModule {}

header.component.ts、header.component.less、header.component.html

<div class="t-pro-header">
  <div class="sj-header-logo" title="甘肃艾康沙棘制品有限公司"></div>
  <div class="sj-header-menus">
    <ti-nav theme="dark" class="mt-3">
      <ti-nav-menu
        [items]="menus.items"
        [activeId]="menus.activeId"
        (select)="menus.onSelect($event)">
      </ti-nav-menu>
    </ti-nav>
  </div>
</div>

@images:'src/assets/images';
.t-pro-header {
  box-sizing: border-box;
  height: 64px;
  width: 100%;
  padding: 5px 16px 5px 20px;
  display: flex;
  top: 0;
  left: 0;
  z-index: 1002;
  min-width: 1280px;
  align-items: center;
  justify-content: space-between;
  background-color: #282b33;
  color: #adb0b8;
}

.sj-header-logo {
  width: 148px;
  height: 102px;
  display: flex;
  background-image: url('@{images}/logo.png');
  zoom: 0.8;
}

.sj-header-menus {
  position: absolute;
  left: 130px;
  top: 0px;
}

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 't-pro-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less'],
})
export class HeaderComponent implements OnInit {
  @Input() shrink: boolean = false;
  public menus: any;

  constructor() {
  }

  ngOnInit(): void {
    this.initMenus();
  }

  private initMenus(): void {
    this.menus = {};
    this.menus.items = [
      { label: '商机', id: 'shangji' },
      { label: '统计信息', id: 'statistics' },
      {
        label: '客户池',
        id: 'user-center',
      },
      {
        label: '管理中心',
        id: 'management-center',
      },
      // {
      //   label: '表单文本',
      //   id: 'form-text',
      //   children: [
      //     { label: '文本框', id: 'input-text' },
      //     { label: '多行文本框', id: 'input-textarea' },
      //     { label: '自动补全', id: 'autocomplete' },
      //     { label: '搜索框', id: 'search' },
      //   ],
      // },
    ];
    this.menus.activeId = '';
    this.menus.onSelect = (option: any) => {
      console.log(option);
    }
  }
}