13
Tôi có một ứng dụng sử dụng angularjs và hoạt động tốt khi tối ưu hóa được đặt thành false trong tệp BundleConfig.cs.AngularJS không hoạt động khi opimization được kích hoạt ASP.NET MVC
Nhưng khi tôi đặt tối ưu hóa thành đúng biểu thức góc làm việc của tôi có nghĩa là góc đang tải nhưng các dịch vụ và bộ điều khiển của tôi không hoạt động và các jquery/javscript khác hoạt động tốt.
Bạn có biết điều gì đang xảy ra ở đây không. Dưới đây là một số mã của tôi
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"]);
}
}
}
Layout My Page:
<!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 // cho các ứng dụng góc
(function() {
var ally = angular.module('allyhrms', []);
})();
dịch vụ của tôi là được làm theo phong cách này. ví dụ một trong những dịch vụ của tôi là như thế nào. 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;
});
};
}
]);
lol .. tôi chỉ tìm ra điều đó, và đã ở đây để loại bỏ câu hỏi này, nhưng bạn đã trả lời nó, Bravo :) – user2539602
Điều này là hoàn hảo! Cảm ơn! – Parth