首页 > 代码库 > 形形色色Node工程

形形色色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.componentexport * from ./components/home/home.componentexport * 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=http://www.mamicode.com/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的知识以及隐蔽工程有待完善.

形形色色Node工程