使用AngularJS學(xué)習(xí)MVC的基礎(chǔ)知識(shí)分享

如果您希望提升Web應(yīng)用程序的服務(wù)器端或客戶端，請(qǐng)繼續(xù)閱讀以了解如何在Angular中使用MVC。

介紹

我以為我會(huì)分享我的經(jīng)驗(yàn)與微軟ASP.NET  MVC和AngularJS。本文將對(duì)“MVC with AngularJS”初學(xué)者更有幫助。

哪種技術(shù)最好？
我們?yōu)槭裁匆褂肕VC？
我們?yōu)槭裁匆褂肁ngularJS？
為什么我們應(yīng)該在MVC中使用AngularJS？
如何在MVC中配置AngularJS？

哪種技術(shù)最好？

如今，世界上有很多新技術(shù)，因此可能會(huì)出現(xiàn)一些混淆，哪些是可以選擇的，哪一種是構(gòu)建我們的應(yīng)用程序的最佳技術(shù)。

建議

大多數(shù)時(shí)候，程序員將在MVC中構(gòu)建他們的應(yīng)用程序，因?yàn)镸VC（模型 - 視圖 - 控制器）是松散耦合的，我們可以重用模式的結(jié)構(gòu)。

帶有WEB  API的ASP.NET  MVC最適合服務(wù)器端技術(shù)。我們可以為其他通信設(shè)備（移動(dòng)設(shè)備，iPad等）重復(fù)使用相同的服務(wù)，并且Web API將分別托管在IIS中。它會(huì)增加服務(wù)器的性能。

Angular JS最適合客戶端。我們可以使用快速開發(fā)，對(duì)數(shù)據(jù)綁定非常有用，因?yàn)樗褂肦ESTful協(xié)議。

我們?yōu)槭裁匆褂肕VC？

ASP.NET  MVC為您提供了一種強(qiáng)大且基于模式的方式來(lái)構(gòu)建動(dòng)態(tài)網(wǎng)站，使您可以完全控制標(biāo)記以獲得愉快的開發(fā)體驗(yàn)。

模型 - 視圖 - 控制器（MVC）體系結(jié)構(gòu)模式將應(yīng)用程序分為三個(gè)主要組件。

模型

模型通常用于業(yè)務(wù)對(duì)象。它將直接管理數(shù)據(jù)，邏輯和應(yīng)用程序的規(guī)則。

視圖

這是一個(gè)用戶界面，它顯示了操作的輸出。

調(diào)節(jié)器

控制器是應(yīng)用程序的核心。它接受輸入并將其轉(zhuǎn)換為模型或視圖的命令。

ASP.NET  MVC的功能

Web API支持RESTful構(gòu)建的MVC框架。
我們可以使用NuGet來(lái)安裝jQuery，AngularJS等。
我們可以將異步操作方法編寫為單一方法，它返回任務(wù)的一個(gè)對(duì)象。
路由模塊負(fù)責(zé)映射特定的控制器動(dòng)作。

我們?yōu)槭裁匆褂肁ngularJS？

AngularJS是一種開源的腳本語(yǔ)言。它將基于Model-View-Controller模式和最新的客戶端JavaScript進(jìn)行工作。

數(shù)據(jù)綁定的最大優(yōu)點(diǎn)之一是，只要模型發(fā)生變化，它就會(huì)自動(dòng)更改視圖的值，并在視圖更改時(shí)更新模型。這被稱為雙向綁定。

AngularJS的特點(diǎn)

雙向數(shù)據(jù)綁定。
使用和支持MVC設(shè)計(jì)模式。
支持路由，就像單個(gè)頁(yè)面應(yīng)用程序一樣。
支持RESTful服務(wù)。
依賴注入。

我們?yōu)槭裁匆贛VC中使用AngularJS？

ASP.NET  MVC和AngularJS都兼容MVC模式，并且有許多項(xiàng)目可以在一起使用。這很好，因?yàn)槟腗VC服務(wù)器端代碼為Angular客戶端調(diào)用提供了JSON結(jié)果。

另外，您可以使用MVC控制器來(lái)控制應(yīng)用程序中的HTML視圖或剃刀視圖。這為您提供授權(quán)，重定向，錯(cuò)誤處理等功能。

如何在MVC中配置Angular JS

打開Visual Studio 2015并單擊=> File => New =>  ASP.NET  Web Application。

現(xiàn)在，它會(huì)顯示下面給出的屏幕。選擇項(xiàng)目類型=>選擇Web API項(xiàng)目。

現(xiàn)在，打開一個(gè)項(xiàng)目解決方案，如下所示。

右鍵單擊上述項(xiàng)目并選擇管理NuGet包。

點(diǎn)擊瀏覽標(biāo)簽并搜索AngularJS。

我們必須下載AngularJS，AngularJS.Core和AngularJS.Route文件。

下載完成后，這些文件路徑將顯示在輸出窗口中。

添加新文件夾并創(chuàng)建新的JavaScript文件為Ng.Module.js。

打開_layout.cshtml頁(yè)面，并給ng-app的名稱是“Test”。

再創(chuàng)建一個(gè)JavaScript文件來(lái)創(chuàng)建一個(gè)Angular控制器。

打開Index.cshtml頁(yè)面并編寫ng-controller的代碼，如下所示。

Link the AngularJS files in _layout.cshtml page

現(xiàn)在，運(yùn)行（F5）應(yīng)用程序。它會(huì)在瀏覽器中顯示結(jié)果。

轉(zhuǎn)載出處：http://www.iis7.com/c/90/