將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

回答

相關問題