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.
3 years ago