AngularJS與ASP.net MVC

好吧，這似乎越來越好了。AngularJS與ASP.net MVC

我一直在博客上閱讀博客，那裏的人解釋如何去做這件事，但無數小時後，刪除，添加，更改，調試，頭髮拉，大量的咖啡和沒有運氣得到這個工作，我轉向這裏尋求一些專業見解。

正如標題所示，我試圖通過Razor視圖獲得MVC 5中的角色，但我遇到了一些非常奇怪的行爲。

首先，在頁面加載時角度不起作用。我必須在着陸頁面至少5到10次之前刷新着陸頁。

當它最終起作用時，Chrome進入過燒狀態，在崩潰之前消耗幾乎所有可用資源。開發人員工具中的控制檯出現一條消息「警告：試圖加載角度多次」。

錯誤是非常具有描述性的，所以我假設我在兩次加載_layout.cshtml頁面，當客戶端路由最終啓動時，但每個Razor視圖都包含@ {Layout = null}調用，如同它在很多博客上都有解釋。

我已經嘗試了所有可能讀取的內容，但無法通過此問題。

之後，我的代碼：

ASP.Net Razor視圖

1）_Layout.cshtml

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="webStudio" data-ng-controller="StudioController"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title data-ng-bind="Page.title">...</title> 
    <base href="/" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 

    <div class="page {{css}}" data-ng-view=""> 
     @RenderBody() 
    </div> 

    <div class="__javascript-webstudio"> 
     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/ng") 
     @Scripts.Render("~/bundles/yeti") 
     @Scripts.Render("~/bundles/ngapp") 
     @Scripts.Render("~/bundles/ngfactory") 
     @Scripts.Render("~/bundles/ngservice") 
     @Scripts.Render("~/bundles/ngcontroller") 
     @RenderSection("scripts", required: false) 
    </div> 
</body> 
</html>

我認爲，這是因爲_layout.cshtml使用對於索引頁（Home），它是角實例化應該發生的地方。我見過博客，他們一起跳過_layout.cshtml，但爲了保持一致，我希望這是我的出發點。我試圖在Home/Index中不使用佈局，並且在那裏調用所有的腳本，但它完成了同樣的事情，幾次刷新和警告。

2）首頁/ Index.cshtml

@*{ 
    Layout = null 
}*@ 

<a href="@Url.Action("Index", "Gallery")">Go there</a>

Layout = null已被註釋掉，因爲這會導致_layout.cshtml到甚至沒有加載我的JS文件，怪異的行爲：/

3.）Gallery/Index.cshtml

@{ 
    Layout = null; 
} 

Date: @DateTime.Now

這只是一個頁面來測試路線。

4）的Web.config

<rewrite> 
    <rules> 
     <rule name="AngularJS" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
       <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
       <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
       <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
     </rule> 
    </rules> 
</rewrite>

重寫規則是很重要的，以確保路由適當地進行。我正在使用HTMLMode作爲角色，所以這一步至關重要。

5）app.js

var webStudio = angular.module("webStudio", ["ngRoute"]); 

webStudio.config(function ($routeProvider, $locationProvider) 
{ 
    $routeProvider 
     .when("", { 
      templateUrl: "/Home", 
      controller: "HomeController" 
     }) 
     .when("/", { 
      templateUrl: "/Home", 
      controller: "HomeController" 
     }) 
     .when("/Home", { 
      templateUrl: "/Home", 
      controller: "HomeController" 
     }) 
     .otherwise({ redirectTo: "/Error/NotFound" }); 

    $locationProvider.html5Mode(true); 
});

真的有什麼奇怪的這個，它會創建角應用參考，路由連接到模塊，並在那裏形成我配置路由行爲。

從我讀過的和理解的情況來看，像在ASP.Net MVC中通常那樣調用控制器/操作塊是有道理的。

MVC的默認路由我沒有碰到，因爲它在這個範圍內是不相關的。

我不知道爲什麼會發生此行爲，不知道從哪裏開始調查。我已經閱讀了關於刷新問題的博客，並嘗試了已經陳述的內容，但在這種情況下，我無法實現它的工作。

更新

6）BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new ScriptBundle("~/bundles/jquery") 
     .Include("~/Scripts/vendor/jquery/jquery-{version}.js") 
     .Include("~/Scripts/vendor/jquery/jquery.validate.js")); 

    bundles.Add(new ScriptBundle("~/bundles/ng") 
     .Include("~/Scripts/vendor/angularjs/angular.js") 
     .Include("~/Scripts/vendor/angularjs/angular-route.js")); 

    bundles.Add(new ScriptBundle("~/bundles/yeti") 
     .Include("~/Scripts/vendor/ngfoundation/mm-foundation-0.6.0.js")); 

    bundles.Add(new ScriptBundle("~/bundles/ngapp") 
     .Include("~/Scripts/app.js")); 

    bundles.Add(new ScriptBundle("~/bundles/ngfactory") 
     .Include("~/Scripts/factories/studio.js")); 

    bundles.Add(new ScriptBundle("~/bundles/ngservice") 
     .Include("~/Scripts/services/studio.js")); 

    bundles.Add(new ScriptBundle("~/bundles/ngcontroller") 
     .Include("~/Scripts/controllers/studio.js")); 

    bundles.Add(new ScriptBundle("~/bundles/modernizr") 
     .Include("~/Scripts/vendor/modernizr-*")); 

    bundles.Add(new StyleBundle("~/Content/css") 
     .Include("~/Content/normalize.css") 
     .Include("~/Content/foundation.css") 
     .Include("~/Content/site.css")); 
}

來源

2015-05-22 JadedEric

你的'BundleConfig.js'是什麼樣的？ – devqon

@devqon我也想到了這一點，我絕對不會從我能看到的兩次加載它 – JadedEric

@JadedEric我有相同的場景，並有一個不可阻擋的警告警告：試圖加載角多次。你找到它的解決方案嗎？ –

我認爲這將有助於你AngularJS with ASP.net MVC

有關設置angularJS在asp.net MVC應用程序按照以下步驟

首先加載所需的js。可以使用asp.net的MVC束

bundles.Add（新ScriptBundle（「〜/捆綁/角」）。包含（「〜/腳本/ angular.js」，「〜/腳本/角路由的.js「））;
修改_Layout.cshtml

添加新的js文件添加angularjs模塊，控制器等，這裏的ngRoute「是可選的（不是必須的，如果你不希望使用angularjs路由）

(function() { 
     //Create a Module 
     var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing 
     //Create a Controller 
     app.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller 
      $scope.Message = "Yahoooo! we have successfully done our first part."; 
     }); 
    })();

添加新的動作到你的控制器獲取視圖。

public ActionResult Index() 
      { 
       return View(); 
      }

的行動&設計添加視圖。

@{ 
     ViewBag.Title = "Index"; 
    } 

    <h2>Index</h2> 
    <div ng-controller="HomeController"> 
     {{Message}} 
    </div>

運行應用程序。

來源

2015-12-03 18:36:42

AngularJS與ASP.net MVC

回答

相關問題