使用AngularJS學習MVC的基礎知識分享

如果您希望提升Web應用程式的伺服器端或客戶端，請繼續閱讀以瞭解如何在Angular中使用MVC。

介紹

 MVC和AngularJS。本文將對“MVC with AngularJS”初學者更有幫助。

哪種技術最好？
我們為什麼要使用MVC？
我們為什麼要使用AngularJS？
為什麼我們應該在MVC中使用AngularJS？
如何在MVC中配置AngularJS？

哪種技術最好？

如今，世界上有很多新技術，因此可能會出現一些混淆，哪些是可以選擇的，哪一種是構建我們的應用程式的最佳技術。

建議

大多數時候，程式設計師將在MVC中構建他們的應用程式，因為MVC（模型 - 檢視 - 控制器）是鬆散耦合的，我們可以重用模式的結構。

帶有WEB   MVC最適合伺服器端技術。我們可以為其他通訊裝置（移動裝置，iPad等）重複使用相同的服務，並且Web API將分別託管在IIS中。它會增加伺服器的效能。

Angular JS最適合客戶端。我們可以使用快速開發，對資料繫結非常有用，因為它使用RESTful協議。

我們為什麼要使用MVC？

 MVC為您提供了一種強大且基於模式的方式來構建動態網站，使您可以完全控制標記以獲得愉快的開發體驗。

模型 - 檢視 - 控制器（MVC）體系結構模式將應用程式分為三個主要元件。

模型

模型通常用於業務物件。它將直接管理資料，邏輯和應用程式的規則。

檢視

這是一個使用者介面，它顯示了操作的輸出。

調節器

控制器是應用程式的核心。它接受輸入並將其轉換為模型或檢視的命令。

 MVC的功能

Web API支援RESTful構建的MVC框架。
我們可以使用NuGet來安裝jQuery，AngularJS等。
我們可以將非同步操作方法編寫為單一方法，它返回任務的一個物件。
路由模組負責對映特定的控制器動作。

我們為什麼要使用AngularJS？

AngularJS是一種開源的指令碼語言。它將基於Model-View-Controller模式和最新的客戶端JavaScript進行工作。

資料繫結的最大優點之一是，只要模型發生變化，它就會自動更改檢視的值，並在檢視更改時更新模型。這被稱為雙向繫結。

AngularJS的特點

雙向資料繫結。
使用和支援MVC設計模式。
支援路由，就像單個頁面應用程式一樣。
支援RESTful服務。
依賴注入。

我們為什麼要在MVC中使用AngularJS？

 MVC和AngularJS都相容MVC模式，並且有許多專案可以在一起使用。這很好，因為您的MVC伺服器端程式碼為Angular客戶端呼叫提供了JSON結果。

另外，您可以使用MVC控制器來控制應用程式中的HTML檢視或剃刀檢視。這為您提供授權，重定向，錯誤處理等功能。

如何在MVC中配置Angular JS

開啟Visual Studio 2015並單擊=> File => New =>   Web Application。

現在，它會顯示下面給出的螢幕。選擇專案型別=>選擇Web API專案。

現在，開啟一個專案解決方案，如下所示。

右鍵單擊上述專案並選擇管理NuGet包。

點選瀏覽標籤並搜尋AngularJS。

我們必須下載AngularJS，AngularJS.Core和AngularJS.Route檔案。

下載完成後，這些檔案路徑將顯示在輸出視窗中。

新增新資料夾並建立新的JavaScript檔案為Ng.Module.js。

開啟_layout.cshtml頁面，並給ng-app的名稱是“Test”。

再建立一個JavaScript檔案來建立一個Angular控制器。

開啟Index.cshtml頁面並編寫ng-controller的程式碼，如下所示。

Link the AngularJS files in _layout.cshtml page

現在，執行（F5）應用程式。它會在瀏覽器中顯示結果。

轉載出處：