.net core和angular2之前端篇—1

　　今天的这篇文章还是一篇“Hello World”，只不过开发环境有所改变——Visual Studio Code+Angular2+Webapck，也算是正式的开篇了。

　　一、新建一个文件夹作为此次Demo的根目录，这里为：“F:\Visual Studio Code\app1”，并在“命令提示符中打开”，键入：dotnet new -t web 如下图：

　　说明：这不是一个空项目，作为一个demo，太罗嗦了！但是还不清楚如何如何创建空项目，如果有知道的，请不吝赐教！，这里对“Startup.cs”中的带代码做如下调整：

 1 // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 2     public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 3     { 4       loggerFactory.AddConsole(Configuration.GetSection("Logging")); 5       loggerFactory.AddDebug(); 6  7       if (env.IsDevelopment()) 8       { 9         app.UseDeveloperExceptionPage();10         app.UseDatabaseErrorPage();11         app.UseBrowserLink();12       }13       else14       {15         app.UseExceptionHandler("/Home/Error");16       }17       18       app.Use(async (context, next) =>19       {20         await next();21 22         if (context.Response.StatusCode == 40423           && !System.IO.Path.HasExtension(context.Request.Path.Value))24         {25           context.Request.Path = "/index.html";26           await next();27         }28       });29 30       app.UseStaticFiles();31 32       app.UseIdentity();33 34       // Add external authentication middleware below. To configure them please see https://go.microsoft.com/fwlink/?LinkID=53271535 36       app.UseMvc();37     }

Startup.cs

然后在命令行键入：dotnet restore 如下图

　　二、修改package.json，代码如下：

 1 { 2  "name": "webapplication", 3  "version": "0.0.0", 4  "private": true, 5  "scripts": { 6   "postinstall": "typings install", 7   "build": "webpack", 8   "start": "webpack-dev-server" 9  },10  "license": "ISC",11  "dependencies": {12   "@angular/common": "2.1.0",13   "@angular/compiler": "2.1.0",14   "@angular/core": "2.1.0",15  16   "@angular/platform-browser": "2.1.0",17   "@angular/platform-browser-dynamic": "2.1.0",18  19   "reflect-metadata": "^0.1.3",20   "rxjs": "5.0.0-beta.12",21   "zone.js": "^0.6.23"22  },23  "devDependencies": {24   "ts-loader": "0.8.2",25   "typescript": "2.0.3",26   "typings": "1.3.0",27   "webpack": "1.13.0",28   "webpack-dev-server": "1.14.1"29  }30 }

package.json

　　三、在根目录下依次新建tsconfig.json、typings.json、webpack.config.js三个文件，代码如下：

 1 { 2  "compilerOptions": { 3   "target": "es5", 4   "module": "commonjs", 5   "moduleResolution": "node", 6   "sourceMap": true, 7   "emitDecoratorMetadata": true, 8   "experimentalDecorators": true, 9   "removeComments": false,10   "noImplicitAny": false11  }12 }

tsconfig.json

1 {2  "globalDependencies": {3   "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"4  }5 }

typings.json

 1 var webpack = require("webpack"); 2  3 module.exports = { 4  entry: { 5   "app": "./typescript/main.ts" 6  }, 7  output: { 8   path: __dirname, 9   filename: "./wwwroot/js/[name].bundle.js"10  },11  resolve: {12   extensions: ['', '.ts', '.js']13  },14  devtool: 'source-map',15  module: {16   loaders: [17    {18     test: /\.ts/,19     loaders: ['ts-loader'],20     exclude: /node_modules/21    }22   ]23  },24  plugins: [25   new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"app", /* filename= */"./wwwroot/js/app.bundle.js")26  ]27 }

webpack.config.js

　　四、在根目录下新建目录“typescript”（用户存放ts文件），并依次新建app.component.ts、app.module.ts和main.ts三个文件，代码如下：

1 import {Component} from '@angular/core';2 3 @Component({4   selector: 'my-app',5   template: `<h1>My First Angular 2 App</h1>`6 })7 8 export class AppComponent {}

app.component.ts

 1 import {NgModule}   from '@angular/core'; 2 import {BrowserModule} from '@angular/platform-browser'; 3  4 import {AppComponent} from './app.component'; 5  6 @NgModule({ 7   imports:    [BrowserModule], 8   declarations:  [AppComponent], 9   bootstrap:   [AppComponent]10 })11 12 export class AppModule {}

app.module.ts

1 import 'reflect-metadata';2 import 'rxjs';3 import 'zone.js/dist/zone';4 5 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';6 import {AppModule} from './app.module'7 8 platformBrowserDynamic().bootstrapModule(AppModule);

main.ts

　　五、在命令行中键入“npm install”,安装文件包（安装了好多），如下图：

　　六、在命令行键入webpack 执行webpack任务，如下图：

　　七、在wwwroot目录下新建index.html，代码如下：

 1 <html> 2  <head> 3   <title>Angular QuickStart</title> 4   <meta charset="UTF-8"> 5   <meta name="viewport" content="width=device-width, initial-scale=1"> 6   <script src='/images/loading.gif' data-original="js/app.bundle.js"></script> 7  </head> 8  <body> 9   <my-app>Loading...</my-app>10  </body>11 </html>

index.html

　　八、按下“ctrl+shift+b”快捷键，按下图操作