以下是您提供的英文文本翻译成繁體中文的版本：

AngularJS - Share Application

# AngularJS - 分享應用程式

你好，未來的 AngularJS 巫師們！今天，我們將踏上一段令人興奮的旅程，進入使用 AngularJS 來分享應用程式的世界。作為你們親切鄰居的計算機科學老師，我非常高興能夠指導你們這次冒險。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或你喜歡的飲料），我們一起來深入探索吧！

## 什麼是 AngularJS？

在我們深入分享應用程式之前，讓我們先來了解 AngularJS 是什麼。AngularJS 是一個強大的 JavaScript 框架，它幫助我們建立動態網頁應用程式。它就像一把瑞士軍刀對於網頁開發者來說，提供了讓我們生活更輕鬆、代碼更有組織的工具。

### 簡短歷史

AngularJS 由 Google 在 2010 年創建，並迅速在開發者中受到歡迎。它之所以被稱為 "Angular"，是因為 HTML 中使用的角括號 (<>)，而 "JS" 則代表 JavaScript。夠聰明吧？

## 設置開發環境

要開始使用 AngularJS，我們需要設定我們的開發環境。別擔心；這比組裝 IKEA 家具還要容易！

### 步驟 1：在您的專案中引入 AngularJS

首先，我們需要在 HTML 文件中引入 AngularJS 库。我們可以通過在 HTML 的 `<head>` 部分添加一個 script 標籤來做到這點：

```html
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

這行代碼從 Google 的伺服器上获取 AngularJS 库。這就像線上訂購披薩一樣——你需要什麼，就會直接送到你家門口！

創建我們的第一個 AngularJS 應用程式

現在，我們已經準備好 AngularJS，讓我們來創建我們的第一個應用程式。我們從簡單的東西開始——一個 "Hello, World!" 應用程式。

步驟 2：設置 HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <div ng-controller="myCtrl">
    <h1>{{ greeting }}</h1>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.greeting = "Hello, World!";
    });
  </script>
</body>
</html>

讓我們分解一下：

ng-app="myApp"：這告訴 AngularJS 這是我們應用程式的根元素。
ng-controller="myCtrl"：這定義了我們應用程式的控制器。
{{ greeting }}：這是一個 AngularJS 表達式，將顯示 greeting 的值。
在 script 中，我們創建了一個 AngularJS 模塊和一個控制器，然後設置了 greeting 的值。

當你在瀏覽器中打開這個 HTML 文件時，你會看到 "Hello, World!" 被顯示出來。恭喜！你剛剛創建了你的第一個 AngularJS 應用程式！

在控制器之間共享數據

現在，讓我們來到這堂課的重點——在我們應用程式的不同部分之間共享數據。這對於建造需要不同組件相互通訊的複雜應用程式至關重要。

使用服務

AngularJS 中的服務是一種在控制器之間共享數據的好方法。可以把服務想象成在應用程式不同部分之間傳遞消息的有用助手。

讓我們創建一個簡單的應用程式，使用服務在兩個控制器之間共享數據：

<!DOCTYPE html>
<html ng-app="shareApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <div ng-controller="Controller1">
    <h2>控制器 1</h2>
    <input type="text" ng-model="message">
    <button ng-click="shareMessage()">分享消息</button>
  </div>

  <div ng-controller="Controller2">
    <h2>控制器 2</h2>
    <p>共享消息: {{ sharedMessage }}</p>
  </div>

  <script>
    var app = angular.module('shareApp', []);

    app.service('ShareService', function() {
      var message = '';
      return {
        setMessage: function(msg) {
          message = msg;
        },
        getMessage: function() {
          return message;
        }
      };
    });

    app.controller('Controller1', function($scope, ShareService) {
      $scope.shareMessage = function() {
        ShareService.setMessage($scope.message);
      };
    });

    app.controller('Controller2', function($scope, ShareService) {
      $scope.sharedMessage = ShareService.getMessage();
      $scope.$watch(function() {
        return ShareService.getMessage();
      }, function(newValue) {
        $scope.sharedMessage = newValue;
      });
    });
  </script>
</body>
</html>

讓我們分解一下：

我們創建了一個名為 ShareService 的服務，它有設置和獲取消息的方法。
Controller1 有一个输入字段和一个按钮。當按鈕被點擊時，它會在 ShareService 中设置消息。
Controller2 顯示共享的消息。它使用 $watch 來更新當服務中的消息改變時顯示的消息。

這個例子展示了我們如何使用服務在兩個控制器之間共享數據。這就像在課堂上傳遞筆記，但效率更高！

高級共享技巧

在我們的 AngularJS 旅程中，我們會遇到更多共享數據的進階技巧。以下是一個總結這些方法的表格：

方法	描述	使用案例
服務	用於共享數據和邏輯的单例对象	在控制器之間共享數據
事件	发射和广播事件	父控制器和子控制器之間的通信
$rootScope	应用程序范围内的作用域	在整个应用程序中共享数据
工厂	类似于服务，但更灵活	创建和配置共享对象
值	简单的值对象	共享配置数据

每種方法都有其自身的優勢和使用案例。當你對 AngularJS 更為熟悉時，你將學會何時使用每一種。

結論

好了，各位！我們已經踏上了使用 AngularJS 分享應用程式的旅程。我們學習了如何設置 AngularJS 應用程式，創建控制器，並使用服務在它們之間共享數據。

記住，學習編程就像學騎自行車一樣——起初可能會有些晃動，但隨著練習，你會很快騎得飛快。持續實驗，持續編碼，最重要的是，玩得開心！

在我們的下一次課程中，我們將深入探討 AngularJS 指令，以及它們如何讓我們的應用程式更加動態和交互。到那時，快樂編碼！

Credits: Image by storyset