masalibの日記

システム開発、運用と猫の写真ブログです

Angular

Angular2/4 firebaseのストレージにアップ

今回も https://github.com/codediodeio/angular-firestarter/tree/master/src/app/uploads を参考にしていますサンプルとして既にあるのですが ファイルアップベースにfirebase functionを動かしたりしたいので 1から作って理解したいと思いやっています

Angular GoogleアナリティクスとGoogleタグマネージャーの設定

AngularはSPA(Single Page Application)なので初回以外は ページ遷移のイベントがとらないとアナリティクスに反映されない Angularだけじゃなく他のSPAでも多分同じの Googleタグマネージャーの設定を記載する

Angular Cloud Functionsの翻訳機能を試してみた

Google Cloud Functions and Firebaseを使って 自動翻訳する機能ができるみたいですが www.youtube.comおお・・・すごいという所で止まっており Angularでどうやってやるねん!!所が理解できなかったのですが やっとサンプルも見つかったんで再現してみた …

Angular adsenseを入れてみる

単純にテンプレートにadsenseタグを書いたら実行されなかった angularのコンパイル時に消えているらしいのでモジュールをいれて対応する 1・モジュールのインストール 2・index.htmlにadsenseのjsを追加 3・NgModuleに追加 4・テンプレートの修正

Angular firebaseで遊んでみる

現在、angularを使ってリアルタイムDBのfirebaseに チャットシステムを作って遊ぶということをやっています (facebook認証はできないですが)機能 ・SNSのログイン ・メールアドレスでのログイン ・chat機能 ・ToDO機能ある程度できた!! github.com実際の…

angularの動作確認用サーバー

angularのサンプルソースを作った時にスマフォで確認できるサーバーがない事に気がついた httpsが使えるFirebaseのhostingを使う事にしました (1Gまでは無料、5Gで20円ぐらい)下記のURLでnode.jsをインストール masalib.hatenablog.com開発環境の権限系で…

angularでInvalid Host headerと表示された

技術的な備忘録です 自分の開発環境はvagrant(virtualbox)でおこなっており 普通のmacやwindowsではなくcentos上に作っていますそのため、forwarded_portにportを設定しています config.vm.network "private_network", ip: "192.168.33.10" config.vm.netw…

angular:cliの自動コンパイルがフリーズしてしまう

Windows10にnode.jsをいれてangularをいれました 開発用のマシンを起動するコマンド ng serveこちらは超絶便利で、ソースを修正すると自動的にコンパイルしてくれて かつブラウザを自動ロードしてくれますこの自動機能がなぜかWindows10だとうまくきません …

angularを開発して使っているAtomのプラグイン

angularとは直接関係ないのですが Tag for Atomをインストールしています https://atom.io/packages/tagangularは独自タグ(セレクター)をもちいて、HTMLのテンプレートや挿入を おこなっています。その為、独自タグをいれる必要があるのですが そんな時に…

Angular:ngclassとngForOfについて

Angular(バージョン2以降)の勉強、その15です前回がstyleだったので今回はclassの指定です あと、ngForOfというリストのループで使用する list処理で使うので覚えておきたいです公式のreferenceはこちらngClass NgClass - ts - APIngForOf NgForOf - ts - …

Angular:ngStyle

Angular(バージョン2以降)の勉強、その14です styleを指定することで切り替えれる機能ですngIfみたいにhtmlを触れるディレクティブを勉強します今回はランダムで切り替えるようにしているのですが 今後は、行数やステータスで切り替わるようにできるみたい…

Angular:ngIf

Angular(バージョン2以降)の勉強、その13です Angularっぽい記載がでてきました DOMを操作するngIf(関数?ディレクティブ?)です これもformでよく使うと思うので覚えたいと思います TypeScript側(/app/servers/servers.component.ts)親子関係の親の…

Angular:インプットイベント

Angular(バージョン2以降)の勉強、その12です 前回でクリックイベントができたので 今回はインプットイベントになります formの部分で使うので大事です template側(/app/servers/servers.component.html) TypeScript側(/app/servers/servers.component…

Angular:クリックイベント

Angular(バージョン2以降)の勉強、その11です クリックイベントを起こすのを記載します 普通のjavascriptだと「onclick=xxxx」と記載しますが Angularだと「(click)="xxxxx"」と記載しますTypeScript側(/app/servers/servers.component.ts)親子関係の親…

Angular:プロパティーバイディング

Angular(バージョン2以降)の勉強、その10です 当たり前だけどhtmlのプロパティーも触れます その部分について記載します

Angular:データバイディング

Angular(バージョン2以降)の勉強、その9です tyepscriptの変数をhtmlのテンプレートというかHMTLに反映させる 講義ではデータバイディングみたいに記載してあった

Angular:独自タグじゃなくてdivタグをセレクターとして使う

Angular(バージョン2以降)の勉強、その8です 前回に続き使用用途よくわからないが もしかして使う可能性があるのでメモとして残します 独自タグじゃなくてdivタグをセレクターとして使う

Angular:テンプレートとcssファイルを使わないやり方

備忘録メモのその7です CLIで自動的に作ってくれるテンプレートとcssファイルがあるのですが それを使わない方法を記載します個人的には良くないと思うけど ファイルを読み込ませるのに時間かかるから?? それを省略するためにやっているのかな??

Angular:componentを作ってみる(CLI)

Angular(バージョン2以降)の勉強、その6です CLIで自動的に作ってくれる機能があるみたいなので そちらをやってみたいと思います

Angular:componentを作ってみる(手動)

Angular(バージョン2以降)の勉強、その5です componentはAngularでは重要な単位です今時のWEBデザインならヘッダー、メイン、サイドメニュー、フッターみたいな形になっています参考URL UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベ…

Angular:仕組みについて

Angular(バージョン2以降)の勉強、その4です100%の理解していないけど20〜30%の理解で進めています今回は「自動的に作ってコンパイルについて」みたいな所を記載します (ふわぁとしていてすいません)

Angular:bootstrapをインストール

Angular(バージョン2以降)の勉強、その3ですbootstrapをいれるみたい 理由はわからずに兎にも角にもいれてみました

Angular:その前にTypeScriptについて

Angular(バージョン2以降)の勉強、その2ですAngular(バージョン2以降)ははTypeScriptで記述しますTypeScriptとは、Microsoftが作った新しい言語です

Angular:Hello World

Angular(バージョン2以降)の勉強、その1ですあまりにも仕事が忙しすぎて ストレスがたまりなんか勉強したくなって衝動買いをしてしまった (1200円ぐらいいいよね!!みたいなノリで)https://www.udemy.com/the-complete-guide-to-angular-2/この講義…