読者です 読者をやめる 読者になる 読者になる
一人もくもく会 α verでサービス開始しました。

Angular2

一人もくもく会をCakePHP3のみに変更

Angular + CakePHP3 で作成していた 一人もくもく会 だが、Angularを捨ててCakePHPのみに修正した。 お客さんのために作成したサイトでも何でもないのでSEO対策とかどうでも良かったのでAngularを入れて試したのだが、 そもそもGoogleボットがレンダリングし…

Angular2プロジェクトをwerckerで無料CI

Angular2のプロジェクトをwerckerで無料CIした時の設定ログ。 angular-cliのng testを使用。 要件 下記を満たすDockerイメージが必要となる。 node7が入れられる chromium-browserが入っている Dockerイメージ 要件を満たすものを探してみたけどうまく見つか…

CodeshipでAngular2の無料CI

CodeshipでAngular2プロジェクトの無料CIの設定方法。 Setup Commands nvm install 7.0 npm install -g npm@latest npm install @angular/cli npm install npm list --depth=0 Configure Test Pipelines ng test --single-run ng testはファイルの変更を検知…

Angular2のテスト時エラー備忘録

Angularでng testを行った時に色々とエラーが出るが、 検索するとだいたい決まりきったわけのわからない解決方法があり、 何度も調べたりすることになるのでメモっておくことにする。 随時更新。 ngModel ngModelでエラーの場合はFormsModuleをimports。(app…

angular-cliでAoTによる高速化

Angular2はAoTというものがあり、動作を高速化することができる。 他の記事で色々設定が必要というものを見かけるが、angular-cliを使っている場合は元々機能があるのですぐ有効化することができる。 ng build --prod --aot で有効化できるし、そもそも最新…

Angular2アプリケーションを通常のサーバーにデプロイ

Angular2アプリケーションをangular-cliでビルドすると公開用のdistフォルダが作成されるので、 基本的にはこれをサーバーにアップすればそのまま動作する。 ただ、jsファイルはハッシュ値がついてファイル名が変わってしまうため、 多少気をつけないといけ…

Angular2とCakePHP3を共存させる

AngularとCakePHPを共存、つまり同じホスト名で動作させたい場合。 例えば下記のように隣同士で並んでいるとする。 Angularはビルドしたdistフォルダのみの公開でその他のソースはアップなどはしない場合。 app dist 公開フォルダはAngular側のdistフォルダ…

一人もくもく会というサービスを作成

一人もくもく会というサービスを作成して公開した。 mokumoku.alphabrend.com 概要 世の中誰でも夜暇な時に適当にプログラミングをあれこれ試す時があると思うが、 そういった時のログを投稿できるサービス。 Qiitaやブログのようにきっちりプログラムや記事…

Angular2でコンポーネントのユニットテストを書いてみた

Angularのコンポーネントのユニットテストを書いてみた。 TestBedを使用しているパターン。 angular-cliでファイルを作成しつつ、 アプリケーションをある程度書いてng testしてみると大量にエラーが出るので、 それらをいくつかエラーが出ないように修正し…

Angular2でマークダウンエディタを使うディレクティブ

Angular2で下記のシンプルなマークダウンエディタを動作させるためのディレクティブを作ってみた。 github.com シンプルとはいえ、プレビューや、全画面表示によるプレビューを見ながらの編集、 ツールバーにカスタムボタンを追加など、結構機能が充実してい…

Angular2で共通データの管理(Shared Data)

Angularにて、アプリケーション全体で共通のデータを利用したいことなどがある。 例えばログインしているユーザーの情報など。 ダメな例 そこで共通データを管理するSharedDataService等を作る場合、 何も考えないと下記のようになると思う。 export class S…

Angularで自作コンポーネントのngModel双方向バインディング

Angularはinputタグ等のform用タグにて[(ngModel)]属性を使用すると双方向バインディングになる便利な機能がある。 これを自作した独自のコンポーネントで実現する方法。 簡単に言えば下記の解説通り。 blog.thoughtram.io ざっと説明すると下記の通り。 Con…

Angular2のuniversal-starterでangular/material2が使えない

Angular2はuniversal-starterから始めることで簡単にサーバー再度レンダリングができるが、 angular/material2を入れてみようとしたところ、 どうもエラーが出てうまく動かない。 検索してみると、どうも今はちゃんと動かないようだ。(2016-11-28現在) githu…

Angular2アプリを全部無料で公開してみる-Django編

Angular2で開発したアプリケーションを完全に無料で公開できる方法を考えてみた。 要件 上から順に重要度が高い。 Angular2 Angular2のサーバーサイドレンダリング対応 そこそこのDB容量 なるべく無料枠が大きいところ 開発しやすさ 考察 まず、Angular2をサ…

Angular2のフルスクリーンloading表示コンポーネント

Angular2用で何か処理をする間に オーバーレイでloadingを表示するコンポーネントの作成。 Angular2 fullscreen loading component 使い方 読み込む import { LoadingComponent } from "./loading.component"; ディレクティブ指定 directives: [LoadingCompo…