ASP.NET MVC Angular routing

Question

I'm lost..

For days now, i have tried to get it to work.. I made a MVC site code first with EF. then i've scaffolded controllers and API (tried ALOT thins)

my routeConfig:

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

my WbApiConfig: config.MapHttpAttributeRoutes();

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

What should my Controllers actions return? json? views?

my ng-app is in my /Home/Index (which uses layout, and layout has ng app on html)

and at last, my ngApp

app.config(['$routeProvider', function ($routeProvider, $locationProvider) {
$routeProvider
    // route for the home page
    .when('/', {
        templateUrl: 'Home/Index',
        controller: 'mainController'
    })
    .when('/Home/About', {
        templateUrl: '/Home/About',
        controller: 'programsCtrl'
    });
}]);

So.. the furthest I've got is a 404 or angular crashing chrome by loading infinitly.

And with the code above, i get the angular load more than one crash.

I just want my angular to load my views inside the ng-view and leave the layout on always..

ANY help or pointer appreciated :)

Answer 1

I recommend you to use UI router, You create a one controller name 'HomeController' inherited from _layout. Your index view of Home contains this div

  <div ui-view></div>

You app.js file looks like, don't forget to add ui-router js in layout

  var app = angular.module('app', ['ngRoute', 'ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/Home");

    // Now set up the states
    $stateProvider

        .state('Home', {
            url: "/Home",
            controller: "mainController",
            templateUrl: "your html pages" // like '/script/home/templates/home.html'
        }).state('About', {
            url: "/Home/About",
            controller: "programsCtrl",
            templateUrl: "your html pages" // like '/script/home/templates/about.html'
        });
}]);

Answer 2

The way I go about this is by setting the default for MVC to home/index and placing the <ng-view></ng-view> in the home/index view. This should be the only content in that view, remove everything else.

Now, on your _layout , make sure you have:

<html ng-app="app"> at the top of the file and ensure that you have the relevant scripts loaded ie:

@Scripts.Render("~/bundles/angularjs") @Scripts.Render("~/bundles/app")

So that angular is available.

Keep this for @RenderBody()

<div class="body-content">
    @RenderBody()
</div>

Your MVC methods return ActionResult ( return View() ) and your ApiController methods return JSON

ASP.NET MVC Angular routing

Question

2 answers

solution1
0 2015-09-17 09:47:06

solution2
0 2015-09-17 09:59:34

ASP.NET MVC Angular routing

Question

2 answers

solution1 0 2015-09-17 09:47:06

solution2 0 2015-09-17 09:59:34

solution1
0 2015-09-17 09:47:06

solution2
0 2015-09-17 09:59:34