C# 如何在ASP.NET MVC中绑定资产，以便在Angular中使用，而无需访问Razor？

我们有一个AngularJS前端应用程序，其后端是用作API的ASP.NET MVC。我们删除了所有的控制器和视图，主要依赖基于AngularJS的HTML作为视图。我们现在需要做的是捆绑我们的js和css，但我们无法访问Razor语法

---

因为我们无法访问Razor，所以我们需要一种捆绑JS和CSS文件的方法。没有Razor，我们如何捆绑这些文件？

Razor语法用于运行服务器端代码。这在MVC中主要是位于控制器类中的代码

---

问问自己，如果不使用控制器/模型/视图关系，为什么需要MVC。

Razor语法用于运行服务器端代码。这在MVC中主要是位于控制器类中的代码

问问自己，如果不使用控制器/模型/视图关系，为什么需要MVC。

您正在寻找，但请记住，这需要由服务器生成，因此您需要获取Angular以请求获取此URL，这样您就无法将Angular包含在捆绑包中

但是，也可以对包进行硬编码。假设您像这样注册：

newscriptbundle（“~/js/mybundle”）

：

尽管Razor实现中没有包含版本控制

最后，如果已经使用Angular，那么整个ASP.NET MVC模型并没有提供巨大的好处。您应该将Angular应用到一个普通的HTML项目中，并使用类似的工具来自动进行绑定和缩小。然后，您可以使用WebAPI作为服务器后端。

您正在寻找，但请记住，这需要由服务器生成，因此您需要获取Angular以请求获取此URL，这样您就无法在捆绑包中包含Angular

但是，也可以对包进行硬编码。假设您像这样注册：

newscriptbundle（“~/js/mybundle”）

：

尽管Razor实现中没有包含版本控制

---

最后，如果已经使用Angular，那么整个ASP.NET MVC模型并没有提供巨大的好处。您应该将Angular应用到一个普通的HTML项目中，并使用类似的工具来自动进行绑定和缩小。然后，您可以使用WebAPI作为服务器后端。

使用Razor在视图中引用捆绑包的主要好处是自动创建捆绑包的URL，并将缓存buster查询字符串附加到捆绑包（这样，当捆绑包中任何文件的内容更改时，URL都会更改，您不必担心客户端仍然引用捆绑包的旧缓存版本）。第二个好处是，当debug=true（在web.config中）时，它会将URL直接呈现到捆绑包中的项目

当然，您可以在普通HTML中硬编码到捆绑包的路径，但这样您就失去了这两个功能。我也不确定如果在debug=true时转到捆绑包URL，它是否会呈现组合的捆绑包（这意味着，当您在开发机器上处于调试模式时，它可能无法工作）

我想说的是，如果您在SPA中的初始页面（引导Angular客户端的页面）上不使用Razor视图，您将不会发现捆绑包非常有用

如果您完全放弃Razor，您可能希望使用其他捆绑资产的方法（以及在HTML中更新对捆绑包的引用）。有多种方法，但最流行的方法是使用或生成在上运行的任务。例如（使用Grunt），请参阅、和

使用Grunt和前面提到的各种任务来完成bundle在不使用bundle或Razor的情况下所做的所有事情

文章摘要如下（您的里程可能有所不同）：

安装Node.js

安装Grunt CLI

Create package.json（

npm init

可以为您创建此文件）

添加必要的Grunt附加组件：

"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-usemin": "~2.0.2",
"grunt-contrib-copy": "~0.5.0",
"grunt-rev": "~0.1.0",
"grunt-contrib-clean": "~0.5.0"

