您可以下載angular的最新版本并將其添加到您的視圖腳本中

ngular.js是Google開發(fā)和維護(hù)的客戶端JavaScript框架。引入它是為了使靜態(tài)html動態(tài)。換句話說，它與數(shù)據(jù)中的任何更改同步更新Web應(yīng)用程序的視圖(模型)。它使視圖數(shù)據(jù)受驅(qū)動。它使我們能夠靈活地選擇要在Web應(yīng)用程序中使用的設(shè)計模式。

在這里，ViewModel包含表示邏輯，以將其與MVC模式區(qū)分開。此外，angular.js創(chuàng)建兩種方式的數(shù)據(jù)綁定，即，數(shù)據(jù)對象中的任何更改都同時反映在視圖上，而視圖中的任何更改都會在數(shù)據(jù)對象中得到更新。因此，在不考慮頁面重定向或頁面刷新的單頁面應(yīng)用程序開發(fā)中，這是一個不錯的選擇。

在MVC(模型視圖控制器)模式中，應(yīng)用程序的設(shè)計使得Modal包含數(shù)據(jù)以及業(yè)務(wù)邏輯，View包含演示腳本(html標(biāo)記)，并且控制器是Modal與視圖之間的中介。此模式通常與服務(wù)器端腳本語言(如PHP)一起使用。

但是，在客戶端框架中，經(jīng)常使用MVVM(模式視圖ViewModel)模式，可以通過使用angular.js來完成。

以下基本示例應(yīng)用程序概述了如何開始Angular JS開發(fā)。

1.包含AngularJS腳本

您在這里有兩個選擇。

您可以下載angular.js的最新版本并將其添加到您的視圖腳本中。

或者，您可以使用腳本部分下面提到的URL使用Google提供的托管庫。

thegeekstuff.com的AngularJS基本應(yīng)用示例

2.綁定ng-app屬性

在此示例中，我們使用“ ng-app”指令將名為“ someApp”的模塊綁定到div元素。

在此步驟中，將ng-app屬性(指令)綁定到html標(biāo)簽中的模塊名稱，在該位置我們要引導(dǎo)角度應(yīng)用程序。我們將在下一步中創(chuàng)建模塊。

thegeekstuff.com的AngularJS基本應(yīng)用示例

3.創(chuàng)建一個角度模塊

接下來，創(chuàng)建一個角度模塊并將其添加到您的視圖中。

這樣可以使應(yīng)用程序函數(shù)的變量與全局名稱空間分開。

您也可以將其編寫在單獨(dú)的javascript文件中，然后使用script標(biāo)簽將其添加到視圖中。在下面的示例中，它是內(nèi)聯(lián)的。

thegeekstuff.com的AngularJS基本應(yīng)用示例

模塊的第二個參數(shù)是我們可能具有的模塊依賴關(guān)系數(shù)組。

4.創(chuàng)建一個控制器

在下面的示例中，我們通過鏈接方法創(chuàng)建一個控制器。

這是一段

請注意，在上面的代碼中，我們已在控制器中使用“ $ scope”對象，該對象可在視圖中訪問。因此，它縫合了控制器和視圖。

5.定義控制器范圍

最后，在html標(biāo)記中使用ng-controller指令定義控制器的范圍。

在上面的代碼中，我們使用使用車把模板綁定{{}}的角度表達(dá)式訪問范圍對象變量。

將以上腳本復(fù)制并粘貼到html文件中，然后在任何瀏覽器中將其打開，以查看運(yùn)行中的AngularJS。

您將在瀏覽器中看到文本“ thegeekstuff.com的AngularJS基本應(yīng)用示例”。

該文本基本上是在應(yīng)用程序模型中設(shè)置的，并由控制器范圍內(nèi)的視圖上的數(shù)據(jù)驅(qū)動。