将AngularJS转换为ASP.NET MVC

我当前正在将AngularJS HTML应用程序转换为ASP.NET MVC，并且我已经布置了几乎所有内容，但是当页面加载时，我看到控制器（dashboard.js）但它没有触发从这里仪表板控制器的任何功能是我在做什么：在我_layout.cshtml将AngularJS转换为ASP.NET MVC

我有以下几点：

<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（第一种方法：不工作）

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（第二种方法：不工作）

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

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

还有什么我应该做的任何帮助吗？

来源

2014-12-11 Nick Kahn

无控制台错误？你有'ng-view'元素吗？ – Phil 2014-12-11 04:01:09

没有控制台错误，我在页面中有'ng-view/ng-include'元素，我已更新我的问题以反映更改 – 2014-12-11 04:37:46

我在想我的路由被搞砸了？ – 2014-12-11 04:38:37

假设/ home是你的MVC页

，你应该改变你的角度路由使用路径的是相对于你的页面的路径。
添加装载到页面下方

角路由将一个视图模板：

加载你的MVC页/首页/指数和注入模板dashboard.html到NG-视图元素（MVC控制器首页与行动指数是必需的）
加载你的MVC页/首页/指数和注入模板about.html到NG-view元素

条

路线：

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: '/' 
     }); 
    });

备注：

你应该重新审视自己的混合MVC的办法，那anjularjs不是一个好办法。尝试将您的_layout.cshtml重命名为index.html，并使用普通（ASP.NET MVC免费）SPA开始。

文件：

的index.html
意见\ dashboard.html
视图\ about.html

路线：

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: '/' 
     }); 
    });

来源

2014-12-11 11:09:13

不起作用，我试过了 – 2014-12-11 13:40:09

将AngularJS转换为ASP.NET MVC

回答

相关问题