形形色色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的知识以及隐蔽工程有待完善.

巴特西

形形色色Node工程Angular2

最新文章

热门文章