app-ng-frame v0.0.0

app-ng-frame

TODO

• stylelint: https://stylelint.io/user-guide/get-started
• 在 Angular 中使用 RxJS 建立 Http 服務的暫存 : https://blog.poychang.net/caching-result-with-angular-http-service/
• angular中对json数据按照某一字段进行排序: https://blog.csdn.net/baidu_32523857/article/details/110109689

install

• npm install -g npm@latest
• npm install -g npm@6.11.0
• npm install -g @angular/cli@11.2.1
• node -v
• nvm install v12.20.2
• nvm use v12.20.2
• nvm alias default v12.20.2
• npm install -g @angular/cli
• ng update

new project

• ng new app-ng-frame --routing
• npm install --save @angular/material @angular/cdk
• npm install --save web-animations-js -->

angular/pwa

• ng add @angular/pwa
• npm install --global pwa-icon-gen
• custom icon svg: ./src/assets/icon.svg

rm -r ./src/assets/icons
mkdir -pv ./src/assets/icons
pwa-icon-gen ./src/assets/icon.svg --out=./src/assets/icons --sizes=69,72,96,128,144,152,192,384,512
mv ./src/assets/icons/69x69.png ./src/assets/icons/icon-69x69.png
mv ./src/assets/icons/72x72.png ./src/assets/icons/icon-72x72.png
mv ./src/assets/icons/96x96.png ./src/assets/icons/icon-96x96.png
mv ./src/assets/icons/128x128.png ./src/assets/icons/icon-128x128.png
mv ./src/assets/icons/144x144.png ./src/assets/icons/icon-144x144.png
mv ./src/assets/icons/152x152.png ./src/assets/icons/icon-152x152.png
mv ./src/assets/icons/192x192.png ./src/assets/icons/icon-192x192.png
mv ./src/assets/icons/384x384.png ./src/assets/icons/icon-384x384.png
mv ./src/assets/icons/512x512.png ./src/assets/icons/icon-512x512.png

import web Module

app.module.ts

@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule,
    HttpClientModule,
    ...
  ],
  ...
})

import core component

-styles.styl

@import './app/core/core-styles.styl'

app-routing.module.ts

const routes: Routes = [
  {path: '',loadChildren: () => import('./core/core.module').then(m => m.CoreModule)}
];

app.component.ts

export class AppComponent implements OnInit {
  title = 'app-ng-frame';
  constructor(private iconRegistryService: IconRegistryService) {}
  ngOnInit(): void {
    this.iconRegistryService.init();
  }
}

theme設定

• ng add @angular/material
• angular.json

...
  ,"styles": [
    "src/styles.styl",
    "src/app/core/themes/custom-theme.scss"
  ],
...

加入Material Icons

• index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

npm package

npm adduser npm publish

AppNgFrame

This project was generated with Angular CLI version 11.2.1.

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. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.