use*_*602 15 asp.net-mvc minify angularjs bundling-and-minification
我有一个使用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 //用于角度应用
(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;
});
};
}
]);
Jos*_*sep 26
这是在使用内联注释注入依赖项时发生的一个非常常见的问题,而不是使用字符串数组.
所以,如果你这样做:
.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 });
}
}]);
| 归档时间： |
|
| 查看次数： |
7746 次 |
| 最近记录： |