open-index/open-npm huggingface dataset:
npm package: @pcq/ng-jojo
Description: A blank schematics
Latest version: 0.0.3

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with
```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @pcq/schematics-example
Description: A blank schematics
Latest version: 0.0.0

# Angular Schematics 代码生成

首先我们安装这个example包
```
ng add 
```

（在此描述变化）

接下来我们就来仔细阐述一下要如何实现上述操作。

1、安装schematics-cli命令行工具
```
npm install -g @angular-devkit/schematics-cli
```

2、创建一个schematics集合
```
schematics blank --name=schematics-example
```
进入创建好的项目，看到以下结构
![创建好的项目](./example/cjxm.png)

3、使用ng add 命令

为了使用ng add 我们把src下的schematics-example改成ng-add，同时collection.json里也要做出相应的调整：
```json
{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "A blank schematic.",
      "factory": "./ng-add/index#schematicsExample"
    }
  }
}
```

4、使用模板文件
模板长的就是这个样子，这个name和path其实就是参数，dasherize是一个字符串操作方法，这里不赘述，后面再讲。

这个模板的来源我是在@delon里找的(github)，需要自行手动移到目录下
![模板文件](./example/files.png)


5、实现ng g schematics-example:component

首先现在src下新建一个文件夹及一个文件：component/index.ts
我们执行ng g schematics-example:component --name=list命令，可以看到生成了三个常规的angular文件，要实现这个功能我们需要在src/component/index.ts里干点什么。

我们来看看component/index.ts里的代码
```typescript
import { chain, Rule, apply, url, template, branchAndMerge, mergeWith } from '@angular-devkit/schematics';
// 这些就是前面提到的操作字符串的方法，可以自行f12查看详情
import { classify, dasherize, camelize, underscore } from '@angular-devkit/core/src/utils/strings';
/** 这两个方法很关键
 * addImport 是在某个文件添加形如这样的东西 import { XxxComponent } from './xxx/xxx.component';
 * addValToVar 是添加一个字符串到某个变量,例如:
 * const routes: Routes = [];
 *          
 * const routes: Routes = [
 *   { path: 'xxx', component: XxxComponent }
 * ];
 * 这两个方法都是参考angular和@delon代码实现的,可根据实际需要进行调整
*/
import { addImport, addValToVar } from '../utils/build';
const stringUtils = { classify, dasherize, camelize, underscore };
export function component(options: any): Rule {
   
    // 合并模板里的变量，详情可看angular-devkit-schematics-builds，下面有链接
    const templateSource = apply(url('./files'), [
        template({
            ...stringUtils,
            ...options
        })
    ]);

    // 这里我也是看别人源码自行理解的，每太深究angular-devkit-schematics每个方法的具体含义
    return chain([
        branchAndMerge(chain([
            mergeWith(templateSource),
            addImport(options.path, options.symbolName, options.componentPath),
            addValToVar(options.modPath, "COMPONENTS", options.symbolName)
        ]))
    ]);
}
```
 [angular-devkit-schematics-builds的GitHub](https://github.com/angular/angular-devkit-schematics-builds/blob/master/README.md)

 六、在collection里添加这个schematics
 ```json
{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "A blank schematic.",
      "factory": "./ng-add/index#schematicsExample"
    },
    "component": {
      "factory": "./component/index#component",
      "description": "generate component schematics"
    }
  }
}
 ```
 还要些其它操作，这里不再说明，可看源码，聪明的你一定能一看就懂。

七、我们来实践一下
首先我们我们先把addImport()和addValToVar()及其相关的引用先注释，这个东西需要在实际项目中才能运行，
这里我们先来看看生成文件的效果
```
// 首先
npm run build
// 然后
schematics .:component --name=user
```
命令行输出了了结果，创建了三个文件，如果想要看到生成真实的文件可以加上参数
```
schematics .:component --name=user --dry-run=false
```

总结
以上，就可以生成我们自己的业务模板了。完整代码在这里