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

Question

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

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.

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:

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.

Thanks in advance. :)

user3559349 · Accepted Answer · 2017-02-17 06:30:37Z

1

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

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

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

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)

answered Feb 17, 2017 at 6:30

user3559349

Sign up to request clarification or add additional context in comments.

4 Comments

3 rules Over a year ago

Can you please help me little bit more I also want to use datatables with angular js can I use both in one page? and the structure is correct or need any changes?

user3559349 Over a year ago

Sorry, I have not used datatables so not sure.

3 rules Over a year ago

Ok the provided structure is ok or need any changes sir?

user3559349 Over a year ago

Looks OK, but I will double check a bit later and let you know if I think you need to change anything.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related