AngularJS+Node.js+ionicでアプリ作成2

こんにちは、家のちかくの郵便局がゆうゆうメルカリ便に対応してなくて泣いたまみたすです。

さてさて田舎でやることといえば家にこもってアプリ作成ですね。
AngularJS+Node.js+ionicでアプリ作成1の続きです。      

サイドバーのあるアプリを作成する

    
前回は下にタブのあるアプリを立ち上げましたが、今回はサイドバーのあるアプリです。

ターミナルを開いて、フォルダを作成したい場所で

 

ionic start 作成したいフォルダ名 sidemenu

と打ち込みます。

※今回はionic1でやりたかったので、実際は「ionic start loverApp sidemenu –type=ionic1」でやりました

cd 作成したフォルダ名
ionic serve

で実行すると、こんな感じの画面が出て来ます。

左上のメニューボタンを押したところ

 

メニューを編集

ではちょっとずついじっていきます。
まずはメニューを作成。
いらないファイルを消して、とりあえずプロフィール、ホーム、設定を作ります。
アイコンを使いたい時は、ionicから提供されているこのアイコンたちを使うのが良いでしょう。

menu.htmlに以下のように書くとアイコンを使用したメニューが作れます。

 <i class=’ion-android-person icon’></i>Profile

 

いらないファイルは削除し、必要なファイルを作り(templates下にprofile.htmlなど)、app.jsを編集して
(細かい手順はこちらの動画を参照してください)

ブラウザを更新すると・・・

できたー!超簡単ですね。

ひとまず今日はここまで。
ionicって人気ないんでしょうか?全然記事が出てこない・・・。

The following two tabs change content below.
まみたす

まみたす

1992年生まれ。知識ゼロ文系女子からSEになっているところ。 カメラ、猫、お酒、旅行がすきです。
この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)