Ng2 应用初始化脚本v0.1

#!/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="

<html>
  <head>
    <title>Angular QuickStarttitle>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    

    
    
    <script src='../../node_modules/core-js/client/shim.min.js'>script>

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

    
    <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} Templateh1>
"
echo $componentHTML > src/$1/${1}.component.html

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

**

前行的路上,感谢您的鼓励!!

**

你可能感兴趣的:(web前端,基础知识,Angular2,shell,脚本,应用,shell,angular2,架构)