AngularJS チュートリアル
AngularJSを使い始める

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
サーチ…


備考

AngularJSは、リッチなクライアントサイドのアプリケーション開発を簡素化するために設計されたWebアプリケーションフレームワークです。このドキュメントは、より近代的なAngular 2の前身であるAngular 1.xまたはAngular 2のStack Overflowドキュメントを参照してください。

バージョン

バージョン発売日
1.6.5 2017-07-03
1.6.4 2017-03-31
1.6.3 2017-03-08
1.6.2 2017-02-07
1.5.11 2017-01-13
1.6.1 2016-12-23
1.5.10 2016年12月15日
1.6.0 2016-12-08
1.6.0-rc.2 2016-11-24
1.5.9 2016-11-24
1.6.0-rc.1 2016-11-21
1.6.0-rc.0 2016-10-26
1.2.32 2016-10-11
1.4.13 2016-10-10
1.2.31 2016-10-10
1.5.8 2016-07-22
1.2.30 2016-07-21
1.5.7 2016-06-15
1.4.12 2016-06-15
1.5.6 2016年5月27日
1.4.11 2016年5月27日
1.5.5 2016-04-18
1.5.4 2016-04-14
1.5.3 2016-03-25
1.5.2 2016-03-19
1.4.10 2016-03-16
1.5.1 2016-03-16
1.5.0 2016-02-05
1.5.0-rc.2 2016-01-28
1.4.9 2016-01-21
1.5.0-rc.1 2016-01-16
1.5.0-rc.0 2015-12-09
1.4.8 2015-11-20
1.5.0-beta.2 2015-11-18
1.4.7 2015-09-30
1.3.20 2015-09-30
1.2.29 2015-09-30
1.5.0-β.1 2015-09-30
1.5.0-beta.0 2015-09-17
1.4.6 2015-09-17
1.3.19 2015-09-17
1.4.5 2015-08-28
1.3.18 2015-08-19
1.4.4 2015-08-13
1.4.3 2015-07-15
1.3.17 2015-07-07
1.4.2 2015-07-07
1.4.1 2015-06-16
1.3.16 2015-06-06
1.4.0 2015-05-27
1.4.0-rc.2 2015-05-12
1.4.0-rc.1 2015-04-24
1.4.0-rc.0 2015-04-10
1.3.15 2015-03-17
1.4.0-beta.6 2015-03-17
1.4.0-beta.5 2015-02-24
1.3.14 2015-02-24
1.4.0-beta.4 2015-02-09
1.3.13 2015-02-09
1.3.12 2015-02-03
1.4.0-β.3 2015-02-03
1.3.11 2015-01-27
1.4.0-beta.2 2015-01-27
1.4.0-beta.1 2015-01-20
1.3.10 2015-01-20
1.3.9 2015-01-15
1.4.0-beta.0 2015-01-14
1.3.8 2014年12月19日
1.2.28 2014年12月16日
1.3.7 2014-12-15
1.3.6 2014-12-09
1.3.5 2014-12-02
1.3.4 2014-11-25
1.2.27 2014-11-21
1.3.3 2014-11-18
1.3.2 2014-11-07
1.3.1 2014-10-31
1.3.0 2014-10-14
1.3.0-rc.5 2014-10-09
1.2.26 2014-10-03
1.3.0-rc.4 2014-10-02
1.3.0-rc.3 2014-09-24
1.2.25 2014-09-17
1.3.0-rc.2 2014-09-17
1.2.24 2014-09-10
1.3.0-rc.1 2014-09-10
1.3.0-rc.0 2014-08-30
1.2.23 2014-08-23
1.3.0-β.19 2014-08-23
1.2.22 2014-08-12
1.3.0-β.18 2014-08-12
1.2.21 2014-07-25
1.3.0-β.17 2014-07-25
1.3.0-β.16 2014-07-18
1.2.20 2014-07-11
1.3.0-β.15 2014-07-11
1.2.19 2014-07-01
1.3.0-β.14 2014-07-01
1.3.0-β.13 2014年6月16日
1.3.0-β.12 2014-06-14
1.2.18 2014-06-14
1.3.0-beta.11 2014年6月6日
1.2.17 2014年6月6日
1.3.0-beta.10 2014-05-24
1.3.0-β.9 2014-05-17
1.3.0-beta.8 2014-05-09
1.3.0-beta.7 2014-04-26
1.3.0-beta.6 2014-04-22
1.2.16 2014-04-04
1.3.0-beta.5 2014-04-04
1.3.0-beta.4 2014-03-28
1.2.15 2014-03-22
1.3.0-β.3 2014-03-21
1.3.0-beta.2 2014-03-15
1.3.0-beta.1 2014-03-08
1.2.14 2014-03-01
1.2.13 2014-02-15
1.2.12 2014-02-08
1.2.11 2014-02-03
1.2.10 2014-01-25
1.2.9 2014-01-15
1.2.8 2014-01-10
1.2.7 2014-01-03
1.2.6 2013年12月20日
1.2.5 2013-12-13
1.2.4 2013-12-06
1.2.3 2013-11-27
1.2.2 2013-11-22
1.2.1 2013-11-15
1.2.0 2013-11-08
1.2.0-rc.3 2013年10月14日
1.2.0-rc.2 2013-09-04
1.0.8 2013-08-22
1.2.0rc1 2013-08-13
1.0.7 2013-05-22
1.1.5 2013-05-22
1.0.6 2013-04-04
1.1.4 2013-04-04
1.0.5 2013-02-20
1.1.3 2013-02-20
1.0.4 2013-01-23
1.1.2 2013-01-23
1.1.1 2012-11-27
1.0.3 2012-11-27
1.1.0 2012-09-04
1.0.2 2012-09-04
1.0.1 2012-06-25
1.0.0 2012-06-14
v1.0.0rc12 2012-06-12
v1.0.0rc11 2012-06-11
v1.0.0rc10 2012-05-24
v1.0.0rc9 2012-05-15
v1.0.0rc8 2012-05-07
v1.0.0rc7 2012-05-01
v1.0.0rc6 2012-04-21
v1.0.0rc5 2012-04-12
v1.0.0rc4 2012-04-05
v1.0.0rc3 2012-03-30
v1.0.0rc2 2012-03-21
g3-v1.0.0rc1 2012-03-14
g3-v1.0.0-rc2 2012-03-16
1.0.0rc1 2012-03-14
0.10.6 2012-01-17
0.10.5 2011年11月8日
0.10.4 2011-10-23
0.10.3 2011-10-14
0.10.2 2011年10月8日
0.10.1 2011-09-09
0.10.0 2011-09-02
0.9.19 2011-08-21
0.9.18 2011-07-30
0.9.17 2011-06-30
0.9.16 2011年06月08日
0.9.15 2011-04-12
0.9.14 2011-04-01
0.9.13 2011-03-14
0.9.12 2011-03-04
0.9.11 2011-02-09
0.9.10 2011-01-27
0.9.9 2011-01-14
0.9.7 2010-12-11
0.9.6 2010-12-07
0.9.5 2010-11-25
0.9.4 2010-11-19
0.9.3 2010-11-11
0.9.2 2010-11-03
0.9.1 2010-10-27
0.9.0 2010-10-21

