Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I am trying to set up an AngularJS application with a ASP.Net MVC server-side framework on a MacBook Air with Xamarin. I am moving from a Node.js runtime environment to ASP.Net and I cannot figure out how the routing is supposed to work with Angular.

I want to have a single route on the server-side and let all the other routes be controlled by Angular on the client side. However I keep getting this message:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. angular.min.js?_=1466979148289:290 WARNING: Tried to load angular more than once

I know Angular is being loaded more than once, so how would I set the Angular application as I'd like it? The relevant code is below:

Server-Side

App_Start/routeconfig.cs

using System.Web.Mvc;
using System.Web.Routing;

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

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

Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MyApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Views/Home/index.cshtml

<div ng-controller="MainController" class="main-guy">

    <div ui-view></div>

</div>

Client-Side

Scripts/javascripts/app.js

angular.module('app').config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
    $urlRouterProvider
        .when('', '/main')
        .when('/', '/main')
        .otherwise(function($injector){
            $injector.get('$state').go('404', {}, { location: false });
        });

    $stateProvider
        .state('main',{
            url: '/main',
            templateUrl: 'Views/Route/main',
            controller: 'MainController'
        })
        .state('freeplay',{
            url: '/freeplay',
            templateUrl: 'Views/Route/freeplay',
            controller: 'FreeplayController'
        })
        .state('404', {
            url:'/404',
            templateUrl: 'Views/Route/404'
        });

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

Directory structure

Directory

share|improve this question

This might not answer your question. Instead, this will be alternative approach to implement ASP.Net MVC with AngularJs.

I personally like Miguel A Castro's Mini SPA (Silos). You can watch the video here, and download the source at his website.

What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.

FYI: Angular 2 is right around the corner, so you want to use Angular 1.5 Compotent as much as possible so that you can convert to Angular 2 easily later.

share|improve this answer
    
Will keep that in mind for next time. Luckily, this is an application that doesn't need to be updated in the future! But I do agree, I should study Angular 2. – Les Paul Jun 27 at 3:52

For this you have to load your script to your view. After that you have to create div with ng-app, ng-controller and ng-view. You can go in detail through this link given below.

http://www.c-sharpcorner.com/UploadFile/cd7c2e/mvc-routing-with-angularjs-routing/

share|improve this answer

Found my answer: didn't complete my route filenames so it was an endless loop:

$stateProvider
        .state('main',{
            url: '/main',
            templateUrl: 'Views/Route/main.cshtml',
            controller: 'MainController'
        })
        .state('freeplay',{
            url: '/freeplay',
            templateUrl: 'Views/Route/freeplay.cshtml',
            controller: 'FreeplayController'
        })
        .state('404', {
            url:'/404',
            templateUrl: 'Views/Route/404.cshtml'
        });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.