Material Dashboard Angular2 使用教程
1. 项目的目录结构及介绍
Material Dashboard Angular2 是一个基于 Angular 和 Bootstrap 的 Material Design 风格的管理界面模板。项目的目录结构如下:
material-dashboard-angular2/
├── e2e/
│ ├── src/
│ │ ├── app.e2e-spec.ts
│ │ ├── app.po.ts
│ ├── protractor.conf.js
│ ├── tsconfig.json
├── src/
│ ├── app/
│ │ ├── layouts/
│ │ ├── pages/
│ │ ├── shared/
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ ├── assets/
│ ├── environments/
│ ├── scss/
│ ├── index.html
│ ├── main.ts
│ ├── styles.scss
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
├── tsconfig.json
├── tslint.json
目录结构说明:
e2e/
:端到端测试目录。src/
:源代码目录。app/
:应用程序的主要代码。layouts/
:布局组件。pages/
:页面组件。shared/
:共享组件和模块。
assets/
:静态资源文件。environments/
:环境配置文件。scss/
:SCSS 样式文件。
angular.json
:Angular 项目配置文件。package.json
:项目依赖和脚本配置文件。tsconfig.json
:TypeScript 配置文件。tslint.json
:TypeScript 代码风格配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/main.ts
,它是 Angular 应用程序的入口点。以下是 main.ts
的内容:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
启动文件说明:
enableProdMode()
:在生产环境中启用生产模式。platformBrowserDynamic().bootstrapModule(AppModule)
:引导启动AppModule
模块。
3. 项目的配置文件介绍
angular.json
angular.json
是 Angular 项目的配置文件,包含了项目的构建、开发服务器、测试等配置。以下是部分内容:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"material-dashboard-angular2": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/material-dashboard-angular2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "