Ionic3でカスタムコンポーネントを写経してみる

2017年7月1日

以下のサイトを写経してみたい。

Ionic 2: Custom Newsfeed Component Part 1
In Ionic 2, ionicFramework by semeJanuary 4, 2017
https://audacitus.com/site/2017/01/04/custom-feed-component-ionic-2-part-1/

（環境）
Windows 8.1
Ruby2.3.3-p222
SQLite 3.18.0
DevKit mingw64-64-4.7.2
Node.js v6.10.2
Rails 5.1.0
Git 2.8.1 

（１）VisualStudioCodeでCtrl+@でcmd.ezeを開き、以下のコマンドを入力。

ionic start newsfeed sidemenu
cd sidemenu
ionic serve

（２）feed コンポーネントの作成と、home.html　へ挿入。

ionic g component feed

以下のフォルダとファイルが自動作成される。

また、自動的に、src/app/app.module.ts  に、11行目と18行目が追加されている。

src/pages/home/home.html

(変更前)

(変更後)

feed.html は、

<div>{{text}}</div>

となっており、この {{text}}　のところに、feed.ts での、

text: string;
 
constructor() {
  this.text = 'Hello World';
}

のHello world　が代入され、それがhome.htmlに表示されていることになる。

これは簡単！

src/components/feed/feed.ts

(変更前)

(変更後)

（３）feedコンポーネントの修正。

（参考）
https://audacitus.com/site/2017/01/05/ionic-2-custom-newsfeed-component-part-2-styling-our-component/

feed.htmlを、以下に書き換える

<div class="feed-component">
  <img src="http://placehold.it/750x750/ffcc33">
  <h1>From Russia with Love</h1>
  <h6>Film</h6>
</div>

(変更前)

(変更後)

このサイトで初めて知ったが、この、placehold.itというサイトは面白い。

src/pages/home/home.html

(変更前)

(変更後)

●Adding the styles

src/components/feed/feed.html

(変更前)

(変更後)

src/components/feed/feed.scss

(変更後)

scssは私には難しすぎるが、とにかくｋ、Ionic3でcomponentを作成したい場合は、cmd.exeで、

ionic g component (コンポーネント名)

とすれば、簡単にできることが分かった。

（４）余談ですが、Routingについて、以下に分かりやすく記載されている。

Angular2とIonic2でのルーティング
kohashi
2017年01月10日に更新
http://qiita.com/kohashi/items/f424fb5dd897fc6317c9

 

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです！