使用Visual Studio 2015构建Angular应用程序

时间:2016-09-28 19:34:35

标签: angular typescript visual-studio-2015

我正在尝试构建具有多个页面和路由配置的角度2应用程序。哪个是用于构建应用程序的最佳项目模板?

2 个答案:

答案 0 :(得分:0)

您可以查看此存储库,该存储库非常适合具有多个路径的项目(并进行一些测试等):https://github.com/mgechev/angular2-seed

我见过一些开发人员在Visual Studio中使用它。

答案 1 :(得分:0)

您只需要一个带有一个控制器/视图的简单ASP.NET MVC应用程序。

_Layout.cshtml的过去看起来像这样:

@* Polyfill(s) for older browsers *@
<script src="~/node_modules/web-animations-js/web-animations.min.js"></script>

@* https://github.com/angular/angular/issues/3333  *@
<script src="~/node_modules/intl/dist/Intl.min.js"></script>
<script src="~/node_modules/intl/locale-data/jsonp/en.js"></script>

<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/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>

<script>
    System.import('app').catch(function (err) { console.error(err); });
</script>

systemjs.config.js:

(function (global) {
    var config = {
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            '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',

            // angular testing umd bundles
            '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
            '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
            '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
            '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
            '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
            '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
            '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
            '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'app': { main: 'main.js', defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' },
        }
    };

    System.config(config);
})(this);