今天准备用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
    我的操作方法,把官方事例中的nonessentialfiles.txt文件放到我本地项目,在用命令执行他
    for /f %i in (nonessentialfiles.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

还没完呢

最后的反思:上述只是一个项目搭建的流程,很多深层次原理的东西还是不懂,慢慢在学习和实践中总结。
(确实不会写博客,感觉像流水账,哈哈)

 

 

 

 

    
   

    

 

    

 

 

版权声明:本文为isWhile原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/isWhile/p/9482218.html