angular12简单搭建项目的过程记录

最新推荐文章于 2024-04-30 15:34:23 发布

桐溪漂流

最新推荐文章于 2024-04-30 15:34:23 发布

阅读量1.1k

点赞数

分类专栏： angular js 文章标签：单元测试

本文链接：https://blog.csdn.net/qq564280420/article/details/120526511

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

angular

11 篇文章 1 订阅

订阅专栏

ng全局安装

最新发布版本安装

npm install -g @angular/cli

指定版本安装

npm install -g @angular/cli@8.3.29

查看当前版本

ng --version

注意：需要根据ng版本选择安装对应的node版本

// Angular CLI: 12.2.2
// Node: 14.16.0

项目创建

ng new admin-angular --skipTests=true --style=scss
创建的项目中跳过了单元测试的创建，样式文件用scss文件

添加ng-zorro-antd

ng add ng-zorro-antd

自定义webpack配置

详见 angular中自定义webpack配置

添加translate国际化转化

添加依赖

yarn add @ngx-translate/core @ngx-translate/http-loader
// 或者
npm i @ngx-translate/core @ngx-translate/http-loader --save

添加配置

provider.ts 配置 translate的loader

import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export const TranslateProvider = {
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
};

app.module.ts 引入translate的module

import { TranslateProvider } from './provider';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    // ...省略
    TranslateModule.forRoot(TranslateProvider),
  ],
})
export class AppModule { }

app.component.ts 添加项目初始化语言设置以及语言切换

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

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

  isCollapsed = false;
  lang: string;

  constructor(
    private translate: TranslateService,
  ) {
    // 初始化的时候进行默认语言设置
    const value = localStorage.getItem('admin-lang');
    this.lang = value || 'zh-CN';
    this.translate.setDefaultLang(this.lang);
    this.translate.use(this.lang);
  }

  // 语言切换的时候设置-当前项目只设置了中文和英文，所以是中英文切换
  changeLang() {
    const nextLang = this.lang === 'zh-CN' ? 'en' : 'zh-CN';
    localStorage.setItem('admin-lang', nextLang);
    this.translate.use(nextLang);
    this.lang = nextLang;
  }
}

添加语言json文件

src/assets/i18n/en.json

{
  "app_name": "Admin",
  "more_actions": {
    "title": "More Actions"
  }
}

src/assets/i18n/zh-CN.json

{
  "app_name": "后台管理",
  "more_actions": {
    "title": "更多操作"
  }
}

使用

html中

<h1>{{ 'app_name' | translate }}</h1>

ts中

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {

  moreAction: string = '';

  constructor(
    private translate: TranslateService,
  ) { }

  ngOnInit() {
    this.moreAction = this.translate.instant('more_actions.title');
  }
}

添加typescript-eslint

添加依赖

yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

添加.eslintrc.js配置文件

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint'
  ],
  // 忽略文件配置
  ignorePatterns: [
    'src/main.ts',
    '.eslintrc.js',
    'mock/*',
  ],
  rules: {
    // 规则根据需要自行配置
    'max-len': ['error', { 'code': 140 }], // 单行code最长长度-140
    'max-lines': ['error', 500], // 文件最大行数-500
    'eol-last': 1, // 文件以空行结尾，1-警告
    'arrow-spacing': 'error', // 箭头函数箭头前后需要有空格
    'prefer-arrow-callback': 'error', // 回调函数需要用箭头函数
    'no-var': 'error', // 不能使用var声明变量
    'no-new': 0, //允许使用 new 关键字
    'no-undef': 0,
    'no-debugger': "error",
    'quotes': [1, 'single', { "allowTemplateLiterals": true }], // 字符串使用单双引号,double,single
    'no-console': [1, { allow: ['log', 'warn'] }],// 允许使用console.log()
    'semi': [1, 'always'], // 在语句后面加分号
    'no-extra-semi': 2, // 多个分号-报错
    'comma-dangle': 0, // [2, 'never'] 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，always-multiline多行模式必须带逗号，单行模式不能带逗号
    'arrow-parens': 0,
    'space-before-function-paren': [1, {"anonymous": "always", "named": "never", "asyncArrow": "always"}],
    'key-spacing': 1,
    'keyword-spacing': 2,
    '@typescript-eslint/explicit-module-boundary-types': 0,
    '@typescript-eslint/no-empty-function': 0,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/array-type': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/no-unused-vars': 0,
    '@typescript-eslint/no-floating-promises': 0,
    '@typescript-eslint/no-unsafe-member-access': 0,
    '@typescript-eslint/explicit-member-accessibility': 0,
    'no-prototype-builtins': 0,
    '@typescript-eslint/no-unsafe-assignment': 0,
    '@typescript-eslint/no-inferrable-types': 1,
  },
  parserOptions: {
    project: ["./tsconfig.json"],
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
  ],
};

