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

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

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 

image_thumb_thumb

(1)VisualStudioCodeでCtrl+@でcmd.ezeを開き、以下のコマンドを入力。

image

(2)feed コンポーネントの作成と、home.html へ挿入。

image

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

image

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

image

image

image

src/pages/home/home.html

(変更前)
image

(変更後)
image

feed.html は、

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

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

これは簡単!

src/components/feed/feed.ts

(変更前)
image

(変更後)
image

(3)feedコンポーネントの修正。

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

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

(変更前)
image

(変更後)
image

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

src/pages/home/home.html

(変更前)
image

(変更後)
image

●Adding the styles

src/components/feed/feed.html

(変更前)
image

(変更後)
image

src/components/feed/feed.scss

(変更後)
image

image

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

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

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

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

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

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする