ASP.NET Core

设置

安装 ASP.NET Core 和 TypeScript

First,install ASP.NET Coreif you need it. This quick-start guide uses Visual Studio, which means that you’ll need Visual Studio 2015 in order to use ASP.NET Core.

Next, if your version of Visual Studio does not already have TypeScript, you can install it forVisual Studio 2015.

创建新项目

  1. 选择 File
  2. 选择 New Project (Ctrl + Shift + N)
  3. 选择 Visual C#

  4. 选择 ASP.NET Web Application

  5. 选择 ASP.NET 5 Empty

    Let’s uncheck “Host in the cloud” since we’re going to run this locally.

Run the application and make sure that it works.

设置服务器

Inproject.jsonadd another entry in"dependencies":

"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"

The resulting dependencies should look like this:

"dependencies": {
    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
  },

Replace the body ofConfigureinStartup.cswith

public void Configure(IApplicationBuilder app)
{
    app.UseIISPlatformHandler();
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

添加 TypeScript

The next step is to add a folder for TypeScript.

We’ll just call itscripts.

添加 TypeScript 代码

Right click onscriptsand clickNew Item. Then chooseTypeScript File(it may be in the .NET Core section) and name the fileapp.ts.

Add example code

Type the following code into app.ts.

function
sayHello
(
) 
{

const
 compiler = (
document
.getElementById(
"compiler"
) as HTMLInputElement).value;

const
 framework = (
document
.getElementById(
"framework"
) as HTMLInputElement).value;

return
 `Hello from ${compiler} and ${framework}!`;
}

Set up the build

Configure the TypeScript compiler

First we need to tell TypeScript how to build. Right click on the scripts folder and clickNew Item. Then chooseTypeScript Configuration Fileand use the default nametsconfig.json.

Replace the defaulttsconfig.jsonwith the following:

{
  "compilerOptions": {
      "noImplicitAny": true,
      "noEmitOnError": true,
      "sourceMap": true,
      "target": "es5"
  },
  "files": [
      "./app.ts"
  ],
  "compileOnSave": true
}

This is similar to the default, with the following differences:

  1. It sets "noImplicitAny": true .
  2. It explicitly lists "files" instead of relying on "excludes" .
  3. It sets "compileOnSave": true .

"noImplicitAny"is good idea whenever you’re writing new code — you can make sure that you don’t write any untyped code by mistake."compileOnSave"makes it easy to update your code in a running web app.

Set up NPM

Now we need to set up NPM so we can download JavaScript packages. Right click on the project and clickNew Item. Then chooseNPM Configuration Fileand use the default namepackage.json. Inside"devDependencies"add “gulp” and “del”:

"devDependencies": {
    "gulp": "3.9.0",
    "del": "2.2.0"
}

Visual Studio should start installing gulp and del as soon as you save the file. If not, right-click package.json and thenRestore Packages.

Set up gulp

Finally, add a new JavaScript file namedgulpfile.js. Put the following code inside:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
    scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
};

gulp.task('clean', function () {
    return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', function () {
    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
});

The first line tells Visual Studio to run the task ‘default’ after the build finishes. It will also run the ‘clean’ task when you ask Visual Studio to clean the build.

Now right-click ongulpfile.jsand clickTask Runner Explorer. If ‘default’ and ‘clean’ tasks don’t show up, refresh the explorer:

Write an HTML page

Add a New Item namedindex.htmlinsidewwwroot. Use the following code forindex.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/app.js"></script>
    <title></title>
</head>
<body>
    <div id="message"></div>
    <div>
        Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
        Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
    </div>
</body>
</html>

Test

  1. Run the project.
  2. You should see a message when you type in the input boxes:

Debug

  1. In Edge, press F12 and click the Debugger tab.
  2. Look in the first localhost folder, then src/app.ts
  3. Put a breakpoint on the line with return .
  4. Type in the boxes and confirm that the breakpoint hits in TypeScript code and that inspection works correctly.

That’s all you need to know to include basic TypeScript in your ASP.NET project. Next we’ll include Angular and write a simple Angular app.

Add Angular 2

Add NPM dependencies

Add the following"dependencies"topackage.jsonto install Angular 2 and SystemJS:

 "dependencies": {
    "angular2": "2.0.0-beta.11",
    "systemjs": "0.19.24",
  },

Update tsconfig.json

Now that Angular 2 and its dependencies are installed, we need to enable TypeScript’s experimental support for decorators. We also need to add declarations for ES2015, since Angular uses core-js for things likePromise. In the future decorators will be the default and these settings will not be needed.

Add"experimentalDecorators": true, "emitDecoratorMetadata": trueto the"compilerOptions"section. Next, add"lib": ["es2015", "es5", "dom"]to"compilerOptions"as well to bring in declarations from ES2015. Finally, we’ll need to add a new entry in"files"for another file,"./model.ts", which we’ll create. Our tsconfig should now look like this:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "noEmitOnError": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "target": "es5",
        "lib": [
            "es2015", "es5", "dom"
        ]
    },
    "files": [
        "./app.ts",
        "./model.ts",
        "./main.ts",
    ],
    "compileOnSave": true
}

Add Angular to the gulp build

Finally, we need to make sure that the Angular files are copied as part of the build. We need to add:

  1. The paths to the library files.
  2. Add a lib task to pipe the files to wwwroot .
  3. Add a dependendency on lib to the default task.

The updatedgulpfile.jsshould look like this:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var paths = {
    scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
    libs: ['node_modules/angular2/bundles/angular2.js',
           'node_modules/angular2/bundles/angular2-polyfills.js',
           'node_modules/systemjs/dist/system.src.js',
           'node_modules/rxjs/bundles/Rx.js']
};

gulp.task('lib', function () {
    gulp.src(paths.libs).pipe(gulp.dest('wwwroot/scripts/lib'))
});

gulp.task('clean', function () {
    return del(['wwwroot/scripts/**/*']);
});

gulp.task('default', ['lib'], function () {
    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'))
});

Again, make sure that Task Runner Explorer sees the newlibtask after you save the gulpfile.

Write a simple Angular app in TypeScript

First, change the code inapp.tsto:

import {Component} from "angular2/core"
import {MyModel} from "./model"

@Component({
    selector: `my-app`,
    template: `<div>Hello from </div>`
})
class MyApp {
    model = new MyModel();
    getCompiler() {
        return this.model.compiler;
    }
}

Then add another TypeScript file insrcnamedmodel.ts:

export class MyModel {
    compiler = "TypeScript";
}

And then another TypeScript file insrcnamedmain.ts:

import {bootstrap} from "angular2/platform/browser";
import {MyApp} from "./app";
bootstrap(MyApp);

Finally, change the code inindex.htmlto the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/lib/angular2-polyfills.js"></script>
    <script src="scripts/lib/system.src.js"></script>
    <script src="scripts/lib/rx.js"></script>
    <script src="scripts/lib/angular2.js"></script>
    <script>
    System.config({
        packages: {
            'scripts': {
                format: 'cjs',
                defaultExtension: 'js'
            }
        }
    });
    System.import('scripts/main').then(null, console.error.bind(console));
    </script>
    <title></title>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

This loads the app. When you run the ASP.NET application you should see a div that says “Loading…” and then updates to say “Hello from TypeScript”.

results matching ""

    No results matching ""