Converting AngularJS to ASP.NET MVC

Question

I am currently converting an AngularJS HTML app to ASP.NET MVC and I have laid out pretty much everything and but when the page loads I see the controller(dashboard.js) but its not firing any function from the dashboard controller here is what I'm doing:

in my _layout.cshtml I have the following:

<html ng-app="app_angular" >
<head>
    <script src="~/script/angular/angular.js"></script>
    <script src="~/script/angular/angular-route.js"></script>
    <script src="~/script/angular/angular-resource.js"></script>
    <script src="~/script/angular/angular-animate.js"></script>
    <script src="~/script/angular/angular-cookies.js"></script>

    <script src="~/script/js/jquery.min.js"></script>
    <script src="~/script/js/bootstrap.min.js"></script>


    <script src="~/Scripts/myapp.js"></script>
    <script src="~/Scripts/controllers/dashboard.js"></script>
    <script src="~/Scripts/routes.js"></script>
</head>    
<body> 

<ng-view class="fx fx-slide page"></ng-view>

<div class="container">
    <h3 class="row title">
        <div class="col-xs-6">Dashboard</div>
        <div class="col-xs-6 text-right text-gray">{{ today | date:'MMMM d, y' }}</div>
    </h3>
</div>
<section ng-repeat="template in templates">
    <ng-include src="template"></ng-include>
</section>
<div class="container" ng-init="init()">

    <!-- Buttons --> 


</body>
</html>

myapp.js

var app_angular = angular.module('app_angular', ['ngCookies', 'ngRoute', 'ngResource', 'ngAnimate']);

dashboard.js

'use strict';
app_angular
        .controller('dashboard', function ($rootScope, $scope) {
            debugger
            $scope.today = new Date();

         /* set template subviews */
        $scope.templates = {
            stream: "../../views/templates/firstqtr.html",
            modal: "../../views/templates/secondqtr.html",
            loan: "../../views/templates/thirdqtr.html"
        };

        });

routes.js(first approach: does not work)

app_angular
  .config(function($routeProvider, $httpProvider) {

      $routeProvider
        /* dashboard */
        .when('/', {
          controller: 'dashboard',
          templateUrl: '../../views/home/index'
        })
       .when('/home/about', {
          controller: 'dashboard',
          templateUrl: '../../views/home/about'
        })
       .otherwise({
          redirectTo: '/'
        });
  });

routes.js(second approach: does not work)

app_angular 
    .config(['$routeProvider', function ($routeProvider) 
    {             
        $routeProvider
            .when('/', { templateUrl: '/home/index', controller: 'dashboard' })
            .when('/', { templateUrl: '/home/about', controller: 'dashboard' })

            .otherwise({ redirectTo: '/home' });
    }])

What else I should be doing any help?

no console errors, i have ng-view/ng-include element in the page, i have updated my question to reflect the changes — Nick Kahn
– Nick Kahn, Commented Dec 11, 2014 at 4:37

Lukas Winzenried · Accepted Answer · 2014-12-11 14:48:47Z

Assuming that /home is the path of your MVC page

you should change your angular routing to use path's that are relative to your page.
add a view templates that are loaded into your page

the angular routing below would:

load your mvc page /home/index and inject the template dashboard.html into ng-view element (MVC controller Home with Action Index is required)
load your mvc page /home/index and inject the template about.html into ng-view element

Routes:

app_angular
    .config(function ($routeProvider, $httpProvider) {
        $routeProvider
        /* dashboard */
        .when('/', {
            controller: 'dashboard',
            templateUrl: '../../views/templates/dashboard.html'
        })
        .when('/about', {
            controller: 'dashboard',
            templateUrl: '../../views/templates/about.html'
        })
        .otherwise({
            redirectTo: '/'
        });
    });

Remark:

You should rethink your approach of mixing MVC and anjularjs that not a good approach. Try renaming your _layout.cshtml into index.html and start with a plain (ASP.NET MVC free) SPA.

Files:

index.html
views\dashboard.html
views\about.html

Routes:

app_angular
    .config(function ($routeProvider, $httpProvider) {
        $routeProvider
        /* dashboard */
        .when('/', {
            controller: 'dashboard',
            templateUrl: 'views/dashboard.html'
        })
        .when('/about', {
            controller: 'dashboard',
            templateUrl: '/views/about.html'
        })
        .otherwise({
            redirectTo: '/'
        });
    });

Collectives™ on Stack Overflow

Converting AngularJS to ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related