Previous. NET core and ANGULAR2-1 used the dotnet template. I used it because I wanted to write a webapi, but I wrote the next one when I had some problems, so I wrote a branch test first. This time with node as the server--webpack-dev-server. Feel the demo is so easy!
First, create a new project directory, here for F:\Visual Studio Code\app1
Second, add the JSON configuration file under the project root: Package.json, Tsconfig.json, Typings.json
{ "Name": "WebApplication", "Version": "0.0.0", "Private":true, "Scripts": { "Postinstall": "Typings Install", "Build": "Webpack", "Start": "Webpack-dev-server" }, "License": "ISC", "Dependencies": { "@angular/common": "2.1.1", "@angular/compiler": "2.1.1", "@angular/core": "2.1.1", "@angular/forms": "^2.1.1", "@angular/http": "^2.1.1", "@angular/platform-browser": "2.1.1", "@angular/platform-browser-dynamic": "2.1.1", "Reflect-metadata": "^0.1.3", "Rxjs": "5.0.0-beta.12", "Zone.js": "^0.6.23" }, "Devdependencies": { "Angular2-template-loader": "^0.4.0", "Awesome-typescript-loader": "^2.2.4", "Typescript": "^2.0.3", "Typings": "^1.3.2", "Webpack": "^1.13.0", "Webpack-dev-server": "^1.14.1" }}Package.json
{ "compileroptions": { "target": "ES5", "module": "Commonjs", "moduleresolution": "Node", true, true, true, false, false }}{ "globaldependencies": { "Es6-shim": "Github:definitelytyped/definitelytyped/es6-shim /es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd " }}Third, add webpack configuration file Webpack.config.js
varWebpack = require ("Webpack"); Module.exports={entry: {"Vendor": "./typescript/vendor.ts", "App": "./typescript/main.ts"}, Output: {path: __dirname, FileName:"./js/[name].bundle.js"}, Resolve: {extensions: [', '. ts ', '. js ']}, Devtool:' Source-map ', module: {loaders: [{test:/\.ts/, loaders: [' Awesome-typescript-loader ', ' Angular2-template-loader '], exclude:/node_modules/}]}, plugins: [NewWebpack.optimize.CommonsChunkPlugin ({name: [' App ', ' Vendor '] }) ]}Webpack.config.js
Iv. adding the main page face index.html
<!DOCTYPE HTML><HTML> <Head> <Basehref="/"> <title>Angular with Webpack</title> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> </Head> <Body> <My-app>Loading ...</My-app>1111111111111111111111<Scripttype= "Text/javascript"src= "Js/vendor.bundle.js"></Script> <Scripttype= "Text/javascript"src= "Js/app.bundle.js"></Script></Body></HTML>index.html
V. Create a new directory "Typescript" (user holds TS file) under the root directory, and then create the new App.component.ts, App.module.ts, Main.ts, and vendor.ts four files
Import {Component} from ' @angular/core '; @Component ({ ' My-app ', ' }) export class AppComponent {}Import {Ngmodule} from ' @angular/core '@angular/platform-browser '; import {AppComponent} './app.component '; @NgModule ({ imports: [browsermodule], declarations: [ AppComponent], bootstrap: [AppComponent]}) Export class Appmodule {}Import {platformbrowserdynamic} from ' @angular/platform-browser-dynamic'./app.module ' Platformbrowserdynamic (). Bootstrapmodule (appmodule);vendor.ts// AngularImport ' @angular/platform-browser '@angular/platform-browser-dynamic' @ angular/core ' @angular/common '; // RxJSImport ' reflect-metadata' RxJS' Zone.js/dist/zone '; // Other Vendors For example JQuery, Lodash or Bootstrap // You can import js, ts, CSS, sass, ...
The preparation is done, then just type two commands at the command line (NPM install, NPM start), as follows:
As shown, the listening port is 8080, in the browser input http://localhost:8080/, such as:
This is the simplest example of a ANGULAR2 demo.
Angular2 previous End -1 (node server branch)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
