使用Angular js和主题定义ASP.NET MVC的结构 [英] Define structure of ASP.NET MVC with Angular js and theme

问题描述

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

Hello I am new to Angular js and about to start my application to create with Angular js and ASP.NET MVC.

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

I have to create with proper flow by setting the files properly define using Bundle.config but don't know the flow how I can set the files in priority wise.

现在我已经在下面设置了文件方式：

Right now I have set the files in following manner:

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"));

请告诉我是否在此处放置了错误的文件。

Please tell me if any files misplaced here priority wise.

我也想设置数据表js，所以我也在这里以及在以下流程中渲染它时应用了该方法，但是当我添加数据表时却出现了错误：

I also want to set the datatable js as well so I have also applied here and when I render it in following flow but gives me an error when I add datatables:

没有数据表，它运行良好，但我希望我不必添加数据表js在每个cshtml文件中。

Without datatables it is running fine but I want datatables js that I do not have to add it on every cshtml file.

帮我节省时间，也可以学习如何以适当的方式优先放置文件。

Help me with this can save my time and also I can learn how to place files in proper manner priority wise.

预先感谢。 ：）

推荐答案

您的数据表捆绑包包含脚本，而不包含样式。将其更改为

Your datatables bundles contains scripts, not styles. Change it to

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

请注意，您也有两次 jquery.validate -在〜bundles / jquery 和〜bundles / jqueryval 中。将其从〜/ bundles / jquery

Note you also have jquery.validate twice - in ~bundles/jquery and ~bundles/jqueryval. Remove it from ~/bundles/jquery

还建议您包括非最小化版本（如果您有他们）。 MVC的捆绑功能将在生产中自动最小化它们（在调试模式下，您可以使用完整版进行调试）

Its also recommended you include the non-minifed versions (if you have them). The bundling features of MVC will automatically minify them in production (and in debug mode you can use the full versions for debugging)

这篇关于使用Angular js和主题定义ASP.NET MVC的结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！