はじめに
こちらの記事では、Javascriptを利用する上で便利なフレームワーク
AngularJsについてインストールから
簡単な利用方法を紹介したいと思います。
基礎なので、入門編としてよんでいただけると！
AngularJsのディレクティブの紹介 ng-clickなどを紹介！使い方
AngularJsとは？
AngularJsはJavascriptでWEBアプリケーションを開発するのに便利な
MEANスタック
の頭文字”A”のJavascript用MVC(Model View Controller)フレームワークになります。
MEANスタックに関しては下記記事で記述しています。
MEANスタックとは？よく聞くMEANSTACKについて簡単に紹介いたします！ミーンスタックとは
AngularJsはJavascriptのフレームワーク Reactと同じく最も使われている
フレームワークの1つです。提供元もGoogleなので信頼できますね！
AngularJsには、HTMLを簡単に使用できるよう、多くのコンポーネントを含んでおります。
また双方向データバインディングを導入しております。
これらのおかげでアプリの画面操作⇒データ処理⇒画面への反映をスムーズにすることができます！
WEBアプリケーション向けなので、ios androidなどでコードを書き換える必要がないので、動作端末が多くページ遷移が多くない
アプリを作る場合はAngularJsが必須になりますね。
AngularJsのインストール、ダウンロード方法
まずはじめにAngularJsのパッケージのダウンロードをする必要があります。
ダウンロード方法は下記の2つのどちらかになります。私は②がおすすめです！
①直接ダウンロードする
②CDNをHTMLに記述する
①直接ダウンロードする
1つ目の方法はパッケージをダンロードして、直接ファイルを参照する方法になります。
ダウンロードは下記AngularJs公式ホームページからダウンロードすることができます。
ダウンロードが完了したら”angular.min.js” or “angular.js”を任意のフォルダーに格納して
HTMLの<script>タグの中でインポートして完了
②CDNをHTMLに記述する
ÇDNはリンクをソースに記載するだけでパッケージをよみこんでくれます！
リンクは下記URLからコピーできます。
上記でCDNのリンクをコピーできたら
下記のようにscriptタグでインポートして完了です！
AngularJsでよく使う用語の紹介
AngularJsを読み込むことができたら、実際にAngularJsをつかってみましょう！
使う際に決められた記述方法がありますので、まずはそちらを紹介します。
まずはAngularJsで使われる単語を覚えましょう！
| ディレクティブ Directive | ng-〜で始まるやつ
双方向バインディングを実現するために重要 主な役目は
|
| モジュール Module | 簡単に言うとオブジェクトになります
アプリケーションの最初に記述する必要があるものになります |
| コントローラー controller | モデル（変数みたいなもの）とView（ユーザーが操作する画面）を操作するためのコンポーネント
HTMLの要素選ぶのは $scopeを使うか、as記法を 使う場合が多い |
| スコープ $scope | 簡単に言うとJsファイルのコントローラーのなkに記述することで
htmlの任意の要素を参照（DI 依存性注入） することができる |
| {{ }} | エクスプレッション構文
双方向バインディングをするために必要 実際に見てみるのが早いです！ |
基本的には下記の様に記述すればつくれる。
高度なものはガイドブックをみるとよい
＜ガイドブックリンク＞
下記に簡単な使い方を記述します！
AngularJsの使い方
①ng-appをangularJsを使いたいHTMLファイルのディレクトリータグに記載する
②Module⇒controllerの指定方法(as記法)
③$scopeを使ってDI 双方向バインディングを実現
①ng-appの記述
いざAngularJsを使うためには
htmlにng-appの記述が必要になります。
ng-appの記述された中をAngularJsで参照することができるからです。
任意のディレクトリータグに記述しますが、基本的には
<html>の中に記述するのをおすすめします。
②Module⇒controllerの指定方法(as記法)
使い方の基本としては、
JsファイルにModule , controllerからHTMLの要素を参照する
次にHTML内に記入する
実行結果はこちら
$scopeを使ってDI 双方向バインディングを実現
ModuleやControllerは先程と同じになります。
さきほどはas記法を使ってJsファイルからHTMLファイルの
任意の要素を指定しましたが、こちらでは
$scopeを使っての参照をします。
上記で問題なく動いた
他のディレクションをつかって便利な双方向バインディングを実際に下記記事で紹介いたします！
わからないことありましたらご連絡ください！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
