.net - 捆绑MVC angularjs，错误角度未定义
问题描述
我的应用程序工作正常，但我想捆绑所有引用 .css 和 .js
在我在Layout.cshtml中定义我的引用之前，例如：
<!DOCTYPE html>
<html lang="en" ng-app="catanei">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Catanei</title>
@Styles.Render("~/bundles/bootstrap")
@Styles.Render("~/bundles/font-awesome")
@Styles.Render("~/bundles/base-styles")
</head>
<body>
<div id="navbar-wrapper">
@Html.Partial("~/Views/Shared/_Header.cshtml")
</div>
<div id="wrapper">
<div id="sidebar-wrapper">
@Html.Partial("~/Views/Shared/_Menu.cshtml")}
</div>
<main id="page-content-wrapper" role="main" style="padding-left:45px; padding-right:10px;">
@RenderBody()
</main>
</div>
<!----------------START DEPENDENCIES ---------------------------- >
@Scripts.Render("~/Scripts/jquery/jquery.min.js")
@Scripts.Render("~/Scripts/jquery-ui/ui/minified/jquery-ui.custom.min.js")
@Scripts.Render("~/Scripts/Site.js")
@Scripts.Render("~/Scripts/filter-table.js")
@Scripts.Render("~/Scripts/angular/angular.min.js")
@Scripts.Render("~/Scripts/bootstrap/dist/js/bootstrap.min.js")
@Scripts.Render("~/Scripts/ui-bootstrap-tpls-0.11.0.js")
@Scripts.Render("~/Scripts/angular-ui-select/dist/select.min.js")
@Scripts.Render("~/Scripts/angular-sanitize/angular-sanitize.min.js")
@Scripts.Render("~/Scripts/angular-animate/angular-animate.min.js")
@Scripts.Render("~/Scripts/angular-aria/angular-aria.min.js")
@Scripts.Render("~/Scripts/angular-messages/angular-messages.min.js")
@Scripts.Render("~/Scripts/angular-material/angular-material.js")
@Scripts.Render("~/Scripts/chart.js/dist/Chart.min.js")
@Scripts.Render("~/Scripts/ng-table-to-csv-master/dist/ng-table-to-csv.js")
@Scripts.Render("~/Scripts/angular-chart.js/angular-chart.js")
<!-- ----------------END DEPENDENCIES ---------------------------- -->
<!-- ----------------START CATANEI MODULE---------------------------- -->
@Scripts.Render("~/Scripts/app/app.config.js")
@Scripts.Render("~/Scripts/app/app.js")
@Scripts.Render("~/Scripts/app/common/app.js")
<!-- ----------------END CATANEI MODULE------------------------------ -->
</body>
我的角度应用程序工作正常。 现在我想捆绑我的 .js 文件并像这样对我的BundleConfig.cs进行编码：
using System.Configuration;
using System.Web;
using System.Web.Optimization;
namespace catanei
{
public class BundleConfig
{
// Para obtener más información sobre Bundles, visite http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/base-styles").Include(
"~/Scripts/angular-ui-select/dist/select.css",
"~/Scripts/jquery-ui/themes/ui-darkness/jquery-ui.css",
"~/Scripts/angular-material/angular-material.css",
"~/Content/Site.css",
"~/Content/custom.css"));
bundles.Add(new StyleBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap/dist/css/bootstrap.min.css", new CssRewriteUrlTransform()));
bundles.Add(new StyleBundle("~/bundles/font-awesome").Include(
"~/Scripts/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));
bundles.Add(new ScriptBundle("~/bundles/dependencies").Include(
"~/Scripts/jquery/jquery.js",
"~/Scripts/jquery-ui/ui/jquery-ui.custom.js",
"~/Scripts/Site.js",
"~/Scripts/filter-table.js",
"~/Scripts/angular.js",
"~/Scripts/bootstrap/dist/js/bootstrap.js",
"~/Scripts/ui-bootstrap-tpls-0.11.0.js",
"~/Scripts/angular-ui-select/dist/select.js",
"~/Scripts/angular-sanitize/angular-sanitize.js",
"~/Scripts/angular-animate/angular-animate.js",
"~/Scripts/angular-aria/angular-aria.js",
"~/Scripts/angular-messages/angular-messages.js",
"~/Scripts/angular-material/angular-material.js",
"~/Scripts/chart.js/dist/Chart.min.js",
"~/Scripts/ng-table-to-csv-master/dist/ng-table-to-csv.js",
"~/Scripts/angular-chart.js/angular-chart.js"));
bundles.Add(new ScriptBundle("~/bundles/catanei-module").Include(
"~/Scripts/app/app.config.js",
"~/Scripts/app/app.js",
"~/Scripts/app/common/app.js"));
// Enable optimisation based on web.config setting
BundleTable.EnableOptimizations = true;
}
}
}
而我的Layout.cshtml 之前是这样的：
<!DOCTYPE html>
<html lang="en" ng-app="catanei">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Catanei</title>
@Styles.Render("~/bundles/bootstrap")
@Styles.Render("~/bundles/font-awesome")
@Styles.Render("~/bundles/base-styles")
</head>
<body>
<div id="navbar-wrapper">
@Html.Partial("~/Views/Shared/_Header.cshtml")
</div>
<div id="wrapper">
<div id="sidebar-wrapper">
@Html.Partial("~/Views/Shared/_Menu.cshtml")}
</div>
<main id="page-content-wrapper" role="main" style="padding-left:45px; padding-right:10px;">
@RenderBody()
</main>
</div>
<!----------------START DEPENDENCIES ---------------------------- >
@Scripts.Render("~/Scripts/jquery/jquery.min.js")
@Scripts.Render("~/Scripts/jquery-ui/ui/minified/jquery-ui.custom.min.js")
@Scripts.Render("~/Scripts/Site.js")
@Scripts.Render("~/Scripts/filter-table.js")
@Scripts.Render("~/Scripts/angular/angular.min.js")
@Scripts.Render("~/Scripts/bootstrap/dist/js/bootstrap.min.js")
@Scripts.Render("~/Scripts/ui-bootstrap-tpls-0.11.0.js")
@Scripts.Render("~/Scripts/angular-ui-select/dist/select.min.js")
@Scripts.Render("~/Scripts/angular-sanitize/angular-sanitize.min.js")
@Scripts.Render("~/Scripts/angular-animate/angular-animate.min.js")
@Scripts.Render("~/Scripts/angular-aria/angular-aria.min.js")
@Scripts.Render("~/Scripts/angular-messages/angular-messages.min.js")
@Scripts.Render("~/Scripts/angular-material/angular-material.js")
@Scripts.Render("~/Scripts/chart.js/dist/Chart.min.js")
@Scripts.Render("~/Scripts/ng-table-to-csv-master/dist/ng-table-to-csv.js")
@Scripts.Render("~/Scripts/angular-chart.js/angular-chart.js")
<!-- ----------------END DEPENDENCIES ---------------------------- -->
<!-- ----------------START CATANEI MODULE---------------------------- -->
@Scripts.Render("~/Scripts/app/app.config.js")
@Scripts.Render("~/Scripts/app/app.js")
@Scripts.Render("~/Scripts/app/common/app.js")
<!-- ----------------END CATANEI MODULE------------------------------ -->
</body>
如果您想查看我的角度脚本app.config.js：
+function () {
"use strict";
const cataneiRun = () => {
};
angular.module("catanei", [
"ngSanitize",
"ui.select",
"ngAnimate",
"ngAria",
"ngMessages",
"ngMaterial",
"chart.js",
"ui.bootstrap",
"ngTableToCsv",
"common",
]).run(cataneiRun);
}();还有我的 app.js：
+ function () {
"use strict";
function cataneiConfig(
$httpProvider,
ChartJsProvider
) {
ChartJsProvider.setOptions({ colors: ['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
}
cataneiConfig.$inject = [
"$httpProvider",
"ChartJsProvider"
];
angular
.module("catanei")
.config(cataneiConfig);
}();但是获取角度未定义的错误： 点击查看错误
解决方案
推荐阅读
- swift - 获取 Button 和 Textfield 数据，当它们在 swift 5 中以编程方式添加时
- php - 使用 Docker 和 php7.4 配置 memcached
- bokehjs - 测量散景中直方图之间的距离
- c - 如何在 centos8 中使用“dnf install”安装文件 libc.a
- javascript - 如何在 Next.JS 中使用 URL 查询创建条件逻辑？
- python - 如何在 Python 3 中执行 input() 方法时输入换行符？
- rust - 由于对 `.into_iter()` 的隐式调用，移动了对向量的可变引用，但显式调用 `.into_iter()` 有效
- python - 使用 Telebot ValueError 编写电报机器人时出错：check_hostname 需要 server_hostname
- javascript - 在javascript中每2秒更改一次url
- java - NIO2 CompletionHandler 的线程安全