{% raw %} # AngularJS 教程 – HelloWorld 示例 > 原文： [https://howtodoinjava.com/angularjs/angularjs-tutorial-helloworld-example/](https://howtodoinjava.com/angularjs/angularjs-tutorial-helloworld-example/) 本 **[AngularJS](https://angularjs.org/) 教程**涵蓋以下主題，這些主題將幫助您詳細學習 AngularJS。 ```java Table Of Contents Why AngularJS? Advantages of using AngularJS? Understanding AngularJS Components Building AngularJS HelloWorld application ``` ## 為什么選擇 AngularJS？ 最初建立網站時，它們純粹是在完整的請求 - 響應模型上工作。 流程就像–首先在瀏覽器中呈現了一個網頁–然后用戶在網頁中進行了任何互動，例如，表單提交或單擊按鈕–將向服務器發送新請求，然后從服務器返回整個新頁面以在瀏覽器中呈現響應。 在 Microsoft 引入[`XMLHttpRequest`](//howtodoinjava.com/2013/06/21/complete-ajax-tutorial/)之前，一直使用該模型，這使開發人員無需實際刷新頁面即可對服務器進行**異步**調用，并使用服務器響應來部分刷新頁面。 這使用戶體驗更加連貫，因為用戶可以執行需要遠程調用的任務，并且在進行和處理呼叫時仍可以與應用進行交互。 僅在此時間段內，大多數 JS 框架（如 jQuery，原型等）才出現。jQuery 是該列表中最引人注目的框架–可能仍然是 UI 開發的最佳和最簡單的選擇。 如果您從事過在 UI 組件中使用 jQuery 的相當大的項目，那么您可以在一段時間內輕松地將其關聯起來 - 代碼維護變得有些麻煩。 一段時間后，您的項目中將有 100 多個 JS 文件，甚至更多–所有這些文件都是相互引用的，而無需執行設計。 jQuery 確實是使編碼變得容易的絕佳框架，但是它缺乏任何可以在代碼庫增長時為我們提供幫助的結構性指導。 因此，我們最終得到了難以維護和測試的意大利面條代碼。 這是諸如[模型視圖控制器（MVC）](//howtodoinjava.com/scripting/implement-mvc-and-pubsub-in-javascript/)之類的架構模式和諸如 AngularJS 之類的框架出現的地方。 Google 的 AngularJS 是一個全面的 JavaScript 模型 - 視圖 - 控制器（MVC）框架，可讓您輕松輕松地快速構建可在任何臺式機或移動平臺上正常運行的應用。 AngularJS 完全支持單元測試，以幫助減少質量保證（QA）時間。 AngularJS 中的模型和視圖比大多數 JavaScript 客戶端框架中的模型和視圖簡單得多。 在其他 JavaScript 客戶端框架中經常缺少的控制器是 AngularJS 中的關鍵功能組件。 ## 使用 AngularJS 的優勢？ 讓我們記下 Angular 與其他框架相比提供的其他好處： * Angular 直接修改頁面 DOM，而不添加內部 HTML 代碼。 它更快。 * Angular 基于頁面中特定于 Angular 的元素屬性構建綁定。 這有助于減少編寫工作，使代碼更簡潔，更易于理解并且不易出錯。 * Angular 具有一些擴展功能，例如依賴項注入，路由，動畫，視圖編排等。 它們有助于編寫更健壯和可維護的代碼，并鼓勵良好的設計實踐。 * AngularJS 完全支持單元測試。 * Angular 中的 Pub-sub 系統支持上下文感知通信。 `broadcast()`將向所有子控制器發送一條消息，而`emit()`將向所有祖先發送一條消息。 * 它得到了 Google 和一個強大的開發社區的支持。 ## 了解 AngularJS 組件 我們已經知道 AngularJS 是基于 MVC 的結構化框架，因此我們將需要編寫許多組件和工具以使您的應用代碼結構化并得到良好維護。 讓我們簡短地學習這些組件。 我們將在下一個教程中詳細討論。 * #### 模塊 模塊是控制器，指令，過濾器，服務和其他配置信息的集合。 所有這一切的主要參與者是`angular.module()`，因為它是進入模塊 API（用于配置 Angular 模塊的機制）的網關。 它用于注冊，創建和檢索以前創建的 AngularJS 模塊。 例如，將以下代碼添加到新的 JavaScript 文件中，您可以將其命名為`myAppModule.js`。 ```java // Create a new module var myAppModule = angular.module('myAppModule', []); ``` 您剛剛創建了一個模塊。 很簡單，不是嗎？ 在`module()`中傳遞的數組參數可用于傳遞依賴項列表。 即該模塊所依賴的其他模塊。 我們沒有任何依賴項，因此我們只需傳遞一個空數組即可。 現在，您可以使用`myAppModule`變量來定義模塊特定的其他組件，例如控制器或過濾器。 例如： ```java // configure the module with a controller myAppModule.controller('MyFilterDemoCtrl', function ($scope) { // controller code would go here } ); ``` * #### 作用域 在 AngularJS 中，`$scope`是具有可用屬性和要使用方法的對象。 請注意，作用域可用于視圖和控制器。 在 AngularJS 中創建控制器時，會將`$scope`對象作為參數傳遞。 ```java var myAppModule = angular.module('MyFilterDemoCtrl', []); myAppModule.controller('myController', function($scope) { $scope.firstName = "Lokesh"; }); ``` 將屬性添加到控制器中的`$scope`時，視圖（HTML）可以訪問這些屬性。 ```java <div ng-app="myAppModule" ng-controller="myController"> <h1>{{firstName}}</h1> </div> ``` * #### 指令 AngularJS 指令是**擴展 HTML 屬性**，其前綴為`"ng-"`。 有一些預定義的指令，例如`ng-app`，`ng-init`和`ng-controller`。 此外，您也可以定義自己的指令。 例如，使用`ng-init`指令，您可以將應用數據初始化為某個默認值。 ```java <div ng-app="myAppModule" ng-init="firstName='Lokesh'"> <h1>{{firstName}}</h1> </div> ``` * #### 表達式 視圖中使用的范圍變量實際上是表達式。 這些表達式用大括號括起來：`{{ expression }}`。 您可以編寫簡單表達式以及復雜表達式，例如`{{ firstName + " " + lastName }}`或`{{ "id = " + 0 }}`。 * #### 控制器 在 Angular 中，控制器通過在范圍內設置初始狀態或值以及向范圍添加行為來擴展范圍。 例如，您可以添加一個對范圍內的值求和的函數，以提供總計，以便如果范圍后的模型數據發生更改，則總值始終會更改。 您必須使用“`ng-controller`”將控制器添加到 HTML 元素，然后在后臺將其實現為 JavaScript 代碼。 ```java <div ng-app="myApp" ng-controller="sumController"> First Value: <input type="text" ng-model="firstValue"><br> Second Value: <input type="text" ng-model="secondValue"><br> <br /> Sum is = {{sum()}} </div> <script> var app = angular.module('myApp', []); app.controller('sumController', function($scope) { $scope.firstValue = 5; $scope.secondValue = 10; $scope.sum = function() { return $scope.firstValue + $scope.secondValue; }; }); </script> ``` * #### 數據綁定或模型 這是 AngularJS 的最佳功能。 數據綁定是將來自模型的數據與網頁中顯示的內容鏈接起來的過程。 AngularJS 提供了一個非常干凈的界面，可以將模型數據鏈接到網頁中的元素。 在 AngularJS 中，數據綁定是一個雙向過程：在網頁上更改數據時，將更新模型，而在模型中更改數據時，將自動更新網頁。 這樣，**模型始終是表示用戶**的唯一數據源，**視圖只是模型**的投影。 上面“控制器”部分中的示例也是數據綁定的示例。 因此，當您在文本框中更改“第一個值”或“第二個值”時，求和字段將自動更新，而無需付出額外的努力。 太棒了。 * #### 服務 服務是 AngularJS 環境中的主要工作。 服務是為 Web 應用提供功能的單例對象。 例如，Web 應用的常見任務是執行對 Web 服務器的 AJAX 請求。 AngularJS 提供了一個 HTTP 服務，其中包含訪問 Web 服務器的所有功能。 服務功能完全獨立于上下文或狀態，因此可以輕松地從應用的組件中使用它。 AngularJS 提供了許多用于基本用途的內置服務組件，例如 HTTP 請求，日志記錄，解析和動畫。 您還可以創建自己的服務，并在整個代碼中重復使用它們。 例如，`$http`是用于從 Web 服務器讀取數據的核心服務。 我們可以按以下方式使用此服務。 ```java var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("some HTTP URL") .then(function(response) { //process the response here }); }); ``` * #### 編譯器 AngularJS 提供了一個 HTML 編譯器，它將在 AngularJS 模板中發現指令，并使用 JavaScript 指令代碼構建擴展的 HTML 元素。 引導 AngularJS 庫時，會將 AngularJS 編譯器加載到瀏覽器中。 加載后，編譯器將在瀏覽器中搜索 HTML DOM，并將任何后端 JavaScript 代碼鏈接到 HTML 元素，然后最終的應用視圖將呈現給用戶。 ## 構建 AngularJS HelloWorld 應用 到目前為止，我們已經了解了 AngularJS 中涉及的一些重要概念。 讓我們利用所有這些知識來構建我們的第一個 HelloWorld 應用。 在此示例中，我們將嘗試使用所有組件而不增加復雜性，以便于理解。 以后，如果需要，您可以嘗試添加功能，從而在此應用中增加更多的復雜性。 該應用顯示兩個文本框，您可以在其中輸入任何數字，然后單擊求和按鈕以添加值并更新顯示在它們下面的消息。 看起來像這樣的圖像：  AngularJS HelloWorld 應用界面 讓我們看一下 HTML 視圖和 Angular 控制器 JS 文件的代碼，以了解其工作原理。 #### `helloWorld.html` ```java <!doctype html> <html ng-app="helloWorldApp"> <head> <title>Hello World - AngularJS</title> </head> <body> <div ng-controller="MyController"> <span>First Value:</span> <input type="text" ng-model="first"> <br /> <span>Second Value:</span> <input type="text" ng-model="second"> <br /><br /> <button ng-click='updateSum()'>Sum</button> <br /><br /> {{heading}} {{total}} </div> <script src="angular.min.js"></script> <script src="app.js"></script> </body> </html> ``` #### `app.js` ```java var firstApp = angular.module('helloWorldApp', []); firstApp.controller('MyController', function($scope) { $scope.first = 5; $scope.second = 10; $scope.heading = 'Sum is : '; $scope.total = 15; $scope.updateSum = function() { $scope.total = parseInt($scope.first) + parseInt($scope.second); }; }); ``` 當您執行上面的 Angular 示例時，您將看到輸出作為附加圖像作為工作應用。 學習愉快！ {% endraw %}