入門

新しいHTMLファイルを作成し、次のコンテンツを貼り付けます。 

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

ライブデモ

ブラウザでファイルを開くと、入力フィールドの後にHello, World!というテキストが表示されますHello, World! 。入力の値を編集すると、ページ全体を更新することなく、テキストがリアルタイムで更新されます。

説明：

  1. コンテンツ配信ネットワークからAngularフレームワークをロードします。 

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

  2. ng-appディレクティブを使用してHTMLドキュメントをAngularアプリケーションとして定義する

    <html ng-app>

  3. ng-initを使用してname変数を初期化する

    <body ng-init=" name = 'World' ">

    ng-initは、デモンストレーションとテストの目的でのみ使用されるべきであることに注意してください。実際のアプリケーションを構築する場合、コントローラはデータを初期化する必要があります。

  4. モデルからHTMLコントロールのビューにデータをバインドします。 ng-model nameプロパティに<input>をバインドする

    <input ng-model="name" />

  5. 二重括弧{{ }}を使用してモデルからコンテンツを表示する

    <span>Hello, {{ name }}</span>

  6. nameプロパティをバインドする別の方法は、ハンドルバー"{{ }}"代わりにng-bindを使用ng-bindことです

     <span ng-bind="name"></span>

最後の3つのステップは、 双方向データバインディングを確立します。入力に加えられた変更はモデルを更新し、 ビューに反映されます 。

