形形色色Node工程

最近项目要用的

一些无关紧要的文件夹, demo是一些示例, dist是webpack打包后发布的代码,server是用node启动服务,typings和tsconfig是一些ts配置.

npm install 安装node_modules依赖.

npm start 从package.json指定的webpack.config开始运行.

    "start": "concurrently \"webpack --watch --colors\" \"nodemon server/main.js\""

var webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  entry: {
        main:[‘./app/main.ts‘],
        vendor:[

        ]
  },
  externals:{
      "jquery":"jQuery"
  },
  output: {
    path: ‘./dist‘,
    filename: ‘js/app.bundle.js‘,
    publicPath:‘/‘
  },
  module: {
    loaders: [
      {test: /\.ts$/, loader: ‘ts‘},
      {test: /\.html$/, loader: ‘raw‘},
      {test: /\.css$/, loader: ‘raw‘}
    ]
  },
  resolve: {
    extensions: [‘‘, ‘.js‘, ‘.ts‘, ‘.html‘, ‘.css‘]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: ‘./app/index.html‘
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        //filename : ‘vendor_[chunkhash].js‘,
        filename : ‘js/vendor.js‘,
        minChunks: Infinity
    }),
    /*new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),*/
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(process.env.APP_ENVIRONMENT || ‘development‘)
      }
    })
  ]

};

webpack.config

webpack设入口为main.ts

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic‘;
import {AppModule} from ‘./app.module‘;

platformBrowserDynamic().bootstrapModule(AppModule);

main.ts导入./app.module.ts(import和require的时候后缀名可以省略)使用bootstrapModule方法启动AppModule

在模块app.module.ts中导入angular基础模块以及自定义组件和路由组件.

import ‘./polyfills‘;

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule} from ‘@angular/http‘;

// 表单 双向数据绑定
import {AppComponent} from "./app.component";
import { HomeComponent, TestComponent } from ‘./component‘;
//路由
import APP_ROUTER_PROVIDERS from "./app.routes";

