4

( LƯU Ý: Khi tôi mới bắt đầu bài đăng này, tôi đã làm việc với phiên bản 1.0.0-beta.10 của Angular CLI, phiên bản trước phiên bản CLI được tái cấu trúc để sử dụng Webpack thay vì SystemJS, vào khoảng 8 / 2/2016. Vì vậy, nó có lẽ chỉ hữu ích cho những người chưa bắt đầu sử dụng phiên bản Webpack của CLI. )

Kể từ phiên bản 1.0.0-beta.10, công cụ Angular CLI không cung cấp tùy chọn tạo ứng dụng Angular 2 cơ bản bao gồm API web trong bộ nhớ , đây là công cụ cho phép các nhà phát triển mô phỏng việc trả lại dữ liệu từ HTTP các cuộc gọi. Tôi nghĩ rằng việc thêm API web trong bộ nhớ vào ứng dụng do CLI tạo ra của tôi chỉ là vấn đề bắt chước cách bài học HTTP trong hướng dẫn Tour of Heroes đã làm điều đó , nhưng nó còn liên quan nhiều hơn thế. Đây là cách bạn làm điều đó.

(Từ đây trở đi, tôi sẽ viết tắt "API web trong bộ nhớ" là IMWA vì lý do ngắn gọn. Ai đó cần đưa ra một tên ngắn hơn, hay hơn cho công cụ này.)

Đầu tiên, bạn thêm IMWA làm phụ thuộc trong tệp pack.json:

"dependencies": {
  ...
  "angular2-in-memory-web-api": "0.0.14"
}

... và sau đó chạy "npm install" từ dấu nhắc lệnh trong thư mục chứa tệp pack.json để tải xuống mô-đun nút IMWA (trước tiên tôi có xu hướng xóa toàn bộ thư mục "node_modules" để đảm bảo mọi thứ được cài đặt mới).

Sau đó, bạn thêm các nhập khẩu cần thiết vào tệp main.ts của mình và sử dụng các nhập đó trong phương thức bootstrap ():

import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './app/in-memory-data.service';

import { HTTP_PROVIDERS } from '@angular/http';

...

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  { provide: XHRBackend, useClass: InMemoryBackendService },
  { provide: SEED_DATA, useClass: InMemoryDataService }      
]);

Sau đó tạo tệp trong bộ nhớ-data.service.ts trong thư mục src / app của bạn với một số dữ liệu giữ chỗ tạm thời:

export class InMemoryDataService {
  createDb() {
    let tempData = [
      {id: 1, name: 'foobar'}
    ];

    return { tempData };
  }
}

Cho đến thời điểm này, tất cả các thiết lập gần giống như hướng dẫn của Tour of Heroes, nhưng những thay đổi cuối cùng cần có là dành riêng cho CLI.

Khi bạn sử dụng lệnh "ng phục vụ" của CLI để biên dịch và chạy ứng dụng trên máy cục bộ của mình, CLI sẽ tạo một thư mục "dist" với tất cả các tệp cần thiết để thực thi ứng dụng. Thư mục "dist" bao gồm:

  • Các tệp index.html và tệp cấu hình toàn cầu (main.js và system-config.js) trong thư mục gốc của thư mục "dist".
  • Thư mục "ứng dụng" chứa phần còn lại của các tệp Angular 2 dành riêng cho ứng dụng của bạn, từ tệp thành phần chính trở xuống.
  • Một thư mục "nhà cung cấp" chứa các tệp từ các mô-đun nút khác nhau cần thiết để chạy ứng dụng, chẳng hạn như các tệp thư viện Angular 2 lõi.

IMWA cần được đưa vào như một thư mục riêng trong thư mục "nhà cung cấp" đó để IMWA có sẵn cho ứng dụng của bạn.

Tệp "angular-cli-build.js" trong thư mục gốc của không gian tệp dự án của bạn (trong cùng thư mục với gói.json) kiểm soát các mô-đun nút nào đưa nó vào bản dựng (thư mục "dist"). Thêm IMWA vào mảng các mô-đun như vậy:

vendorNpmFiles: [
  ...
  'angular2-in-memory-web-api/*.+(js)'
]

Cú pháp "*. + (Js)" đảm bảo rằng tất cả các tệp ".js" trong mô-đun nút IMWA được sao chép vào thư mục thích hợp ("angular2-in-memory-web-api") trong "nhà cung cấp" (tại lần này, không có tệp ".js.map" trong mô-đun IMWA).

Cuối cùng, bạn cần đảm bảo mô-đun IMWA trong thư mục "nhà cung cấp" được SystemJS tải cùng với các mô-đun Angular thông thường bằng cách thêm IMWA vào cấu hình gói trong tệp "system-config.ts" trong thư mục "src" của dự án của bạn:

/** Map relative paths to URLs. */
const map: any = {
  'angular2-in-memory-web-api': 'vendor/angular2-in-memory-web-api'
};

/** User packages configuration. */
const packages: any = {
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};

Đó là một mẹo nhỏ: chạy ứng dụng của bạn bằng cách sử dụng "ng phục vụ", mở bảng điều khiển trình duyệt và xác nhận rằng không có thông báo lỗi 404 nào liên quan đến IMWA.

|