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

还没完呢

最后的反思：上述只是一个项目搭建的流程，不少深层次原理的东西仍是不懂，慢慢在学习和实践中总结。（确实不会写博客，感受像流水帐，哈哈）