【第22期】观点:IT 行业加班,到底有没有价值?

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

**

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

**

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

相关文章推荐

从无到有构建Angular2 后台管理系统的前端架构

最近公司的项目需求,需要设计一套后台管理系统的前端框架,我使用了Angular-cli构建Angualr2的模板,并按照需求,添加了ng2-charts/ng2-smart-table/file-up...

ng2学习笔记(一)初识ng2

Angular2,简称ng2 看了下 fundamentals 的视频,13集,平均每集2分钟(如果网不好,拉到下面看transcript)简述一下: 1. 安装 npm,安装 angular-c...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

学习笔记——ng2基本架构

ng2主要有八个构造块:模块、组件、模板、服务、元数据、指令、依赖注入、数据绑定。* 模块 1. 1. 由@NgModule()装饰器函数修饰,包含以下重要的属性。 * de...

实战Angular2+web api增删改查 (一)

Angular2是一个前端开发框架,在引入ts之后使得我们这些C#开发者能够更快的熟悉该框架,angular2开发首先要知道这是一个SPA(单页应用),我们要摆脱以往的asp.net中的MVC模式的固...

封装ng2的Http请求

需求描述:http请求的url格式都是’http://debug.xxx.com‘+’/url’,在请求之前显示loading,在请求结束隐藏loading 目前只封装了get,其他请求类似,后期再...

实战Angular2+web api增删改查 (二)

webapi配置 protected void Application_Start()         {             AreaRegistration.RegisterAllAre...

Angular2开发基础之Webpack

本文首发简书http://www.jianshu.com/p/4b4264f045b7, 欢迎转载,但请注明转载链接,谢谢!目标上篇文章Angular2开发基础之TSC编译 解决如何使用TSC来编译n...

实战Angular2+web api增删改查(三)

Angular2 开发 本示例使用了Angular2 RC4版本,另外由于使用了bootstrap,所以需要html中引入对应的css及js文件 入口 import { bootstrap } ...

angular输出html

在用angular作为前端搭建个人博客的时候,发现用angularJs输出

管理后台-前端-AngularJS

ng+bootstrap可以做出很漂亮的管理系统出来,https://wrapbootstrap.com/可以付费购买,下文会提供一个免费的,要讲解如何从0到1把ng前端结构搭出来是很漫长的教程,本文...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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