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

形形色色Node工程

2024-08-27 02:57:21   223人阅读

最近项目要用的

技术分享

一些无关紧要的文件夹, 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=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工程


联系
我们