Angular2 Color Picker 使用教程

Angular2 Color Picker 使用教程

angular2-color-pickerAngular 2 Color Picker Directive, no dependences required. 项目地址:https://gitcode.com/gh_mirrors/an/angular2-color-picker

1. 项目的目录结构及介绍

angular2-color-picker/
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   ├── color-picker.component.ts
│   ├── color-picker.directive.ts
│   ├── color-picker.module.ts
│   ├── color-picker.service.ts
│   ├── color-picker.component.html
│   ├── color-picker.component.scss
│   └── demo/
│       ├── app.component.ts
│       ├── app.module.ts
│       ├── main.ts
│       ├── index.html
│       └── styles.scss
└── webpack.config.js

目录结构介绍

• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 编译配置文件。
• src/: 源代码目录。
  • index.ts: 入口文件。
  • color-picker.component.ts: 颜色选择器组件。
  • color-picker.directive.ts: 颜色选择器指令。
  • color-picker.module.ts: 颜色选择器模块。
  • color-picker.service.ts: 颜色选择器服务。
  • color-picker.component.html: 颜色选择器组件模板。
  • color-picker.component.scss: 颜色选择器组件样式。
  • demo/: 示例应用目录。
    • app.component.ts: 示例应用组件。
    • app.module.ts: 示例应用模块。
    • main.ts: 示例应用入口文件。
    • index.html: 示例应用HTML文件。
    • styles.scss: 示例应用样式文件。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

入口文件

src/index.ts 是项目的入口文件，负责导出颜色选择器组件、指令、模块和服务。

export * from './color-picker.component';
export * from './color-picker.directive';
export * from './color-picker.module';
export * from './color-picker.service';

示例应用入口文件

src/demo/main.ts 是示例应用的入口文件，负责启动示例应用。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖和脚本配置。

{
  "name": "angular2-color-picker",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "rxjs": "^5.0.0",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "typescript": "^2.0.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 编译配置文件。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false

angular2-color-pickerAngular 2 Color Picker Directive, no dependences required. 项目地址:https://gitcode.com/gh_mirrors/an/angular2-color-picker