/var/log/messages

debugging with sixth sense

Ionic チュートリアル試してみる

とりあえず導入から。

1
2
$ sudo apt-get install npm -fy
$ npm install -g ionic cordova

で、以下を読みつつすすめてみます。

以下でどうなるのか。

1
$ ionic start MyIonicProject tutorial

と思ったら

ionic が見つからない。これってでびあんにありがちな npm が古い、というやつなのかどうか。

こうしてみた

1
2
3
4
5
6
$ sudo npm install -g npm@latest
npm WARN package.json path-is-inside@1.0.2 No README data
npm WARN package.json sorted-object@2.0.1 No README data
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@5.5.1 /usr/local/lib/node_modules/npm

駄目らしい。いったん nodejs および npm を削除。

1
$ sudo apt-get remove nodejs npm

nvm を使います

以下、とのこと。

1
2
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

て、よくよく見てみるに $HOME に .nvm があるぞ。なので

1
2
3
$ cd $HOME/.nvm
$ git fetch origin
$ git merge origin/master

で、こうなのか。

1
$ nvm install stable

どうも v8.7.0 というナニが導入されたようです。で、再度 ionic および cordova 導入。sudo なしで大丈夫なのか。

1
$ npm instal -g ionic cordova

なんか sudo ナシで、って思ったら .nvm 配下に、な模様。成程。

プロジェクト作成リトライ

以下にて。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ ionic start MyIonicProject tutorial
✔ Creating directory ./MyIonicProject - done!
[INFO] Fetching app base 
       (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
✔ Downloading - done!
[INFO] Fetching starter template tutorial 
       (https://github.com/ionic-team/ionic2-starter-tutorial/archive/master.tar.gz)
✔ Downloading - done!
✔ Updating package.json with app details - done!
✔ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
✔ Running command - done!
> git init

? Connect this app to the Ionic Dashboard? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

Next Steps:
Go to your newly created project: cd ./MyIonicProject

とりあえず MyIonicProject ディレクトリが作成されているようです。

動作確認

以下らしく。

1
2
$ cd MyIonicProject
$ ionic serve

なんか自動で firefox 起動してますね。

中身を見てみます

Project Structure によれば ./src/index.html が main entry point との事。ただ、このファイルはかなりスルー気味で ./src/ 配下を云々しているようです。要点? を以下に列挙してみます。

  • src ディレクトリの中では uncompiled なコードがあります
  • ionic アプリが仕事する場所
  • ionic serve した時、ブラウザが理解できる javascript に transpile される
  • TypeScript で云々するけどそれは JS に compile down、なのか
  • エントリポイントとしては src/app/app.module.ts な模様
  • 全ての app にアプリケーションを制御する root module がある
  • ionicBootstrap というものを使っている模様
  • src/app/app.component.ts が root compnent らしい
  • 最初に load される component とのこと
  • テンプレが src/app/app.html とのこと

たしかに app.component.ts に以下な記述がありますね。

1
2
3
@Component({
  templateUrl: 'app.html'
})

root component に関する解説はないのかな、と言いつつ続きを確認してみます。

Comments