ASP.NET CoreとAngular 2両剣がマッチ
16597 ワード
(この文章は同時に本人の微信の公衆番号「dotNET毎日精華文章」に発表され、右のQRコードに注目してください.)
題記:まだ正式に発表されていない2つのものを一緒に使うと、どんな効果がありますか?
効果はもちろんいいですが、ASPではどうすればいいですか.NET CoreにはAngular 2が統合されていますか?Nicolas Bello Camillettiの文章は、いくつかのテクニックを共有しています.
マイクロソフトの新しいWeb開発フレームワークとして、ASP.NET Coreプロジェクトの構造はnodeだけではない.jsは、npmやbower(依存管理やインストール用)、gulpがタスク実行用などのクライアントライブラリのインストールとタスク実行を支援するために、多くのサードパーティのオープンソースツールを利用しています.
だからASP.NET CoreプロジェクトでAngular 2をインストールするのも自然とnpmで行いますよね.具体的な手順は次のとおりです. VS 2015またはyeomanによりASPを新規作成する.NET CoreのWebプロジェクト VS 2015でプロジェクト下の「Dependencies」を展開し、「npm」で右クリックして「Open package.json」を選択するか、プロジェクトフォルダに直接packageを開く.jsonファイル packageを編集します.jsonファイルは、devDependenciesの下に「angular 2」の構成(私がこの文章を書いたとき、バージョン番号は「2.0.0-beta.9」)と「systemjs」(軽量級ES 6モジュールローダ)を追加し、保存し、VSはnpm installを自動的に呼び出してangularとその依存パッケージをインストールします. npmによって導入されたパケットはnode_にのみダウンロードされるmodulesではgulpタスクで必要なファイルcopyをwwwrootの下に移動してブラウザにアクセスする必要があります.このときgulpfileを開きます.jsこのファイルは、ファイルの末尾に次のコードを追加します: gulpfileで手動で通過できます.jsファイル上で右クリックTask Runner Explorerを選択して「copy-deps」を実行し、このタスクをprojectに追加することもできます.jsonのscripts/prepublishの中. どんな方法を採用しても、今wwwroot/lib/npmlibsの下にangular 2関連jsファイルが現れています.Layout.に引用する必要があります.cshtml(headが終了する前に): これでAngular 2はASPに追加する.NET Coreプロジェクトに当たりました.TypeScriptで作成するAngular 2コードを使用する場合は、VS 2015の新しいファイルの追加機能でtsconfigを追加する必要があります.jsonファイル(TypeScript JSONコンフィギュレーションFile)は、修飾宣言を追加し、モジュールローダとしてsystemjsを構成します.完全なコードは次のとおりです: TypeScriptサポートを追加すると、es 6-shimのDefinitelyType定義が導入されていないため、コンパイルエラーが発生します.定義を導入するには、プロジェクト上でコマンドラインを開き、tsd(TypeScript Definition manager)をインストールするために「 これにより、Angular 2のコンポーネントを記述するためにTypeScriptを使用することができます.コンポーネントコードは次のようになります(wwwroot/app/app.component.ts): wwwroot/appにbootを追加する.tsファイルはAngular 2アプリケーションの起動点として: その後、ビューにsystemjsを介してこれらのコンポーネントをロードします(私たちのコンポーネントのセレクタはmy-appであるため、 のようなHTMLタグを追加することを覚えています): 最後にASPで完成しましたNET CoreでAngular 2アプリケーションの基本コード構造を開発しました(デバッグ時にIEを使用しないように注意してください.そうしないとエラーが発生します.EdgeやChromeなどしか使用できません).
題記:まだ正式に発表されていない2つのものを一緒に使うと、どんな効果がありますか?
効果はもちろんいいですが、ASPではどうすればいいですか.NET CoreにはAngular 2が統合されていますか?Nicolas Bello Camillettiの文章は、いくつかのテクニックを共有しています.
マイクロソフトの新しいWeb開発フレームワークとして、ASP.NET Coreプロジェクトの構造はnodeだけではない.jsは、npmやbower(依存管理やインストール用)、gulpがタスク実行用などのクライアントライブラリのインストールとタスク実行を支援するために、多くのサードパーティのオープンソースツールを利用しています.
だからASP.NET CoreプロジェクトでAngular 2をインストールするのも自然とnpmで行いますよね.具体的な手順は次のとおりです.
1: paths.npmSrc = "./node_modules/";
2: paths.npmLibs = paths.webroot + "lib/npmlibs/";
3:
4: gulp.task("copy-deps:systemjs", function () {
5: return gulp.src(paths.npmSrc + '/systemjs/dist/**/*.*', { base: paths.npmSrc + '/systemjs/dist/' })
6: .pipe(gulp.dest(paths.npmLibs + '/systemjs/'));
7: });
8:
9: gulp.task("copy-deps:angular2", function () {
10: return gulp.src(paths.npmSrc + '/angular2/bundles/**/*.js', { base: paths.npmSrc + '/angular2/bundles/' })
11: .pipe(gulp.dest(paths.npmLibs + '/angular2/'));
12: });
13:
14: gulp.task("copy-deps:es6-shim", function () {
15: return gulp.src(paths.npmSrc + '/es6-shim/es6-sh*', { base: paths.npmSrc + '/es6-shim/' })
16: .pipe(gulp.dest(paths.npmLibs + '/es6-shim/'));
17: });
18:
19: gulp.task("copy-deps:rxjs", function () {
20: return gulp.src(paths.npmSrc + '/rxjs/bundles/*.*', { base: paths.npmSrc + '/rxjs/bundles/' })
21: .pipe(gulp.dest(paths.npmLibs + '/rxjs/'));
22: });
23:
24: gulp.task("copy-deps", ["copy-deps:rxjs", 'copy-deps:angular2', 'copy-deps:systemjs', 'copy-deps:es6-shim']);
1: <environment names="Development">
2: <script src="~/lib/npmlibs/es6-shim/es6-shim.js"></script>
3: <script src="~/lib/npmlibs/systemjs/system-polyfills.src.js"></script>
4: <script src="~/lib/npmlibs/angular2/angular2-polyfills.js"></script>
5: <script src="~/lib/npmlibs/systemjs/system.src.js"></script>
6: <script src="~/lib/npmlibs/rxjs/Rx.js"></script>
7: <script src="~/lib/npmlibs/angular2/angular2.js"></script>
8: <script src="~/lib/npmlibs/angular2/router.js"></script>
9: </environment>
10:
11: <environment names="Staging,Production">
12: <script src="~/lib/npmlibs/es6-shim/es6-shim.min.js"></script>
13: <script src="~/lib/npmlibs/systemjs/system-polyfills.js"></script>
14: <script src="~/lib/npmlibs/angular2/angular2-polyfills.min.js"></script>
15: <script src="~/lib/npmlibs/systemjs/system.src.js"></script>
16: <script src="~/lib/npmlibs/rxjs/Rx.min.js"></script>
17: <script src="~/lib/npmlibs/angular2/angular2.min.js"></script>
18: <script src="~/lib/npmlibs/angular2/router.min.js"></script>
19: </environment>
1: {
2: "compilerOptions": {
3: "noImplicitAny": false,
4: "noEmitOnError": true,
5: "removeComments": false,
6: "sourceMap": true,
7: "target": "es5",
8: "emitDecoratorMetadata": true,
9: "experimentalDecorators": true,
10: "module": "system",
11: "moduleResolution": "node"
12: },
13: "exclude": [
14: "node_modules",
15: "wwwroot/lib"
16: ]
17: }
npm install tsd --save-dev
」を実行し、es 6-shimのTS定義をインストールするために「tsd install es6-shim --save
」を実行する必要があります.これでコンパイルエラーの問題を解決できます. 1: import {Component} from 'angular2/core';
2:
3: @Component({
4: selector: 'my-app',
5: template: '<h1>My First Angular 2 App</h1>'
6: })
7: export class AppComponent { }
1: import {bootstrap} from 'angular2/platform/browser'
2: import {AppComponent} from './app.component'
3:
4: bootstrap(AppComponent);
1: @section Scripts {
2: <script>
3: System.config({
4: packages: {
5: 'app': { defaultExtension: 'js' },
6: 'lib': { defaultExtension: 'js' },
7: },
8: });
9:
10: System.import('app/boot')
11: .then(null, console.error.bind(console));
12: </script>
13: }