CODEWITHSUNDEEP
asp.netangularjsasp.net-web-apiasp.net-mvc-routing
Mahdi
Mahdi

Reputation: 768

How to Insert AngularJS project in an ASP web api Project

i have an asp web API project and related AngularJS project.
i know if i want to give appearance to Angular, i should call index.html so

  1. how can i call index.html file of Angular as default page?
  2. best place to import Angular folders in ASP web API project?

RouteConfig:

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }

art of WebApiConfig: 

config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

Upvotes: 0

Views: 303

Answers (1)

nweg
nweg

Reputation: 2865

If you want to use angularjs routing setup your routeConfig like this:

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "App",
            url: "App/{*catchall}",
            defaults: new { controller = "App", action = "Index" });

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional }
        );

In your index.cshtml view you will need to define your app on the HTML tag like so and add your ng-view directive:

<html ng-app="appModule">
   <div ng-view>
   </div>
</html>

This will get the app going. Make sure include all your .js files in your index.cshtml files.

In the app (mvc) controller we bootstrap some data in for the angular app. You can do this however you want.

Upvotes: 1

Related Questions