ハンドルバーとng-bind使用には違いがあります。ハンドルバーを使用すると、式が解決される前（データがロードされる前）にページがロードされるので、実際のHello, {{name}}れることがあります。一方、 ng-bindを使用ng-bind 、解決されました。代わりに、ハンドルバーがコンパイルされる前に表示されるのを防ぐために、 ng-cloakディレクティブを使用することもできます。

すべての一般的なAngular構造を表示する

次の例は、1つのファイル内の一般的なAngularJS構造を示しています。 

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

ファイルのすべての行について以下に説明します。

ライブデモ

  1. ng-app="myDemoApp" 、アプリケーションをブートストラップし、DOM要素が"myDemoApp"という名前の特定のangular.moduleによって制御されるように指示するngAppディレクティブ 。
  2. <script src="angular.min.js">はAngularJSライブラリをブートストラップする最初のステップです。

以下に示す3つの関数（ MyDataService 、 DemoController 、およびstartup ）が宣言されています。

  1. 配列で2番目の引数として使用されたangular.module(...)は、新しいモジュールを作成します。この配列は、モジュールの依存関係のリストを提供するために使用されます。この例では、 module(...)関数の結果を呼び出して連鎖します。

  2. .service(...)は角度サービスを作成し、連鎖のためのモジュールを返します。

  3. .controller(...)は角型コントローラを作成し、連鎖のためのモジュールを返します。

  4. .config(...)このメソッドを使用して、モジュールのロードに必要な作業を登録します。

  5. .run(...)は、起動時にコードが実行され 、項目の配列をパラメータとして.run(...)ようにします。このメソッドを使用して、インジェクタがすべてのモジュールのロードを完了したときに実行される作業を登録します。

    • 最初の項目は、 startup関数が組み込みの$rootScopeサービスを引数として注入する必要があることをAngularに知らせるものです。
    • 2番目の項目は、 startup関数が組み込みの$windowサービスを引数として注入する必要があることをAngularに知らせるものです。
    • 配列の最後の項目であるstartupはstartupに実行される実際の関数です。

  6. ng-classあるngClassディレクティブの動的設定するclass 、この例では利用hasStarted上$rootScope動的

  7. ng-cloakは、 Angularがアプリケーションを完全にロードする前に、レンダリングされていないAngular htmlテンプレート（例えば、 " {{ msg }} "）を一時的に表示しないようにする指示です。

  8. ng-controllerは、特定の名前の新しいコントローラをインスタンス化してDOMのその部分を編成するようAngularに要求する指令です。

  9. ng-repeatは、コレクションに対してAngularを反復させ、各アイテムのDOMテンプレートを複製する指示です。

  10. {{ msg }}ショーケース補間 ：オンスポットスコープ又は制御装置の一部のレンダリングを、

スコープの重要性

Angularは、HTMLを使用してWebページと通常のJavascriptを拡張してロジックを追加するので、 ng- app 、 ng-controller 、 ng-if 、 ng-repeatなどのビルトインディレクティブを使用してWebページを簡単に作成できます。 。新しいcontrollerAs構文を使用すると、Angularユーザーの新規ユーザーは、 $scopeを使用する代わりに、関数とデータをコントローラに追加でき$scope 。

しかし、遅かれ早かれ、この$scopeものが何であるかを理解することが重要です。それはいくつかの理解を持つことが重要であるので、例で表示され続けるでしょう。

良いニュースは、シンプルで強力なコンセプトだということです。

以下を作成するとき： 

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

名前はどこに住んでいますか？

答えは、Angularが$rootScopeオブジェクトを作成するということです。これは単純に通常のJavascriptオブジェクトなので、 nameは$rootScopeオブジェクトのプロパティです。 

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

Javascriptのグローバルスコープと同じように、グローバルスコープや$rootScopeアイテムを追加することは、通常はあまり良いことではありません。

