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

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

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

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

以下基本示例應用程序概述了如何開始Angular JS開發。

1.包含AngularJS腳本

您在這里有兩個選擇。

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

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

thegeekstuff.com的AngularJS基本應用示例

2.綁定ng-app屬性

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

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

thegeekstuff.com的AngularJS基本應用示例

3.創建一個角度模塊

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

這樣可以使應用程序函數的變量與全局名稱空間分開。

您也可以將其編寫在單獨的javascript文件中，然后使用script標簽將其添加到視圖中。在下面的示例中，它是內聯的。

thegeekstuff.com的AngularJS基本應用示例

模塊的第二個參數是我們可能具有的模塊依賴關系數組。

4.創建一個控制器

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

這是一段

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

5.定義控制器范圍

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

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

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

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

該文本基本上是在應用程序模型中設置的，并由控制器范圍內的視圖上的數據驅動。