AngularJS RESTful Web Services drupal SPA(Single Page Application) Decoupled JavaScriptフレームワーク

Augula
drupalの取り込み。(views、コンテンツのデザインを補ったり。)

MS Edgeは正常に機能しないことがあるので、既定のブラウザをchromeに変えておく。

---------------------------------------
Angularとdrupalでデータのやりとりをするためにお互いに理解できる共通の規格が必要。

RESTful Web Services
REST(Representational State Transfer) という規格に従って情報のやりとりをする仕組み。
この仕組みを介してdrupalとAngularの間で情報のやりとりをする。

具体的には、drupalに入っているモジュール
WEB SERVICESグループのモジュールを全部オンにする。
HAL
Serializes entities using Hypertext Application Language.
HTTP Basic Authentication
Provides the HTTP Basic authentication provider
RESTful Web Services
Exposes entities and other resources as RESTful web APISerialization
Provides a service for (de)serializing data to/from formats such as JSON and XML
Install

REST UIーーー後から入れるモジュール

REST UIの設定
admin/config/services/rest/resource/entity%3Anode/edit
Home>>Administration>>Configuration>>Web services>>Rest
で
GranularityをMEthodにする。

下のGet Delete pachのxmlを除いたすべてをチェック。
GET
Accepted request formats
 hal_json
 json
 xml
Authentication providers
 basic_auth
 cookie
 POST
Accepted request formats
 hal_json
 json
 xml
Authentication providers
 basic_auth
 cookie
 DELETE
Accepted request formats
 hal_json
 json
 xml
Authentication providers
 basic_auth
 cookie
 PATCH
Accepted request formats
 hal_json
 json
 xml
Authentication providers
 basic_auth
 cookie

コンテンツを作る時に

URL PATH SETTINGS

の

URL alias

を設定しておく。

viewsを作る時にREST EXPORT SETTINGS-Provide a REST exportにチェック。

URLを記入する。
----------------------------------------
ここで設定したdrupalのhal_jsonまたはjsonファイルを取得するには
コンテンツのアドレスの後ろに
?_format=hal_json
?_format=json
をつける。

-----------------------------------------
Angularのインストール

AngularをインストールするのにNode.jsが必要。

Node.js-----サーバーサイドJavaScript
CentOSはEPELリポジトリからインストールできる。
Windowsは、Windows用のインストーラーがある。
インストール後
node -v
npmも使えるようになっているはず
npm -v
で確認。
ただ、angular-cliがangular/cliになって、その時にデフォルトの管理ツールがnpmからYARNというものになった。とか。
Yarn--FaceBook、Googleなどで共同開発している物だそうだ。
モジュールの並列ダウンロードによる高速化、ロックファイルによる依存関係のバージョンの固定など、いろいろと改良されているそうだ。
インストールは
npm install -g yarn
---------------------------------------------

Angularの設置。

自分で0から作ってもいいのだろうけど。

でも、それでは大変なので土台になる型を作ってそこから始める。

Angular QuickStartwを使った立ち上げ方法。
quickstart-master.zipをダウンロードして展開したルートフォルダーにコマンドプロンプトで移動して
npm install
この方法はアプリを立ち上げるたびに、この作業をする。
アプリの起動
npm start




Angular CLIをインストールしてng new アプリ名 で立ち上げる方法。
Angular CLIにはGITが必要らしい。
WindowsにはGit for Windows
Git-2.13.3-64-bit.exe
をインストール。

CentOS
npm install -g angular-cli
(angular-cliがangular/cliになった。のか。)

Windows--コマンドプロンプトで
npm install -g @angular/cli

インストールの確認は
ng --version
-----------------------------------------------------------------
アプリ毎に必要な土台を作る。

アプリの作成は、任意のフォルダーに移動して
ng new アプリ名

アプリの起動
今作った「アプリ名」フォルダに移動
cd アプリ名
して
ng serve
(アプリのビルドとWebサーバーの起動)
または
ng serve --open
(openはブラウザを自動で開くオプション)
すると、
http://localhost:4200/
に最初の画面が表示される。

確認したらctrl+cで抜ける。
抜けた後は当然http://localhost:4200/にはアクセスできなくなる。
-----------------------------------------------------
ライブラリなどのインストール
ここで、
yarn add intl bootstrap ngx-bootstrap --dev
これで、最新安定板が入る。
バージョンを指定するには
yarn add bootstrap@3 --dev
yarn add bootstrap@4 --devとして、バージョン４に安定板がない時には３の安定板か４のアルファ、ベータ版などから選択できるように表示される。
ダウングレードしたいときはそのバージョンを指定する。

npmを使いたい場合は
npm install --save intl@1 bootstrap@3.3.7
saveオプションはjsonファイルに書き込む

----------------------------------------------------
サーバーアップ用ディレクトリdistは
ng build --env=prod
で作られる。
(ここいら辺の事はよくわからない。よく調べてからやった方がいい。データバインドの自動更新の仕方など、オプションによってデベロップ版とプロダクション版で動きが違ってくるみたいだ。)
(ng build --prodだけだとうまくいかない。Environment "" does not exist.とエラーが出る。)

---------------------------------------------------------------
chromeブラウザにデフォルトでデベロッパーツールが入っている。
F12を押すか、Ctrl+Shif+iか、「その他のツール」>「デベロッパーツール」

2017年6月くらいから、
Filter icon missing from Chrome Developer tools console
デベロッパーツールのコンソールからフィルタアイコン、それから、正規表現(Regex)が消えたみたいだ。自分の必要なものだけを取り出して処理の順番を見たいときはどうするの？
普通にスペースで区切って並べて書いてもうまくいかない。

augury
デベロッパーツールのエクステンションとしてchromeにインストールする。
https://augury.angular.io/
ただ、今(2017/08/10)のところAngular4には対応していないみたいだ。

-----------------------------------------
検証しとく

Angular側
HttpModule

Drupal側
jDrupal

-----------------------------------------

ディレクトリ構造。など。

src/app/

以下にファイルを作っていく(ファイルができている)。

src/app/app.module.tsなど、
モジュールに関しての情報。
モジュール、コンポーネントをインポート。など。
(.tsはTypeScriptの略)

src/app/app.component.tsなど、
コンポーネントに関しての情報。
taitle = 'タイトル'　などが書かれているところ。

src/app/app.component.html
サイトの大枠。

src/app/app.component.css
CSS情報

src/main.ts
モジュールをインポートして起動。


------------------------------------------------
どうして下のようなことを書いたのか忘れた。一応、消さずにとっておく。
srcと同じフォルダ？で、
npm startコマンド

-------------------------------------------------------
Angular推薦IDE(Integrated Development Environment)
WebStorm(個人向け $59 first year)
IntelliJ IDEA(個人向け $149 first year)
Visual Studio Code(無料。プラグインなどを自分で設定する)

------------------------------------------------------
Firebase----いろいろと便利らしい
Ajax--------同一画面での動的なサイト作りができる。(サーバーから一画面毎に画面を送信するのではなく。)
JSON(JavaScript Object Notation)---(小さい、複雑なことも記述できる)データベース
-------------------------------------------------------
ng2-bootstrapはngx-bootstrapに名前が変わっている。
yarn add ngx-bootstrap --dev