如何在不访问Razor的情况下将ASP.NET MVC中的资产捆绑在Angular中使用

本文关键字：Angular MVC ASP 访问 Razor 情况下 NET | 更新日期: 2023-09-27 18:27:29

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

由于我们无法访问Razor，我们需要一种方法来捆绑我们的JS和CSS文件。如果没有Razor，我们如何捆绑这些文件？

如何在不访问Razor的情况下将ASP.NET MVC中的资产捆绑在Angular中使用

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

不过，也可以对捆绑包进行硬编码。假设您注册为：new ScriptBundle("~/js/mybundle"):

<script src="/js/mybundle"></script>

尽管Razor实现中不会包含版本控制。

最后，如果已经使用Angular，那么整个ASP.NET MVC模型并不能提供大量好处。您应该将Angular移到一个普通的HTML项目中，并使用GruntJS之类的东西来自动绑定&缩小。然后您可以使用WebAPI作为服务器后端。

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

当然，您可以在纯HTML中对捆绑包的路径进行硬编码，但这两个特性都会丢失。我也不确定如果在debug=true时转到捆绑包URL，它是否会呈现组合的捆绑包（这意味着，当您在开发机器上处于调试模式时，它可能不起作用）。

我的意思是，如果你的SPA（引导你的Angular客户端的页面）中至少没有使用Razor视图，你不会发现Bundles非常有用。

如果您完全放弃Razor，您可能希望使用其他捆绑资产的方法（以及在HTML中更新对捆绑包的引用）。有很多方法，但最流行的是使用Grunt或Gulp构建任务，这些任务在Node.js上运行。例如（使用Grunt），请参阅grunt-contrib-concat、grunt-contrib-uglify、grunt-rev和grunt-usemin。

这里有一个链接，使用Grunt和前面提到的各种任务来完成Bundles在不使用Bundles或Razor的情况下所做的所有事情。

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

  1. 安装Node.js
  2. 安装Grunt CLI
  3. 创建package.json（npm init可以为您创建）

  4. 添加必要的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"

  5. 创建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'
]);
};

  6. 编辑你的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构建任务，该任务将在页面上查找任何资产块，并连接/uglify其中引用的各个文件，然后用指向单个缓存损坏文件的链接替换该块中的链接。这让你如愿以偿。

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

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

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

相关文章：