Asp.net

帶有 ASP .NET 4.5.1 的 AngularJs 2

  • April 26, 2017

我想將 Angular 2 用於現有 ASP.NET 4 應用程序的前端,即不是 MVC 6/ASP.NET CORE,而且我寧願不使用 node,因為我們已經使用 nuget 作為我們的包管理器。有誰知道任何可以指導我完成此任務的資源?

為了回答我最初的問題,這就是我們如何設法讓 Angular 2 啟動並與 .net 4.5.1 一起執行(我們最終不得不使用 npm)。

在 _Layout.cshtml 的標頭檔中,從 cdn 導入 Angular 2 文件並配置 SystemJs。

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<script src="../../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
 System.config({
   packages: {
       'my-app': {
       format: 'register',
       defaultExtension: 'js'
     }
   }
 });
   System.import('my-app/main')
       .then(null, console.error.bind(console));
</script>

在項目的路由中添加了 package.json 和 tsconfig.json

包.json:

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
 "tsc": "tsc",
 "tsc:w": "tsc -w",
 "typings": "typings",
 "postinstall": "typings install"
 },
"license": "ISC",
"dependencies": {
 "angular2": "2.0.0-beta.9",
 "systemjs": "0.19.24",
 "es6-promise": "^3.0.2",
 "es6-shim": "^0.35.0",
 "reflect-metadata": "0.1.2",
 "rxjs": "5.0.0-beta.2",
 "zone.js": "0.5.15"
},
"devDependencies": {
 "typescript": "^1.8.7",
 "typings": "^0.7.5"
 }
}

tsconfig.json:

{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

如果你的機器上安裝了 node 和 npm,它應該會自動下載你需要的 npm 模組,並將它們保存在 node_modules 文件夾中。您現在應該準備好設置一個 Angular 2 應用程序,我們使用this開始。

引用自:https://stackoverflow.com/questions/35990812