import {enableProdMode} from ‘@angular/core‘;
import { LoggerService, GLobalService, UIHelperService } from ‘./service‘;
enableProdMode();

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        APP_ROUTER_PROVIDERS
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TestComponent
    ],
    providers: [
        LoggerService,
        GLobalService,
        UIHelperService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app.module.ts

自定义组件如果是以页面为划分,比如HomeComponent, TestComponent, 可以在内部再细分功能组件.

例如上面的

import { HomeComponent, TestComponent } from ‘./component‘;

AppModule中导入页面组件后,在app.routes.ts中作好路由,就可以在html模板中实现页面跳转.

import {RouterModule, Routes } from ‘@angular/router‘;

import { HomeComponent, TestComponent } from ‘./component‘;

const routes = [
  {path: ‘‘, component: HomeComponent},
  {path: ‘test‘, component: TestComponent}
];

export default RouterModule.forRoot(routes);

component.ts中

export * from ‘./app.component‘

export * from ‘./components/home/home.component‘
export * from ‘./components/test/test.component‘

统一export组件, Module中统一import或require, 这是这个工程组织的结构.

AppModule最后也是export一个对象供使用.

上面提到的home组件除了home.component.ts还有一个模板文件homecomponent.html.ts

import {Component,OnInit} from "@angular/core";
import { URLSearchParams } from ‘@angular/http‘;
import { GLobalService, UIHelperService } from ‘../../service‘;

import { htmlTemplate } from ‘./home.component.html‘;

@Component({
  selector: ‘home‘,
  template: htmlTemplate
})
export class HomeComponent implements OnInit{
    errorMessage:string;
    homeData:any;

    constructor(private _globalService: GLobalService,private _uIHelperService:UIHelperService) {}

    ngOnInit() {
        let requestParams = new URLSearchParams();
        requestParams.set(‘id‘, ‘11111‘);
        this._globalService.ajaxCallerGet(this._globalService.getServiceURL(‘home‘), requestParams).subscribe(
            (data) => {
                this.homeData=data;
                //this._uIHelperService.getTest("test");
                console.log(data,this.homeData);
            },
            error => this.errorMessage = <any>error
        );
    }
}

hoem.component.ts

其中导入了封装有ajax方法的的service组件, 指定模板文件位置 import { htmlTemplate } from ‘./home.component.html‘;

export const htmlTemplate = `
    <div class="row">{{homeData?.name}}</div>
    <a [routerLink]="[‘/test‘]">切换到测试页面</a>
`;

中间的a标签插入了路由标志‘test‘, div中的{{插值变量}}语法根据不同的依赖包会有所不同,此处有一个问号?

路由去到test

import {Component} from "@angular/core";
import { htmlTemplate } from ‘./test.component.html‘;
@Component({
  selector: ‘test‘,
  styles: [‘‘],
  template: htmlTemplate
})
export class TestComponent{
    constructor() {
        //this.name = ‘World‘;
    }
}

读取模板

export const htmlTemplate = `
    <div class="row">
           我是test
    </div>
`;

前台的逻辑基本就是这样,更多有关node的知识以及隐蔽工程有待完善.

时间: 12-13

形形色色Node工程的相关文章

使用WebStorm调试node工程

coder比较偏好debug,调试node比较麻烦,我们借助高大上的工具webStorm(我用的是10)来调试node,配置也比较简单,直接上图: 首先,配置node环境,在导航栏选择"Edit/configuration", 接下来配置 注:javascript file 为node的入口 到这里还没有结束,还需要配置远程调试,在上面的窗口中,选择defaults中的 node.js remote debug: 下面就可以debug了,入口在这里:

node.js + webstorm 开发个人博客:配置开发环境

一.配置开发环境: 1.先安装node (1).访问http://nodejs.org打开安装包,正常安装,点击next即可. 为了测试是否安装成功,打开命令提示符,输入node,则进入node.js交互模式,如图: 通过这种方式安装node.js还自动附带了npm (2).安装node.js包管理器(Express) 新开一个命令行窗口 在命令行输入 npm install -g express Express 目录结构 t-1 目录/文件 说明 ./  根目录,我们的node.js代码都会方

docker 搭建小型的node开发环境。

选择daocloud的镜像源----快.不多说 镜像的准备: docker pull docker.io/node 下载node镜像 docker pull daocloud.io/nginx 下载nginx的镜像 项目的位置: 思路: 项目放到宿主机的某个目录下 挂载这个目录到node容器内部. nginx的配置文件放到宿主机的某个目录下. 挂载目录到某个nginx容器内部. 开始: (1.启动服务容器(node项目服务---node容器) cd 进入paasos项目所在的目录下 :app.j

node.js + webstorm :配置开发环境

一.配置开发环境: 1.先安装node (1).访问http://nodejs.org打开安装包,正常安装,点击next即可. 为了测试是否安装成功,打开命令提示符,输入node,则进入node.js交互模式,如图: 通过这种方式安装node.js还自动附带了npm (2).安装node.js包管理器(Express) 新开一个命令行窗口 在命令行输入 npm install -g express Express 目录结构 t-1 目录/文件 说明 ./  根目录,我们的node.js代码都会方

【Node.js基础篇】(八)安装Express 3.2框架以及ejs模板

Html模板以及路由文件等服务器必备的功能虽然我们都可以自己实现,但在稳定性.可靠性.全面性方面肯定是有所遗漏的,所以,从今天起,Node的学习就进入了框架学习部分. 维基百科: 框架就是制定一套规范或者规则(思想),大家(程序员)在该规范或者规则(思想)下工作.或者说使用别人搭好的舞台来做编剧和表演. 第一个要学习的框架是在Node中被广泛应用的框架--Express. 安装Express 如果你使用的Node开发环境是WebStorm的话,在新建工程的时候可以直接选新建Node工程,它会给你

node(thrift)

thrift是一种跨语言的RPC框架,据说uber采在node.js项目中采用thrfit后,比原有的http+json的方式提高近20倍的性能. 所谓的RPC本质上就是客户端将需要调用的方法名和参数通过通信协议传递给服务端,服务端计算后将返回值同样以通信协议返回,该方法在需要实现分布式的应用系统中较常见. 复杂的话,可以做成内部总线的形式. 本文记录一个node.js下thrift的简单例子. 1.下载thrift编译工具,本人用的是最新的0.92版本(当天),在windows下安装后并配置环

eclipse 上运行node.js express出现的问题解决

本人从昨天一直到现在都在搞node.js  成功安装express node.js supervisor  但在eclipse中建立node express工程出现了很多问题,网上查看了好多资料,头大,各种拼凑终于搞出来了 1:建立express 工程选择jade一直建立不成功, 不知道为什么  但是只要不选jade模板就直接可以建立 2:直接选择建立node工程,不管那个express了,建了之后里面只有空文件夹,不用管他, 3:利用cmd命令行将node工程转化成express工程,语句如下

Nodejs学习笔记(三)——一张图看懂Nodejs建站

前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试Nodejs>之后,代码编写环境就从Sublime转战到Eclipse下,感觉顺手多了.于是就跟着Scott老师学起了Nodejs建站的课程(推荐大家点进去看看),踏上了未爬先走的路子. 作为一个白里透白的小白来说,今天主要记录下如何用Nodejs搭建一个小小的网站,以及自己对于这种Nodejs建站的运

Eclipse下Nodejs项目配置步骤

Eclipse下Nodejs项目配置步骤 方式一: Eclipse开发环境搭建前提条件: 1)Node.js已安装ok,环境变量已配置,可以使用node -v来校验是否安装和配置成功(打开cmd命令窗口,输入node -v,如果正确安装正确,则会输出安装的Node.js版本号):成功了以后,在命令窗口下执行命令: npm -v ,若Node.js安装成功的话,npm也是安装成功的,因为Node.js已经自带npm. 2)Eclipse已安装ok. 搭建步骤: 1. Eclipse插件: