1. Tạo mới project ASP.NET MVC và AngularJS 2.
Mở Visual Studio, ở đây Kiên đang sử dụng Visual Studio 2015 Community và tiến hành tạo mới project ASP.NET Web Application (.NET Framework).
Đặt tên cho project là AngularJs4.
Trong phần Select a template, chọn MVC. Sau đó click OK.
Chờ một lúc để Visual Studio khởi tạo project. Hình bên dưới là cấu trúc project ASP.NET MVC với AngularJS 2 đã được tạo ra.
2. Setup môi trường cho AngularJS 2.
- Thêm package.json (npm Configuration file). File này sử dụng npm (NodeJS) để load các packages cần thiết dùng cho AngularsJS 2.
Trong trường hợp các bạn chưa cài đặt NodeJS, vào https://nodejs.org/ để cài đặt phiên bản mới nhất.
Ngoài ra để tìm hiểu thêm về npm, đọc ở đây.
- Thêm tsconfig.json (TypeScript configuration file). File này dùng để cấu hình trong việc biên dịch các file TypeScript (ts) sang Javascript (js) để chúng có thể chạy được trên các browser.
Bạn cũng cần phải cài đặt phiên bản mới nhất của TypeScript Ở ĐÂY, hoặc nếu bạn đã cài đặt NodeJS thì có thể dùng npm và gõ lệnh:
npm install -g TypeScript.
- Thêm systemjs.config.js. File này dùng để cấu hình client-side load các packages lên browser.
Để cấu hình nhanh và chính xác, cách tốt nhất là vào trang AngularJS 2 Tutorial, download phần example và tiến hành copy các files đã nói ở trên vào project của chúng ta.
Hình bên dưới là cấu trúc thư mục của phần example đã download và giải nén.
Copy các files:
package.json
tslink.json
bsconfig.json
src/tsconfig.json
src/systemjs.config.js
src/systemjs-angular-loader.js
vào project ASP.NET MVC của chúng ta.
Trong file package.json, tìm và xóa các đoạn text "src" vì thư mục gốc không phải là src như trong phần example. Nội dụng file sau khi cập nhật như bên dưới:
{
"name": "angular-io-example",
"version": "1.0.0",
"private": true,
"description": "Example project from an angular.io guide.",
"scripts": {
"test:once": "karma start karma.conf.js --single-run",
"build": "tsc -p /",
"serve": "lite-server -c=bs-config.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"build:watch": "tsc -p / -w",
"build:upgrade": "tsc",
"serve:upgrade": "http-server",
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"serve:aot": "lite-server -c bs-config.aot.json",
"build:babel": "babel -d --extensions \".es6\" --source-maps",
"copy-dist-files": "node ./copy-dist-files.js",
"i18n": "ng-xi18n",
"lint": "tslint .//**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "~4.2.0",
"@angular/common": "~4.2.0",
"@angular/compiler": "~4.2.0",
"@angular/compiler-cli": "~4.2.0",
"@angular/core": "~4.2.0",
"@angular/forms": "~4.2.0",
"@angular/http": "~4.2.0",
"@angular/platform-browser": "~4.2.0",
"@angular/platform-browser-dynamic": "~4.2.0",
"@angular/platform-server": "~4.2.0",
"@angular/router": "~4.2.0",
"@angular/tsc-wrapped": "~4.2.0",
"@angular/upgrade": "~4.2.0",
"angular-in-memory-web-api": "~0.3.2",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"systemjs": "0.19.39",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@types/angular": "^1.5.16",
"@types/angular-animate": "^1.5.5",
"@types/angular-cookies": "^1.4.2",
"@types/angular-mocks": "^1.5.5",
"@types/angular-resource": "^1.5.6",
"@types/angular-route": "^1.3.2",
"@types/angular-sanitize": "^1.3.3",
"@types/jasmine": "2.5.36",
"@types/node": "^6.0.45",
"babel-cli": "^6.16.0",
"babel-preset-angular2": "^0.0.2",
"babel-preset-es2015": "^6.16.0",
"canonical-path": "0.0.2",
"concurrently": "^3.0.0",
"http-server": "^0.9.0",
"jasmine": "~2.4.1",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.2",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "~5.1.0",
"rollup": "^0.41.6",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"source-map-explorer": "^1.3.2",
"tslint": "^3.15.1",
"typescript": "~2.3.2"
},
"repository": {}
}
Tương tự trong file bsconfig.json, tìm và xóa đoạn text "src".
{
"server": {
"baseDir": "",
"routes": {
"/node_modules": "node_modules"
}
}
}
File tsconfig.json.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/@types/"
]
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}
File systemjs.config.js.
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
Click phải lên file package.json, chọn Restore Packages để tiến hành cài đặt các packages của AngularJS 2 dùng cho project ASP.NET MVC của chúng ta.
Chờ trong giây lát, khi quá trình cài đặt package hoàn tất, trong Solution Explorer, click Show All Files, chúng ta sẽ thấy có một thư mục node_modules xuất hiện như hình bên dưới. Chú ý là chúng ta không include thư mục node_modules này vào project ASP.NET MVC.
3. Thêm các file TypeScript (ts) để bootstrap Angular 2 vào ASP.NET MVC.
Trong project của chúng ta, tạo mới folder và đặt tên là app như trong file systemjs.config.js đã khai báo.
map: {
// our app is within the app folder
'app': 'app', - app.module.ts: dùng để định nghĩa ra các module.
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 { } import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<h1>Page Says: {{text}}</h1>'
})
export class AppComponent { text = 'Hello World'; }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
4. Cập nhật các file cshtml để load và render Angular 2.
Mở file Views\Shared\_Layout.cshtml, trong tag <head></head> bổ sung các scripts như đoạn code bên dưới.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
Mở file Views\Home\Index.cshtml, cập nhật lại như đoạn code bên dưới:
@{
ViewBag.Title = "Home Page";
}
<app>loading...</app>
Tag <app></app> đã được định nghĩa trong selector: 'app' trong file app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<h1>Page Says: {{text}}</h1>'
})
export class AppComponent { text = 'Hello World'; }
Cuối cùng tiến hành build và chạy thử (F5).
Source code tham khào ở đây
--------
Share to be shared
--------
