.net core和angular2之前端篇—1

　　2016-10-20更新

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

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

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

 // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
         {
             loggerFactory.AddConsole(Configuration.GetSection("Logging"));
             loggerFactory.AddDebug();

             if (env.IsDevelopment())
             {
                 app.UseDeveloperExceptionPage();
                 app.UseDatabaseErrorPage();
                 app.UseBrowserLink();
             }
             else
             {
                 app.UseExceptionHandler("/Home/Error");
             }

             app.Use(async (context, next) =>
             {
                 await next();

                 if (context.Response.StatusCode ==
                     && !System.IO.Path.HasExtension(context.Request.Path.Value))
                 {
                     context.Request.Path = "/index.html";
                     await next();
                 }
             });

             app.UseStaticFiles();

             app.UseIdentity();

             // Add external authentication middleware below. To configure them please see https://go.microsoft.com/fwlink/?LinkID=532715

             app.UseMvc();
         }

Startup.cs

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

　　二、修改package.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.0",
     "@angular/compiler": "2.1.0",
     "@angular/core": "2.1.0",

     "@angular/platform-browser": "2.1.0",
     "@angular/platform-browser-dynamic": "2.1.0",

     "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

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

 {
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false
   }
 }

tsconfig.json

 {
   "globalDependencies": {
     "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
   }
 }

typings.json

 var webpack = require("webpack");

 module.exports = {
   entry: {
     "vendor": "./typescript/vendor.ts",
     "app": "./typescript/main.ts"
   },
   output: {
     path: __dirname,
     filename: "./wwwroot/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: [
     new webpack.optimize.CommonsChunkPlugin({
       name: ['app', 'vendor']
     })
   ]
 }

webapck.config.js

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

 import {Component} from '@angular/core';

 @Component({
     selector: 'my-app',
     template: `<h1>My First Angular 2 App</h1>`
 })

 export class AppComponent {}

app.component.ts

 import {NgModule}      from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';

 import {AppComponent}  from './app.component';

 @NgModule({
     imports:        [BrowserModule],
     declarations:   [AppComponent],
     bootstrap:      [AppComponent]
 })

 export class AppModule {}

app.module.ts

 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app.module'

 platformBrowserDynamic().bootstrapModule(AppModule);

main.ts

 // Angular
 import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';

 // RxJS
 import 'reflect-metadata';
 import 'rxjs';
 import 'zone.js/dist/zone';

 // Other vendors for example jQuery, Lodash or Bootstrap
 // You can import js, ts, css, sass, ...

vendor.ts

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

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

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

 <!DOCTYPE html>
 <html>
   <head>
     <base href="/">
     <title>Angular With Webpack</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
     <my-app>Loading...</my-app>
   <script type="text/javascript" src="js/vendor.bundle.js"></script>
   <script type="text/javascript" src="js/app.bundle.js"></script></body>
 </html>

index.html

　　八、在命令行键入dotnet run,如下图：

　　九、最后在浏览器键入：http://localhost:5000/  如下图：

　　至此又一个Hello World结束了，哈哈！

　　更新：2016-10-17

　　今天在公司测试的时候，发现了一个问题，Hello World出不来，再次说明一下，回去再看看是什么问题！惭愧啊！