package.json添加lint行内命令

{
  // ...
  "scripts": {
    // ...
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  // ...
}

添加echarts

在angular中使用echart的时候，只需要在对应的组件生命周期中调用echart的api就可以了
详见 angular中使用echarts地图

添加支出模块页面

添加数据mock模块

api模拟文档为mock/outlay.js
数据存储为文件json文件 mock/json/outlay.json。项目启动会自动创建该文件。
api具备基本的功能-增、删、改、查，具体逻辑可查看相关具体代码

添加支出管理页面

执行 ng g component pages/dashboard/outlay 会自动创建outlay组件，并自动添加到dashboard.module.ts中
添加到路由配置文件中 dashboard-routing.module.ts

利用antd组件库开发页面静态页面

src/app/pages/dashboard/outlay/outlay.component.html 页面html
src/app/pages/dashboard/outlay/outlay.component.scss 页面scss
src/app/pages/dashboard/outlay/outlay.component.ts 页面ts
src/app/pages/dashboard/components/outlay-modify/outlay-modify.component.html 编辑form组件html
src/app/pages/dashboard/components/outlay-modify/outlay-modify.component.scss 编辑form组件scss
src/app/pages/dashboard/components/outlay-modify/outlay-modify.component.ts 编辑form组件ts
src/app/service/actions/outlay.action-service.ts 交互服务service

添加调用api的service文件及调试

src/app/service/outlay.service.ts api的service文件

添加高德地图

yarn add @amap/amap-jsapi-loader 安装依赖
html

<div class="map-container" id="container" tabindex="0"></div>

import { load } from '@amap/amap-jsapi-loader';
// 利用load方法加载map及插件等来显示地图
export class MapGdComponent implements OnInit, OnDestroy {

  aMap: any;
  constructor(
    private toast: ToastService,
  ) { }

  ngOnDestroy(): void {
    if (this.aMap) {
      this.aMap.destroy();
    }
  }

  ngOnInit() {
    this.mapInit();
  }

  mapInit() {

    load({ // 首次调用 load
      key: '开发者的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [ // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.Scale',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.Driving',
        'AMap.Geolocation',
      ],
      AMapUI: { // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: { // 是否加载 Loca， 缺省不加载
        version: '2.0' // Loca 版本，缺省 1.3.2
      },
    }).then((AMap) => {
      this.aMap = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        center: [113.544078, 34.795761],
        zoom: 16
      });
      this.aMap.on('complete', () => {
        this.toast.success('地图加载完成 !');
      });
    }).catch((e) => {
      throwError(e);
    });
  }

}

添加富文本编辑器

安装依赖 yarn add ngx-quill quill@1.3.7 @types/quill@1.3.10 quill-emoji
样式添加

style.scss 文件添加样式

@import url(../node_modules/quill/dist/quill.core.css);
@import url(../node_modules/quill/dist/quill.bubble.css);
@import url(../node_modules/quill/dist/quill.snow.css);
@import url(../node_modules/quill-emoji/dist/quill-emoji.css);

在使用模块中引入module
在组件中使用

<quill-editor [modules]="config" [styles]="{height: '250px'}" ></quill-editor>

  config = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }], // custom button values
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
      [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
      [{ 'direction': 'rtl' }], // text direction
      [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean'], // remove formatting button
      ['link', 'image', 'video'],
      ['emoji'] // 引入表情
    ]
  }