日本語

AngularJS チュートリアル

AngularJS アプリケーション

以下は、提供された英文文本を日本語に翻訳し、Markdown形式で返したものです。

AngularJS - In-line Application

AngularJS - インラインアプリケーション

はじめに

こんにちは、未来のAngularJSのマエストロたち！この興奮人心的な旅にあなた们的ガイドとして参加できることを嬉しく思います。プログラミングを教えてきた年数は自分でも驚きますが（フロッピーディスクが実際にフロッピーだった時代を覚えています）、このチュートリアルの終わりまでに、あなたたちは自信を持って最初のAngularJSインラインアプリケーションを作成できるでしょう。

インラインアプリケーションとは？

コードに取りかかる前に、「インラインアプリケーション」について理解しましょう。bffetを思い浮かべてください（ここまでに来てください、このたとえは意味があることを約束します）。インラインアプリケーションは、bffetで好きな料理を一皿にまとめたようなものです。すべてのものがすぐそばにあります。AngularJSの言葉で言うと、単一のHTMLファイル内にアプリケーション全体を記述することを意味します。別のJavaScriptファイルや外部モジュールは一切ありません。純粋なAngularJSの良さそのものです。

最初のインラインアプリケーションの設定

ステップ1: HTMLの骨組み

まず、HTMLファイルの基本的な構造から始めましょう：

<!DOCTYPE html>
<html>
<head>
    <title>私の最初のAngularJSインラインApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

ウェブ開発をしたことがある人はこの構造が familiarなかもしれません。そうでない場合は、心配しないでください！単に基本的なHTMLドキュメントを設定し、CDNからAngularJSライブラリをインクルードしているだけです。AngularJSをコードパーティに招待しているようなものです。

ステップ2: ng-appディレクティブの追加

次に、AngularJSにアプリケーションの存在場所を伝えます：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>私の最初のAngularJSインラインApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

ng-app="myApp"を<html>タグに追加しました。これは、あなたの家に大きな看板を立てて「AngularJSがここに住んでいます！」と伝えるようなものです。myAppという名前は、私たちがアプリケーションに与える名前です。

コントローラーの作成

コントローラーとは？

AngularJSでは、コントローラーはアプリケーションの脳のようなものです。特定のアプリケーション部分のデータと振る舞いを管理します。作ってみましょう！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>私の最初のAngularJSインラインApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>

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

これを分解すると：

  1. <body>タグにng-controller="MainController"を追加しました。これにより、AngularJSはこのHTML部分をこのコントローラーが管理することを知ります。
  2. <script>タグ内でアプリケーションモジュールをangular.module('myApp', [])で作成します。
  3. app.controller()を使ってコントローラーを定義します。$scopeパラメータは、コントローラーとビュー（HTML）間でデータを渡すために使います。
  4. $scopeにgreetingプロパティを設定します。これにより、HTML内で利用可能になります。
  5. HTML内で{{greeting}}を使ってgreetingの値を表示します。

ユーザーインタラクションの追加

アプリケーションを少しもっとインタラクティブにするために、挨拶を変更するボタンを追加してみましょう：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>私の最初のAngularJSインラインApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>
    <button ng-click="changeGreeting()">挨拶を変更</button>

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

新しい部分：

  1. ボタンにng-clickディレクティブを追加しました。これにより、ボタンがクリックされたときにchangeGreeting()関数が呼び出されます。
  2. コントローラー内でchangeGreeting()関数を$scopeで定義し、greetingの値を変更します。

データバインディングの実装

AngularJSの最も強力な機能のひとつが二方向データバインディングです。実際に見てみましょう：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>私の最初のAngularJSインラインApp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
    <h1>{{greeting}}</h1>
    <input type="text" ng-model="name">
    <p>Hello, {{name}}!</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MainController', function($scope) {
            $scope.greeting = "Welcome to our AngularJS App!";
            $scope.name = "Anonymous";
        });
    </script>
</body>
</html>

この例では：

  1. ng-model="name"のinputフィールドを追加しました。これにより、inputの値が$scopeのnameプロパティにバインドされます。
  2. {{name}}を使ってパラグラフ内でnameの値を表示します。
  3. inputフィールドにタイプすると、実際に挨拶がリアルタイムで更新されます。これが二方向データバインディングの魔法です！

結論

おめでとうございます！あなたたちは最初のAngularJSインラインアプリケーションを作成しました。私たちはAngularJSアプリケーションの基本的な設定、コントローラーの作成、ユーザーインタラクションの処理、二方向データバインディングの実装について学びました。忘れてはならないのは、新しいスキルを習得するには練習が必要だということです。 therefore、実験をし、ものを壊し、間違いから学びましょう。それが私たちが今日の開発者になった理由です！

以下は、私たちが使用した主要なAngularJSディレクティブの表です：

ディレクティブ 目的
ng-app AngularJSアプリケーションを定義し、ブートストラップします
ng-controller アプリケーションの特定部分に対してコントローラーを指定します
ng-click 要素がクリックされたときに実行する関数を指定します
ng-model input、select、またはtextareaを$scopeのプロパティにバインドします

引き続きコードを書き、学び続け、最も重要なことは、楽しむことです！忘れないでください、すべての専門家もかつては初心者でした。あなたのAngularJSの旅は今始まっています！

Credits: Image by storyset

前のチュートリアル:
AngularJS - ファイルをアップロードする
次のチュートリアル:
AngularJS - ナビメニュー