首页 > 代码库 > 形形色色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设入口为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 {}
自定义组件如果是以页面为划分,比如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 ); }}
其中导入了封装有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工程