#!/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
**
前行的路上,感谢您的鼓励!!
**