形形色色Node工程Angular2

最近项目要用的

一些无关紧要的文件夹, 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', '');
        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的知识以及隐蔽工程有待完善.