Various node projects

Source: Internet
Author: User

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 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 {}

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); }}

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 () {// = ' 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.