もちろん、ほとんどの場合、コントローラを作成し、必要な機能をそのコントローラに組み込みます。しかし、コントローラを作成すると、Angularはそれを魔法にして、そのコントローラ用の$scopeオブジェクトを作成します。これはローカルスコープと呼ばれることもあります 。

したがって、次のコントローラを作成します。 

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

$scopeパラメータでローカルスコープにアクセスできるようになります。 

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

$scopeパラメータを持たないコントローラは何らかの理由でそれを必要としないかもしれません。ただし、controllerAs構文を使用しても、ローカルスコープが存在することを認識することが重要です。

$scopeはJavaScriptオブジェクトなので、Angularは$rootScopeからプロトタイプ的に継承するように魔法のように設定します。あなたが想像することができるように、一連のスコープが存在する可能性があります。たとえば、親コントローラにモデルを作成し、親コントローラのスコープに$scope.modelとしてアタッチすることができます。

その後、プロトタイプチェーンを介して、子コントローラは$scope.model使用してその同じモデルにローカルにアクセスできます。

最初はAngularがバックグラウンドでその魔法をやっているので、これは最初は明白ではありません。しかし、 $scope理解することはAngularの仕組みを知る上で重要なステップです。

最も単純な可能性のある角度のあるHello World。

Angular 1はDOMコンパイラの中心にあります。テンプレートとしても、通常のWebページとしてもHTMLを渡して、アプリケーションをコンパイルすることができます。

{{ }}ハンドルバーのスタイル構文を使用して、ページの領域を式として扱うようにAngularに指示できます。中括弧の間のものは、次のようにコンパイルされます： 

{{ 'Hello' + 'World' }}

これは出力されます： 

HelloWorld

ng-app

ng-app ディレクティブを使用してDOMのどの部分をマスターテンプレートとして扱うかをAngularに伝えます。ディレクティブは、アングルテンプレートコンパイラが対処する方法を知っているカスタム属性または要素です。今すぐng-appディレクティブを追加しましょう： 

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

私は今、body要素にルートテンプレートと告げました。その中の何かがコンパイルされます。

指令

ディレクティブはコンパイラディレクティブです。 Angular DOMコンパイラの機能を拡張します。 Misko、角度の作成者は、通りの角を説明し、なぜこれがあります：

「Webアプリケーションのために構築されたWebブラウザとは何か？

文字通り、新しいHTMLの属性と要素を作成し、それらをアプリケーションにコンパイルします。 ng-appは単にコンパイラを有効にする指令です。その他の指令には、

  • ng-clickクリックハンドラを追加し、
  • 条件付きで要素をng-hideにするng-hide
  • <form> ：標準のHTMLフォーム要素に追加の動作を追加します。

Angularには、最も一般的なタスクを達成するための約100の組み込み指令があります。私たち自身も書くことができ、これらは組み込みの指示と同じように扱われます。

一連のディレクティブの中からAngularアプリケーションを構築し、HTMLと一緒に配線します。

角度の細分化

ミニネーションとは何ですか？

これは、機能を変更することなく、ソースコードから不要な文字をすべて削除する処理です。

標準構文

コントローラの作成に通常の角度構文を使用すると、ファイルを最小化した後で、それが機能を壊すことになります。

コントローラ（縮小前）： 

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

minification toolを使用した後、以下のように細分化されます。 

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

ここで、minificationは不要なスペースと$ scope変数をコードから削除しました。だから私たちはこのミニコードを使用すると、何も表示されません。 $ scopeはコントローラとビューの間で重要な部分であるため、小さな 'e'変数で置き換えられます。したがって、アプリケーションを実行すると、不明なプロバイダの 'e'依存エラーが発生します。

ミニネイションセーフであるサービス名情報を使用してコードに注釈を付けるには、2つの方法があります。

インライン注釈の構文 

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ injectプロパティ注釈構文 

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

縮小後、このコードは

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

ここでは、angleは変数 'a'を$ scopeとみなし、出力を 'Hello World！'と表示します。

AngularJS入門ビデオチュートリアル

egghead.ioには、AngularJSフレームワークに関する多くの優れたビデオチュートリアルがあります

ここに画像の説明を入力



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow