AngularJS在ASP.NET MVC-困惑

請注意：我已閱讀在堆棧溢出一些類似這樣的問題，但我以前不得到明確的概念，我從這些答案通緝。AngularJS在ASP.NET MVC-困惑

我爲什麼以及如何使用AngularJS用的ASP.NET Web API晶瑩剔透的概念。但是我對使用ASP.NET MVC的AngularJS感到困惑！

與的ASP.NET Web API AngularJS的案例：

的Web API控制器方法返回的數據和AngularJS調用Web API控制器方法並捕獲數據，然後呈現在視圖中的數據。這非常合乎邏輯！

與ASP.NET MVC AngularJS的案例：

ASP.NET MVC控制器方法本身返回的數據視圖/視圖。那麼，使用ASP.NET MVC的AngularJS有什麼用？

儘管如此，如果我想使用ASP.NET MVC AngularJS然後我不得不返回，而不是從ASP.NET MVC控制器的方法MVC視圖JSON。

我的問題是：

它是合乎邏輯的，從ASP.NET MVC控制器方法返回JSON而不是MVC視圖使用AngularJS與ASP.NET MVC的目的是什麼？如果我這樣做，是否有任何好處？
什麼是實際使用AngularJS與ASP.NET MVC？或者我可以在哪裏使用ASP.NET MVC的AngularJS？

來源

2016-11-25 TanvirArjel

網站API存在是因爲MVC從第一天開始就陷入癱瘓。 ASP.NET Core將兩者合併爲一起是MVC應該從第一天開始。 – Phill

它是合乎邏輯的，從ASP.NET MVC 控制器方法返回JSON而不是MVC視圖使用AngularJS與ASP.NET MVC 的目的是什麼？如果我這樣做，是否有任何好處？

我會說你可以。但是，如果您只想返回數據，ASP.NET Web API確實是一條可行的路。並且您的下一個問題的好處被回答...

AngularJS與ASP.NET MVC的實際使用是什麼？或者我在哪裏可以使用ASP.NET MVC的AngularJS ？

首先，你在使用MVC的呢？一些其他的服務器端渲染？在這個答案我假設你有純html文件。 MVC仍然可以與Angular一起使用。這裏有一對夫婦的情景：

比方說，你想限制訪問特定頁面/路由。這在MVC中非常簡單。

public class HomeController : Controller 
{ 
    [Authorize] // Authorize the user. 
    public ActionResult Index() 
    { 
     return View(); 
    } 
}

如果你想這樣做，用角和Web API，你將給予HTML的用戶訪問，而不是數據。這有點不同。使用MVC，您可以直接返回401。

2.可以省略顯示HTML。

比方說，你有一些HTML應該只對某些用戶可用。如果您使用Angular隱藏/顯示HTML，它仍然可供客戶使用。但是，如果您使用MVC並且完全不呈現HTML，則用戶無法使用該HTML。

角：

<button type="submit" ng-hide="true" />

MVC：

@if(someCondition) 
{ 
    <button type="submit" ng-hide="true" /> 
}

有藏匿在客戶端上的東西，而不是在所有給予信息提供給客戶一個很大的區別。

我結合使用MVC與角度。我使用MVC來呈現視圖。然後，我讓Angular從Web API獲取一些數據，然後顯示特定於數據的內容。

來源

2016-11-25 08:52:35 smoksnes

感謝您的付出！你幾乎涵蓋了我想要的一切！ – TanvirArjel

另一個用例是我們爲當前項目所做的國際化或本地化。與其要求web api使用法語/英語/其他語言獲取字符串，您可以使用mvc視圖來處理此問題。 '

@ Resources.HelloWorld

' –

我最近發佈了一個關於顯示angularjs與asp.net mvc的使用的博客系列。它解釋了這些強化了AngularJS應用的mvc的強大功能。如果你希望你可以在https://www.mindzgrouptech.net/km7f –

歷史MVC自帶先引入的ASP.NET Web API。

儘管如此，它是相同的技術只是有點不同的語法糖，以簡化您的發展爲輕微不同的情況。

但是你可以創建任何他們的API。

根據您的應用程序，它並不總是隻有從API提供的數據單頁的應用程序。您可能有許多不同的頁面，其中一部分在服務器上呈現，而另一部分則是動態的，數據從API加載或混合匹配。

目前有在.net中三個主要分支：

ASP.NET Web窗體
ASP.NET MVC（API）
ASP.NET CORE

選擇API爲某些客戶開發傳統的單頁面應用程序或api。如果您需要自定義API端點或更多控制構建視圖/零件視圖/模板或需要更多頁面，請選擇MVC。

注：當我談單頁的應用程序，我指的是應用程序，其中您導航到起始頁面一次，所有的路由，並享有部分在後臺下載，而整個頁面的重新加載。

來源

2016-11-25 08:45:27

謝謝！帕維爾Luzhetskiy，有一些知識！ – TanvirArjel

在我看來，你應該使用AngularJS +的ASP.NET Web API。 AngularJS + ASP.NET MVC可以「幫助」你，例如，具有快速啓動，你可以有身份驗證和授權中已經實現開箱即用。結合WebAPI，您應該手動實施它。這對小應用程序來說已經足夠了。但是你會得到與Razor代碼混合的AngularJS代碼。

這是更好地分離關注，並在溶液和的WebAPI在另一個項目AngularJS。並且只通過API進行通信。在這種方法中，您沒有像「返回JSON而不是查看是否合乎邏輯」的問題。

P.S.下面是一個很好的例子，您可以開始構建AngularJS + WebAPI應用程序：http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/。這是關於認證，但你可以得到一個想法。

來源

2016-11-25 08:50:19 elshev

它是邏輯從ASP.NET MVC 控制器方法返回JSON代替MVC視圖使用AngularJS與ASP.NET MVC的目的??如果我這樣做，是否有任何好處？

不，ASP.NET Web API是將JSON返回給瀏覽器的更專注和恰當的技術。

什麼是實際使用AngularJS與ASP.NET MVC？或在哪裏可以使用 AngularJS與ASP.NET MVC？

提供動態服務器生成的主頁作爲SPA應用程序的入口點。

您還可以提供動態服務器生成的模板以供角度應用程序使用。您可以自定義登錄用戶的頁面，或向其中注入一些數據。

如果每個頁面都是一樣的，你不需要在服務器端動態生成它，你可以使用一個靜態的html頁面。

在這裏你有在當前用戶名暴露App.currentUser的角度應用主頁面例子，相應的i18n javascript文件是基於瀏覽器的加載的文化：

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
@if (User.Identity.IsAuthenticated) 
{ 
    <script type="text/javascript"> 
     var MyApp = MyApp || {} 
     MyApp.currentUser = '@User.Identity.Name.Replace("\\","\\\\")'; 
    </script> 
} 
</head> 
<body ng-app="my-app"> 
    <div ng-view> 
     <h1>Welcome to MyApp</h1> 
     <p>Loading...</p> 
    </div> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.8/[email protected](Culture.ToLower()).min.js"></script> 
    <script type="text/javascript" src="scripts/app.js"></script> 
</body> 
</html>

來源

2016-11-25 08:56:14

閱讀這個系列謝謝JesúsLópez！爲你的偉大答案..瞭解！ – TanvirArjel

@TanvirArjel我添加了一個自定義主頁面的例子 –

AngularJS在ASP.NET MVC-困惑

回答

相關問題