Asp.net-Mvc

啟用優化時 AngularJS 不工作 ASP.NET MVC

  • November 9, 2019

我有一個使用 angularjs 的應用程序，當 BundleConfig.cs 文件中的優化設置為 false 時工作正常。

但是，當我將優化設置為 true 時，我的角度表達式工作，這意味著角度正在載入，但我的服務和控制器無法正常工作，其他 jquery/javscript 工作正常。

你知道這裡發生了什麼嗎？下面是我的一些程式碼

BundleConfig.cs

using System.Configuration;
using System.Web;
using System.Web.Optimization;

namespace HRMS
{
   public class BundleConfig
   {
       // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
       public static void RegisterBundles(BundleCollection bundles)
       {
           bundles.Add(new ScriptBundle("~/bundles/angular")
               .Include("~/Scripts/common/angular.js"
           ));
           bundles.Add(new ScriptBundle("~/bundles/app")
               .Include("~/Scripts/angular/app.js"
           ));
           bundles.Add(new ScriptBundle("~/bundles/common")
               .Include("~/Scripts/common/common.js"));

           bundles.Add(new ScriptBundle("~/bundles/services")
               .IncludeDirectory("~/Scripts/angular/services", "*.js"));

           bundles.Add(new ScriptBundle("~/bundles/controller")
               .IncludeDirectory("~/Scripts/angular/controller", "*.js"));


           bundles.Add(new ScriptBundle("~/bundles/jquery")
               .Include("~/Scripts/common/jquery-{version}.js"
                       , "~/Scripts/common/jquery-ui.js"));









           bundles.Add(new ScriptBundle("~/bundles/metis").Include(
                       "~/Scripts/common/plugins/metisMenu/metisMenu.min.js",
                       "~/Scripts/common/sb-admin-2.js"));

           // Use the development version of Modernizr to develop with and learn from. Then, when you're
           // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                       "~/Scripts/common/modernizr-*"));

           bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                     "~/Scripts/common/bootstrap.js",
                     "~/Scripts/common/respond.js"));

           bundles.Add(new ScriptBundle("~/bundles/select2").Include(
                     "~/Scripts/common/plugins/select2/select2.js"));

           bundles.Add(new ScriptBundle("~/bundles/tinymce").Include(
                     "~/Scripts/common/plugins/tinymce/tinymce.min.js"));

           bundles.Add(new StyleBundle("~/Content/css").Include(
                     "~/Content/bootstrap.css",
                     "~/Content/sb-admin-2.css",
                     "~/Content/plugins/metisMenu/metisMenu.min.css",
                     "~/Content/font-awsm/css/font-awesome.css",
                     "~/Content/plugins/select2.css",
                     "~/Content/plugins/select2-bootstrap.css",
                     "~/Content/jquery-ui.css"));


           BundleTable.EnableOptimizations =
           bool.Parse(ConfigurationManager.AppSettings["BundleOptimisation"]);

       }

   }
}

我的佈局頁面：

<!DOCTYPE html>
<html lang="en" ng-app="allyhrms">
<head>

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">

   <title>@ViewBag.Title - Ally HRMS</title>

       @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/common")


@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/app")
@Scripts.Render("~/bundles/services")
@Scripts.Render("~/bundles/controller")



@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/metis")
@Scripts.Render("~/bundles/tinymce")
@Scripts.Render("~/bundles/select2")
   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
   @RenderSection("Script", false)
</head>

App.js // 用於 Angular 應用程序

(function () {
   var ally = angular.module('allyhrms', []);
})();

我的服務就是用這種風格製作的。例如，我的一項服務就是這樣。位置服務.js

angular.module('allyhrms').service('LocationService', function ($http) {
   this.States = function () {
       return GetData($http, "/Location/States", {});
   };
   this.Cities = function (model) {
       return PostData($http, "/Location/Cities", { s: model });
   }
});

位置控制器.js

angular.module('allyhrms').controller('LocationController', [
   'LocationService', 'ExceptionService', '$scope', function (locationService, exceptionService, $scope) {
       $scope.State = {
           Id: 0,
           StateName: ''
       };
       $scope.City = {
           Id: 0,
           StateId: 0,
           CityName: ''
       }
       $scope.States = [];
       $scope.Cities = [];
       function loadData() {
           locationService.States().then(function(response) {
               $scope.States = response.data.model;
           });

       }
       loadData();
       $scope.onStateChanged = function() {
           locationService.Cities($scope.State).then(function(response) {
               $scope.Cities = response.data.model;
           });
       };
   }
]);

這是一個非常常見的問題，當使用內聯註解注入依賴項而不是使用字元串數組時會發生這種情況。

所以如果你這樣做：

.controller('dummyController', function($scope){...})

你應該這樣做：

.controller('dummyController', ['$scope', function($scope){...}])

例如：在您的程式碼中，您正在執行此操作，當程式碼被縮小時，這將無法正常工作：

angular.module('allyhrms').service('LocationService', function ($http) {
   this.States = function () {
       return GetData($http, "/Location/States", {});
   };
   this.Cities = function (model) {
       return PostData($http, "/Location/Cities", { s: model });
   }
});

你應該這樣做：

angular.module('allyhrms').service('LocationService',['$http', function ($http) {
   this.States = function () {
       return GetData($http, "/Location/States", {});
   };
   this.Cities = function (model) {
       return PostData($http, "/Location/Cities", { s: model });
   }
}]);

引用自：https://stackoverflow.com/questions/26719646

相關問答

Asp.net-Mvc

AngularJS 在發布模式下不工作（縮小）

  • March 27, 2014
檢視問答
Asp.net-Mvc

Mvc4 捆綁、縮小和 AngularJS 服務

  • February 16, 2013
檢視問答
Asp.net

.NET 4.5 中的樣式包和 CSS 中的圖示

  • January 12, 2013
檢視問答
Asp.net-Mvc

BundleTable.EnableOptimizations = true 時是否使用版本文件的 .min？

  • January 10, 2020
檢視問答
Asp.net-Mvc

將記憶體破壞器添加到非優化包？

  • April 6, 2019
檢視問答
Asp.net-Mvc

是否有理由在 asp.net MVC 上使用 WCF？

  • January 30, 2019
檢視問答