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

share|improve this question

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'
        });
}]);
share|improve this answer
    
Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. - i copied your code and this is what i get – Kasper Sølvstrøm Sep 17 '15 at 10:21
    
Add module name of your imported ui router js. (its module name mention in ui-router js), i already mention you to not to forget to add ui router js. – Kashif Mustafa Sep 17 '15 at 10:23
    
you don't need ui.router - you can just use ng-route – Ric Sep 17 '15 at 10:33
    
Thanks Ric, you made the day -.- – Kasper Sølvstrøm Sep 17 '15 at 10:36

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

share|improve this answer
    
It keeps saying angular loaded more than once and crashing – Kasper Sølvstrøm Sep 17 '15 at 10:42
    
It shouldn't crash just because of that. are there any other errors in your console? – Ric Sep 17 '15 at 10:42

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.