Various node projects

The most recent project to use

Some trivial folders, demo is some examples, dist is the code released after Webpack packaging, server is started with node service, typings and tsconfig are some TS configuration.

NPM install node_modules dependent.

NPM start runs from the webpack.config specified by Package.json.

    " Start " " concurrently \ "Webpack--watch--colors\" \ "Nodemon server/main.js\" "

varWebpack = require ('Webpack');varHtmlwebpackplugin = 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: [Newhtmlwebpackplugin ({Template:'./app/index.html'    }),    NewWebpack.optimize.CommonsChunkPlugin ({name:"Vendor",        //filename: ' vendor_[chunkhash].js ',FileName:'Js/vendor.js', minchunks:infinity}),/*New Webpack.optimize.UglifyJsPlugin ({compress: {warnings:false}}),*/    NewWebpack. Defineplugin ({app: {environment:JSON.stringify (Process.env.APP_ENVIRONMENT||'Development')      }    })  ]};

Webpack.config

Webpack entrance to Main.ts

 from ' @angular/platform-browser-dynamic '  from'./app.module';p latformbrowserdynamic (). Bootstrapmodule ( Appmodule);

Main.ts Import./app.module.ts (the suffix name can be omitted when importing and require) use the Bootstrapmodule method to start Appmodule

Import angular base modules and custom components and routing components in module APP.MODULE.TS.

Import'./polyfills'; import {browsermodule} from "@angular/platform-browser"; import {ngmodule} from "@angular/core"; import {HttpModule} from '@angular/http';//form bidirectional data bindingImport {AppComponent} from "./app.component"; import {homecomponent, testcomponent} from './component';//RoutingImport 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: [Loggerse Rvice, Globalservice, Uihelperservice], bootstrap: [AppComponent]}) exportclassAppmodule {}

app.module.ts

Custom components If you are dividing pages, such as Homecomponent, testcomponent, you can subdivide the functional components internally.

For example, the above

 from ' ./component ';

After importing the page component in Appmodule, you can implement a page jump in the HTML template by routing it in App.routes.ts.

 Import {routermodule, Routes} from    @angular/router   " ;import {homecomponent, testcomponent}  from    ./component     const  routes = [{path:   "   test   "  default  Routermodule.forroot ( routes); 

In Component.ts

 from ' ./app.component '  from './components/home/home.component' from ' ./components/test/test.component '

Unified export component, module in the unified import or require, this is the structure of this engineering organization.

Appmodule finally also export an object for use.

The home component mentioned above has a template file in addition to 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}) ExportclassHomecomponent implements oninit{errormessage:string;        Homedata:any; Constructor (Private_globalservice:globalservice,Private_uihelperservice:uihelperservice) {} ngoninit () {Let requestparams=NewUrlsearchparams (); Requestparams.Set('ID','11111');  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

The service component that encapsulates the Ajax method is imported, specifying the template file location import {htmltemplate} from './home.component.html ';

const htmltemplate = '    class='row'>{{homedata?. name}}</div>    <a [routerlink]="['/test ']"> Switch to test page </a>' ;

The middle a tag is inserted in the route flag ' test ', the {{interpolation variable}} syntax in the div will vary depending on the dependency package, here is a question mark?

Routing Goes to test

Import {Component} from "@angular/core"; import {htmltemplate} from './test.component.html'; @Component ({selector:'Test', Styles: ["'], template:htmltemplate}) exportclasstestcomponent{Constructor () {//this.name = ' world ';    }}

Read template

const htmltemplate = '    class='row'>            I am Test     </div>';

The logic of the front desk is basically like this, more knowledge about node and hidden engineering needs to be perfected.

Various node projects