使用 Angular js 和主题定义 ASP.NET MVC 的结构

Question

你好，我是 Angular js 的新手，即将开始使用 Angular js 和 ASP.NET MVC 创建我的应用程序。

我必须通过设置使用 Bundle.config 正确定义的文件来创建正确的流程，但不知道流程如何设置文件的优先级。

现在我已经按照以下方式设置了文件：

bundles.Add(new StyleBundle("~/bundles/bootstrapcss").Include(
                "~/Content/themes/mytheme/bootstrap.min.css",
                "~/Content/themes/mytheme/main.css"
                ));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery.js",
                        "~/Scripts/jquery.validate.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
               "~/Scripts/Angular/angular.min.js"
               ));

            bundles.Add(new StyleBundle("~/bundles/datatables").Include(
                "~/Scripts/datatables/dataTables.min.js",
                "~/Scripts/datatables/dataTables.bootstrap.min.js",
                "~/Scripts/datatables/dataTables.tableTools.js",
                "~/Scripts/datatables/autoFill.min.js",
                "~/Scripts/datatables/autoFill.bootstrap.min.js",
                "~/Scripts/datatables/fixedHeader.min.js",
                "~/Scripts/datatables/custom-datatables.js"
                ));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                       "~/Scripts/bootstrap.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/AngularStructure").Include(
                            "~/Scripts/Angular/Module/app.js",
                           "~/Scripts/Angular/Controller/Controller.js",
                           "~/Scripts/Angular/Service/Service.js"
                       ));

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // 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/modernizr-*"));

            bundles.Add(new StyleBundle("~/bundles/themes/base/minified/css").Include(
                        "~/Content/themes/base/minified/jquery.ui.core.min.css",
                        "~/Content/themes/base/minified/jquery.ui.resizable.min.css",
                        "~/Content/themes/base/minified/jquery.ui.selectable.min.css",
                        "~/Content/themes/base/minified/jquery.ui.accordion.min.css",
                        "~/Content/themes/base/minified/jquery.ui.autocomplete.min.css",
                        "~/Content/themes/base/minified/jquery.ui.button.min.css",
                        "~/Content/themes/base/minified/jquery.ui.dialog.min.css",
                        "~/Content/themes/base/minified/jquery.ui.slider.min.css",
                        "~/Content/themes/base/minified/jquery.ui.tabs.min.css",
                        "~/Content/themes/base/minified/jquery.ui.datepicker.min.css",
                        "~/Content/themes/base/minified/jquery.ui.progressbar.min.css",
                        "~/Content/themes/base/minified/jquery.ui.theme.min.css"));

如果有任何文件放错地方了，请优先告诉我。

我也想设置数据表js，所以我也在这里应用，当我按照以下流程渲染它时，但在添加数据表时给我一个错误：

没有数据表，运行很好，但我想要数据表 js，我不必在每个 cshtml 文件上添加它。

帮助我解决这个问题可以节省我的时间，而且我还可以学习如何以正确的方式优先放置文件。

提前致谢。 :)

Answer 1

您的 datatables 包包含脚本，而不是样式。改成

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
    ....
));

请注意，您还有两次 jquery.validate - 在 ~bundles/jquery 和 ~bundles/jqueryval 中。从 ~/bundles/jquery

中删除

还建议您包括 non-minifed 版本（如果有的话）。 MVC 的捆绑功能会在生产中自动缩小它们（在调试模式下，您可以使用完整版本进行调试）

使用 Angular js 和主题定义 ASP.NET MVC 的结构

Define structure of ASP.NET MVC with Angular js and theme

asp.net-mvc

bundle

config

structure

angularjs