Question

我有一个使用angularjs的应用程序，并且在BundleConfig.cs文件中将优化设置为false时工作正常。

但是，当我将优化设置为true时，我的角度表达式工作意味着角度正在加载，但我的服务和控制器没有wotk，而其他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 // for angular application

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

我的服务是用这种风格制作的。例如我的一项服务就像。 LocationService.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 });
    }
});

LocationController.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;
            });
        };
    }
]);

Answer 1

这是一个非常常见的问题happens when using inline annotation for injecting the dependencies, rather than using an Array of strings。

所以，如果你这样做：

.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 });
    }
}]);

Answer 2

对我来说，问题是我的缩小和未分化的select2.js的select2版本不同且不兼容，启用优化使用我的缩小文件，这与我的框架不兼容导致select2不可见

当ASP.NET MVC启用opimization时，AngularJS无法正常工作

2 个答案: