今天準備用angular+mvc創建一個項目，發現上次研究關於angular的東西全忘記了，突然想起上次我事後補了一篇博客的，看了一下也沒太回憶起來細節。
無奈，重新研究一邊，這次是一邊實踐一邊記錄的，希望再過段時間我再來看的時候，希望能有幫助。我想記錄博客目的也在於此。利於溫故。
你們要是覺得有用點個贊，沒用勿噴，謝謝！

1.創建MVC項目

2.創建angular項目

　　2.1首先安裝angular環境

　　　　下載安裝node.js和npm,下載地址：https://nodejs.org/en/download/（控制臺窗口中運行命令 node -v 和 npm -v 顯示版本號安裝成功）

　　　　安裝全局typescript，安裝命令： npm install -g typescript

　　　　安裝Angular CLI，安裝命令：npm install -g @angular/cli （測試是否安裝成功 ng -v）

　　　　
　　　　如果之前安裝過angular但是不能用，重新安裝之前執行如下操作，卸載angular，卸載命令：npm uninstall -g @angular/cli ,清緩存命令：npm cache clean

　　　　如果執行了上述指令還是沒用的話，建議執行玩命令，把npm文件下的node_modules\@angular文件夾刪除，再試試
　　　　

　　　　創建Angular項目運行指令 ng new 項目名稱 （例：ng new app1）
　　　　

　　　　項目創建成功，生成運行，執行如下指令：ng serve -open
　　　　

3.MVC+Angular 項目搭建成功，如圖紅框右擊還原程序包



　　3.1刪除多余文件。不用文件。你如果不確定刪除那些，建議參照官方實例地址：https://www.angular.cn/guide/setup
　　　　我的操作方法，把官方事例中的non-essential-files.txt文件放到我本地項目，在用命令執行他
　　　　for /f %i in (non-essential-files.txt) do del %i /F /S /Q
　　　　rd .git /s /q
　　　　rd e2e /s /q
　　3.2最終項目結構如圖，除了mvc還有紅框angular相關
　　　　

解決方法：systemjs.config.js中配置rxjs的路徑就好（下文僅供參考）

/**
 * 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/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-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/forms‘: ‘npm:@angular/forms/bundles/forms.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: {
                defaultExtension: ‘js‘,
                meta: {
                    ‘./*.js‘: {
                        loader: ‘systemjs-angular-loader.js‘
                    }
                }
            },
            ‘rxjs‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
            ‘rxjs/ajax‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
            ‘rxjs/operators‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
            ‘rxjs/testing‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
            ‘rxjs/webSocket‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
        }
    });
})(this);

相關資料導航：
http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html
https://www.angular.cn/guide/setup
https://www.youtube.com/watch?v=rbHSTJBhJ44
https://www.angular.cn/guide/visual-studio-2015

還沒完呢

最後的反思：上述只是一個項目搭建的流程，很多深層次原理的東西還是不懂，慢慢在學習和實踐中總結。
（確實不會寫博客，感覺像流水賬，哈哈）

Angular for MVC—項目搭建（1）