.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             else
14             {
15                 app.UseExceptionHandler("/Home/Error");
16             }
17             
18             app.Use(async (context, next) =>
19             {
20                 await next();
21 
22                 if (context.Response.StatusCode == 404
23                     && !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=532715
35 
36             app.UseMvc();
37         }

然後在命令行鍵入：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 }

　　三、在根目錄下依次新建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": false
11   }
12 }

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

 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 }

　　四、在根目錄下新建目錄“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 {}

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

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

　　五、在命令行中鍵入“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="js/app.bundle.js"></script>
 7   </head>
 8   <body>
 9     <my-app>Loading...</my-app>
10   </body>
11 </html>

　　八、按下“ctrl+shift+b”快捷鍵，按下圖操作

　　九、在命令行鍵入dotnet run,如下圖：

　　十、最後在瀏覽器鍵入：http://localhost:5000/  如下圖：

　　至此又一個Hello World結束了，哈哈！