Angular 从框架搭建到开发上线的完整流程

Angular 从框架搭建到开发上线的完整流程

一、环境准备与项目搭建

1. 环境要求

  • Node.js (推荐 LTS 版本,当前 16.x/18.x)
  • npm (随 Node.js 安装) 或 yarn
  • Angular CLI (最新稳定版)

2. 安装 Angular CLI

bash 复制代码
npm install -g @angular/cli
# 或
yarn global add @angular/cli

3. 创建新项目

bash 复制代码
ng new my-angular-app --style=scss --routing
# 参数说明:
# --style=scss 使用 SCSS 作为样式预处理器
# --routing 生成路由模块

4. 项目结构概览

复制代码
my-angular-app/
├── src/
│   ├── app/                  # 应用主模块和组件
│   ├── assets/               # 静态资源
│   ├── environments/         # 环境配置
│   ├── index.html            # 主HTML文件
│   └── main.ts               # 应用入口文件
├── angular.json             # Angular CLI 配置文件
├── package.json             # 项目依赖和脚本
└── tsconfig.json            # TypeScript 配置

二、项目配置

1. 核心配置文件

angular.json 关键配置
json 复制代码
{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            },
            "budgets": [
              {
                "type": "initial",
                "maximumWarning": "500kb",
                "maximumError": "1mb"
              }
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

2. 环境配置 (environments/)

typescript 复制代码
// environment.ts (开发环境)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  enableDebug: true
};

// environment.prod.ts (生产环境)
export const environment = {
  production: true,
  apiUrl: 'https://api.yourdomain.com/api',
  enableDebug: false
};

3. 代理配置 (解决跨域)

创建 proxy.conf.json

json 复制代码
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

angular.json 中配置:

json 复制代码
"serve": {
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

三、核心开发流程

1. 模块化开发

创建功能模块
bash 复制代码
ng generate module products --route products --module app.module
典型模块结构
复制代码
products/
├── products.module.ts         # 模块定义
├── products-routing.module.ts # 模块路由
├── components/                # 组件
├── services/                  # 服务
├── models/                    # 数据模型
└── interfaces/                # TypeScript 接口

2. 组件开发

创建组件
bash 复制代码
ng generate component products/product-list
组件示例
typescript 复制代码
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { Product } from '../models/product.model';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductListComponent implements OnInit {
  products$: Observable<Product[]>;
  
  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.products$ = this.productService.getProducts();
  }
}

3. 服务与依赖注入

创建服务
bash 复制代码
ng generate service products/services/product
服务示例
typescript 复制代码
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = `${environment.apiUrl}/products`;

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

4. 路由配置

路由模块示例
typescript 复制代码
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductDetailComponent } from './components/product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: ':id', component: ProductDetailComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductsRoutingModule { }

5. 状态管理 (NgRx 示例)

安装 NgRx
bash 复制代码
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools
状态管理配置
typescript 复制代码
// app.module.ts
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.forRoot({}, {}),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production
    })
  ]
})
export class AppModule { }

四、测试与质量保证

1. 单元测试 (Jasmine + Karma)

typescript 复制代码
describe('ProductService', () => {
  let service: ProductService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ProductService]
    });
    
    service = TestBed.inject(ProductService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  it('should retrieve products', () => {
    const mockProducts = [{ id: 1, name: 'Test Product' }];
    
    service.getProducts().subscribe(products => {
      expect(products).toEqual(mockProducts);
    });
    
    const req = httpTestingController.expectOne(`${environment.apiUrl}/products`);
    expect(req.request.method).toBe('GET');
    req.flush(mockProducts);
  });
});

2. E2E 测试 (Protractor/Cypress)

使用 Cypress (推荐)
bash 复制代码
npm install cypress --save-dev
测试示例
javascript 复制代码
describe('Product List', () => {
  it('should display products', () => {
    cy.visit('/products');
    cy.get('.product-item').should('have.length.greaterThan', 0);
  });
});

3. 代码质量工具

ESLint 配置
bash 复制代码
ng add @angular-eslint/schematics
Prettier 配置
json 复制代码
// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}
Husky + lint-staged
json 复制代码
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{html,scss,json}": [
      "prettier --write"
    ]
  }
}

五、构建与部署

1. 构建生产版本

bash 复制代码
ng build --configuration production

2. 部署选项

静态服务器部署 (Nginx 示例配置)
nginx 复制代码
server {
  listen 80;
  server_name yourdomain.com;
  
  root /var/www/my-angular-app;
  index index.html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
  
  location /api {
    proxy_pass http://api-server:3000;
  }
}
Docker 部署
dockerfile 复制代码
# 阶段1: 构建应用
FROM node:16 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build --configuration=production

# 阶段2: 运行应用
FROM nginx:alpine
COPY --from=builder /app/dist/my-angular-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. CI/CD 配置 (GitHub Actions 示例)

yaml 复制代码
name: Angular CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
        node-version: '16.x'
    
    - name: Install dependencies
      run: npm ci
      
    - name: Run tests
      run: npm test
      
    - name: Build for production
      run: npm run build -- --configuration=production
      
    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        source: "dist/my-angular-app/*"
        target: "/var/www/my-angular-app"

六、性能优化

1. 构建优化

  • 启用构建优化器 (angular.jsonbuildOptimizer: true)
  • 使用 AOT 编译 (默认启用)
  • 启用生产模式 (ng build --prod)

2. 懒加载模块

typescript 复制代码
const routes: Routes = [
  {
    path: 'products',
    loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
  }
];

3. 预加载策略

typescript 复制代码
import { PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ]
})
export class AppRoutingModule { }

4. 服务 Worker (PWA)

bash 复制代码
ng add @angular/pwa

5. 性能监控

typescript 复制代码
import { PerformanceObserver } from 'web-vitals';

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('[Performance]', entry.name, entry.startTime, entry.duration);
  }
});

observer.observe({ entryTypes: ['navigation', 'paint', 'resource'] });

七、维护与升级

1. Angular 版本升级

bash 复制代码
ng update @angular/core @angular/cli

2. 依赖管理

bash 复制代码
npm outdated
npm update

3. 更新日志

保持 CHANGELOG.md 文件记录重要变更


通过以上流程,您可以完成从零开始搭建 Angular 应用到最终上线的完整过程。根据项目实际需求,可以适当调整各个环节的配置和工具选择。

相关推荐
小妖怪的夏天6 分钟前
electron 打包web页面解决跨域问题
前端·javascript·electron
骚饼13 分钟前
Git 命令配置别名、Git命令缩写(Mac版)
前端·git
LoveEate24 分钟前
vue3 el-switch表单联动校验
前端·javascript·vue.js
z_y_j22997043829 分钟前
服务器中更新前端项目
服务器·前端
2301_7976042435 分钟前
d40: vue杂项问题
前端·javascript·vue.js
Mintopia1 小时前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
Mintopia1 小时前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
IT_陈寒1 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
excel2 小时前
JavaScript 中的对象池:复用对象的高效方案
前端
excel2 小时前
Vue实例挂载的过程中发生了什么
前端