Question

我们的团队中有几个项目，但是它们都具有相同的体系结构，最近我们决定在所有项目中实施捆绑和最小化。

因此我们将AngularJS与ASP.Net Web API一起使用，并且我们不使用ASP.Net MVC，因此没有Razor或.cshtml。

在我们用于存储AngularJS文件的App文件夹中，我们有此Index.html文件，在其中我们引用了load-js-css.js文件，在load-js-css.js中有此功能可以与App / main.js一起加载CSS文件：

function loadcssfile(filename, filetype) {
if (filetype == "js") {
    var fileref = document.createElement("script")
    fileref.setAttribute("data-main", "App/main.js")
    fileref.setAttribute("src", filename + "?v=" + version)
}
if (filetype == "css") {
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename + "?v=" + version)
}
if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

在main.js中，我们定义了路径以及对app.js的引用：

require.config({
baseUrl: "Scripts",
paths: {
    'application': '/App/app',
    'jquery.min': 'kendoUI/js/jquery.min',
    'angular.min': 'kendoUI/js/angular.min',
    .
    .
    .
    .

    'momentJalaali': { deps: ['jquery.min', 'angular.min', 'moment'] },
    'pdfMakeLib': { exports: 'pdfMake' },
    'pdfmake' : {deps: ['pdfMakeLib'], exports: 'pdfmake'}
},
urlArgs: "v=" + ((isDevelopment) ? (new Date()).getTime() : version),
waitSeconds: 0,
deps: ['application']
});

最后，在app.js中，我们通过引用AngularJS控制器和HTML文件来定义不同的状态

define(['angularAMD', 'angular-ui-route', 'ui-bootstrap', 'angular-sanitize', 'blockUI', 'animate', 'moment', 'momentJalaali', 'infoWindow', 'buttonValidation', 'textEmail', 'textNumeric', 'windowRedirect', 'dataService', "messageService", 'ncy-angular-breadcrumb', 'helperFactory'], function (angularAMD) {
"use strict";
var baseUrl = "App/views/", defaultOtherwise = 'default';
var app = angular.module("mainModule", ['ui.router', 'blockUI', 'ngSanitize', 'ui.bootstrap', 'ui.router.state', 'ncy-angular-breadcrumb'], ["$breadcrumbProvider", "blockUIConfig", "$stateProvider", "$urlRouterProvider", "$locationProvider", '$provide', function ($breadcrumbProvider, blockUIConfig, $stateProvider, $urlRouterProvider, $locationProvider, $provide) {
    $provide.constant("defaultUrlOtherwise", defaultOtherwise);
    $breadcrumbProvider.setOptions({
        prefixStateName: 'home',
        templateUrl: 'App/template/breadcrumb.html',
    });
    .
    .
    .
    .
    .state('login', angularAMD.route({
        url: '/login',
        controllerUrl: baseUrl + 'security/login/loginController.js',
        views: {
            'login': {
                templateUrl: baseUrl + 'security/login/login.html',
            }
        },
    }))
    .
    .
    .
    .

因此，已经有一个多星期的时间，我正在寻找一种在我们的项目中启用捆绑的好方法，但是找不到适合我们项目的良好实践。是否有一个很好的方法来对Web API +进行捆绑AngularJS项目？

同样，如果没有@ Render.Script，我们也不能在项目中使用.cshtml。我们必须使用标记，我认为由于缓存，这将是一个问题。

ASP.Net Web API + AngularJS项目中的捆绑和最小化

0 个答案: