2

I am creating an AngularJS site communicating with a REST API. For the REST API I'm using ASP.NET Web API. I have also created an "ASP.NET Empty Web Application". There are only HTML, js and CSS files in this project (and a web.config). I'd like for my js and CSS files to be bundled and minified, but I don't want to add minified files into index.cshtml. Is it possible?

can any one say how to add minified files into index.html.

steps i have followed.

1.Installing package.
Install-Package Microsoft.AspNet.Web.Optimization
2.Created a BundleConfig Class and bundles:

 using System.Web.Optimization;
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle(new ScriptBundle("~/MyApp/Main")
                .Include("~/MyApp/app.js")
                .Include("~/MyApp/SampleController.js")); 
        } 
    }

3.Register the BundleConfig class within the application start in the global.asax

void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

now I want to refer the Main.js into my application.can I be able to add main.js into my index.html,if yes How?
Is it neccessary that I have to create .cshtml and then refer main.js using 

@script.Render

Have any other way to bundle and minify my files other than asp.net mvc??

Skull
  • 1,204
  • 16
  • 28
  • 1
    I think you really need to tag asp technologies than angularjs – T J May 30 '16 at 06:57
  • 2
    i know a way to implement this but i will not recommend that one because it is too messy. Take a look at gulp instead. You are now moving to angular so forget mvc features, angular have a better implementations to answer your concerns. – Anonymous Duck May 30 '16 at 07:17

1 Answers1

-1

First of all, you need to optimize your Angular Code referring to this question: Angularjs minify best practice

After that, you need to collect all of your Angular files into a bundle.

public static void RegisterBundles(BundleCollection bundles) {
    bundles.Add(new ScriptBundle("~/angular").Include(
        "~/Scripts/first-file.js",
        "~/Scripts/second-file.js",
        "~/Scripts/third-file.js"));

    BundleTable.EnableOptimizations = true;
}

You can access the bundled JavaScript-file in your *.cshtml with the following tag:

@Scripts.Render("~/angular")

Here is a good blog-entry concerning this question.

Seb Krae
  • 311
  • 3
  • 10