Define structure of ASP.NET MVC with Angular js an

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. :)

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)