创建Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    clean: ["dist", '.tmp'],

    copy: {
        main: {
            expand: true,
            cwd: 'app/',
            src: ['**', '!js/**', '!lib/**', '!**/*.css'],
            dest: 'dist/'
        },
        shims: {
            expand: true,
            cwd: 'app/lib/webshim/shims',
            src: ['**'],
            dest: 'dist/js/shims'
        }
    },

    rev: {
        files: {
            src: ['dist/**/*.{js,css}', '!dist/js/shims/**']
        }
    },

    useminPrepare: {
        html: 'app/index.html'
    },

    usemin: {
        html: ['dist/index.html']
    },

    uglify: {
        options: {
            report: 'min',
            mangle: false
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-rev');
grunt.loadNpmTasks('grunt-usemin');

// Tell Grunt what to do when we type "grunt" into the terminal
grunt.registerTask('default', [
    'copy', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'rev', 'usemin'
]);
};

编辑你的index.html（或任何你的主应用程序引导页面），这样你的CSS和JS资产就可以被适当地修饰成

usemin

和

rev

：

 <!-- build:css css/app-name.min.css -->
 <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
 <link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/>
 <link rel="stylesheet" href="lib/toaster/toaster.css"/>
 <link rel="stylesheet" href="css/app.css"/>
 <link rel="stylesheet" href="css/custom.css"/>
 <link rel="stylesheet" href="css/responsive.css"/>
 <!-- endbuild -->
 ...
 <!-- build:js js/app-name.min.js -->
 <script src="lib/jquery/jquery-1.10.2.min.js"></script>
 <script src="lib/bootstrap/bootstrap.min.js"></script>
 <script src="lib/angular/angular.min.js"></script>
 <script src="lib/angular/angular-animate.min.js"></script>
 <script src="lib/angular/angular-cookies.min.js"></script>
 <script src="lib/angular/angular-resource.min.js"></script>
 <script src="lib/angular/angular-route.min.js"></script>
 <script src="lib/fastclick.min.js"></script>
 <script src="lib/toaster/toaster.js"></script>
 <script src="lib/webshim/modernizr.min.js"></script>
 <script src="lib/webshim/polyfiller.min.js"></script>
 <script src="js/app.js"></script>
 <script src="js/services.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/filters.js"></script>
 <script src="js/directives.js"></script>
 <!-- endbuild -->

...

现在，您有了一个Grunt构建任务，该任务将查看页面中的任何资产块，并连接/丑化其中引用的各个文件，然后将该块中的链接替换为指向单个缓存损坏文件的链接。这将为您提供捆绑包

---

在开发过程中，除了从这些块中添加或删除资产之外，您不需要做任何事情。对于生产，您只需要在打包或部署应用程序之前运行grunt构建任务。

使用Razor在视图中引用捆绑包的主要好处是使用缓存buster自动创建捆绑包的URL附加到它的Y字符串（这样当捆绑包中的任何文件的内容更改时，URL都会更改，并且您不必担心客户端仍然引用捆绑包的较旧缓存版本）。第二个好处是，当debug=true（在web.config中）时，它会将URL直接呈现到捆绑包中的项目

当然，您可以在普通HTML中硬编码到捆绑包的路径，但这样您就失去了这两个功能。我也不确定如果在debug=true时转到捆绑包URL，它是否会呈现组合的捆绑包（这意味着，当您在开发机器上处于调试模式时，它可能无法工作）

我想说的是，如果您在SPA中的初始页面（引导Angular客户端的页面）上不使用Razor视图，您将不会发现捆绑包非常有用

如果您完全放弃Razor，您可能希望使用其他绑定资产的方法（以及在HTML中更新对绑定的引用）

 <!-- build:css css/app-name.min.css -->
 <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
 <link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/>
 <link rel="stylesheet" href="lib/toaster/toaster.css"/>
 <link rel="stylesheet" href="css/app.css"/>
 <link rel="stylesheet" href="css/custom.css"/>
 <link rel="stylesheet" href="css/responsive.css"/>
 <!-- endbuild -->
 ...
 <!-- build:js js/app-name.min.js -->
 <script src="lib/jquery/jquery-1.10.2.min.js"></script>
 <script src="lib/bootstrap/bootstrap.min.js"></script>
 <script src="lib/angular/angular.min.js"></script>
 <script src="lib/angular/angular-animate.min.js"></script>
 <script src="lib/angular/angular-cookies.min.js"></script>
 <script src="lib/angular/angular-resource.min.js"></script>
 <script src="lib/angular/angular-route.min.js"></script>
 <script src="lib/fastclick.min.js"></script>
 <script src="lib/toaster/toaster.js"></script>
 <script src="lib/webshim/modernizr.min.js"></script>
 <script src="lib/webshim/polyfiller.min.js"></script>
 <script src="js/app.js"></script>
 <script src="js/services.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/filters.js"></script>
 <script src="js/directives.js"></script>
 <!-- endbuild -->