Ng2 应用初始化脚本v0.1

原创 2017年01月03日 23:32:47
#!/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

**

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

**

版权声明:本文为博主原创文章,未经博主允许不得转载。

ng2-tab选项卡

2017年3月8日。**推荐方式1:使用ng2中自带指令 首先,需要在你所要点击的切换按钮上添加点击函数,并带上对应的参数。 在对应各自的内容中添加[style.display]样式等...
  • qq_36181008
  • qq_36181008
  • 2017年03月08日 10:20
  • 1177

ng2-bootstrap——Native Angular2 directives for Bootstrap

http://valor-software.com/ng2-bootstrap/
  • ztguang
  • ztguang
  • 2016年04月22日 16:23
  • 9173

[bitcoin-003]比特币的源码

1.参考文献 http://www.bitcointrading.com/forum/bitcoin-clients/original-bitcoin-source-code-archives/ ...
  • u011539200
  • u011539200
  • 2018年01月12日 18:55
  • 77

【DRP】将SQL脚本导入Oracle数据库并进行数据初始化

上一篇讲了如何将DRP物理模型导出SQL脚本,今天讲一下如何将SQL脚本导入Oracle数据库,并进行数据初始化。     【步骤】     首先需要我们通过PL/SQL Developer 成功...
  • u013046097
  • u013046097
  • 2016年06月12日 20:16
  • 1124

关于12306订票系统相关的文档收集整理

关于12306订票系统相关的文档收集整理 全部文章都来自网上: 简单整理了一下,希望对大家有所帮助 1. 12306ng开源项目组 http://www.12306ng.org/f...
  • 5iasp
  • 5iasp
  • 2013年01月06日 22:16
  • 2262

ng2学习笔记一

一、依赖注入在 Angular2 中,一个常见的依赖注入是注入一个 Http 对象,用于发送请求。 import {Component, OnInit} from 'angular2/core'...
  • u013909970
  • u013909970
  • 2016年11月15日 13:37
  • 441

centos6/7 系统初始化脚本

安装完成系统后,需要做些调整。#!/bin/bash # # 初始化系统脚本 # # 适用centos6 和centos7 # # PATH=/bin:/sbin:/usr/bin:/usr/sbin...
  • u012375924
  • u012375924
  • 2016年09月09日 13:57
  • 1766

ng2学习笔记(一)初识ng2

Angular2,简称ng2 看了下 fundamentals 的视频,13集,平均每集2分钟(如果网不好,拉到下面看transcript)简述一下: 1. 安装 npm,安装 angular-c...
  • moyummy
  • moyummy
  • 2017年01月11日 00:14
  • 1031

服务器日常初始化的脚本

版权声明:可以任意转载,转载时请标明文章原始出处-xjtushilei和作者信息:石磊 升级了架构,采用了腾讯云的vpc,成都服务器,连续配置了12台服务器,肯定要节省点时间,所以就这样记...
  • i_iphone
  • i_iphone
  • 2017年12月22日 17:25
  • 63

linux自定义初始化脚本

添加初始化脚本之前,先要弄清两个问题? 什么是INIT? init是Linux系统操作中不可缺少的程序之一。 所谓的init进程,它是一个由内核启动的用户级进程。 内核自行启动(已经被载入内存...
  • surui_555
  • surui_555
  • 2014年12月10日 14:39
  • 1007
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ng2 应用初始化脚本v0.1
举报原因:
原因补充:

(最多只允许输入30个字)