Angular for MVC—項目搭建（1）

今天準備用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相關
　　　　
4.vs直接運行效果展現


總結：以前咱們咱們的開發方式是，angular每次都要經過命令生成使用，這種方式的好處直接在VS中便可生成使用，提高開發速度。
注意點：按照官方案例可能會報錯，如圖

解決方法：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

還沒完呢

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