Ng2 应用初始化脚本v0.1

最新推荐文章于 2019-11-21 15:30:09 发布

KevinDMitnick

最新推荐文章于 2019-11-21 15:30:09 发布

阅读量472

点赞数

分类专栏： web前端基础知识 Angular2 shell 文章标签：脚本应用 shell angular2 架构

本文链接：https://blog.csdn.net/lzch2105/article/details/53999375

版权

web前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

基础知识

12 篇文章 0 订阅

订阅专栏

Angular2

7 篇文章 0 订阅

订阅专栏

#!/bin/sh
# author loch
# 应用初始化脚本
# sh init.sh appName

# 复制 template 内容到新建目录
# cp -r template src/$1
# 获取大写驼峰命名的模块名


upperLetter=$(echo ${1:0:1}|tr '[a-z]' '[A-Z]')

length=${#1}

otherLetter=${1:1:`expr $length - 1`}

UPPER=$upperLetter$otherLetter

# # 建好目录结构
mkdir src/$1
mkdir src/$1/font
mkdir src/$1/img
mkdir src/$1/service
mkdir src/$1/directive
mkdir src/$1/component
mkdir src/$1/component/demo

# 生成 html 文件
htmlTemplate="
<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!--<link rel='tylesheet' href='../../styles.css'-->

    <!-- Polyfill(s) for older browsers -->
    <!--AOT JIT 同时依赖文件-->
    <script src='../../node_modules/core-js/client/shim.min.js'></script>

    <script src='../../node_modules/zone.js/dist/zone.js'></script>

    <!--只有JIT 依赖文件-->
    <script src='../../node_modules/reflect-metadata/Reflect.js'></script>
    <script src='../../node_modules/systemjs/dist/system.src.js'></script>

    <script src='../../systemjs.config.js'></script>

    <script src='../../node_modules/jquery/dist/jquery.min.js'></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading ${UPPER}Component content here ...</my-app>
  </body>
</html>
"
echo $htmlTemplate > src/$1/index.html

# 生成 main.ts 文件
mainTemplate="
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\n
import { ${UPPER}Module } from './${1}.module';\n\n
platformBrowserDynamic().bootstrapModule(${UPPER}Module);
"
echo $mainTemplate > src/$1/main.ts

# 生成 module 文件
moduleTemplate="
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
/*Routing Module*/

import { ${UPPER}Component }  from './${1}.component';

@NgModule({
  imports:      [ 
      BrowserModule
    ],
  declarations: [ 
      ${UPPER}Component
    ],
  bootstrap:    [ ${UPPER}Component ]
})
export class ${UPPER}Module { }

"
echo $moduleTemplate > src/$1/${1}.module.ts

# 生成 routing 文件
routingTemplate="
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
/* Feature Component */

const routes: Routes = [
    { 
        path: '/', 
        component: ''
    }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class ${UPPER}RoutingModule {}
"
# echo $routingTemplate > src/$1/${1}-routing.module.ts

# 生成 component 文件
componentTemplate="
import { Component } from '@angular/core';

declare var $: any;

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: '${1}.component.html',
  styleUrls: [
      '${1}.component.css'
  ]
})
export class ${UPPER}Component {}
"
echo $componentTemplate > src/$1/${1}.component.ts

# 生成 component html 文件
componentHTML="
<h1>${1} Template</h1>
"
echo $componentHTML > src/$1/${1}.component.html

# 生成 component css 文件
componentCSS="
html,body{padding:0px;margin:0px}
"
echo $componentCSS > src/$1/${1}.component.css