※ 導入したばかりでよくわかってません。間違った情報があることも含みおきの上お読み下さい。
Angular JSが新しく、Angular 2 になって新登場です。
新登場といっても既に半年ほど経過していますが、ずっとどこかのタイミングで切り替えるスキを伺っていました。
だんだん安定してきているようですし、世間の注目度もAngular JSからAngular 2になっているようですから、私もいよいよ導入です。
ionic2になった
Angular 2に変わったことで、ionicも ionic 2 へとバージョンアップを遂げました。
デザインなどはionic同様におしゃれで、モダンなデザインです。とても良い。
ionic2公式マニュアルは当然英語Onlyですが、意外とGoogle機械翻訳で解読できます。
(Angular 2とは偉い違いだ）
ionic2 機械翻訳だが意外と読めるものだ
ionic 2のセットアップ
ionicのころとおんなじで、CLIで行います。やっぱりMacで良かった開発環境。
ionic start appname tabs –v2
最後に –v2 と書けばionic2 でセットアップしてくれます。
少し待てばセットアップ完了です。
プロジェクトを起動するには、 ionicと同じ
ionic serve と叩けばブラウザ上で実行されます
ionic2 ディレクトリ構造
ここはionicと大きく変わりました。
/src 以下にプログラムを作っていきます。
/src/app/以下はアプリ全体の情報とかです。ionicでいう app.js にあたる箇所です。
/src/pages/以下は各ページです。ionic2では１つのページに付き、1ディレクトリを作るようです。
１つのページは、HTMLファイル(テンプレート)、タイプスクリプトファイル、SCSSファイルによって構成されます。
擬似ログインページからタブページへ遷移までを作ってみる
一般的なアプリのように、ログインページを作ってみます。
ログイン後、タブレイアウトのページへ遷移するという流れまでをざっくり書いてみましょう。
もちろん、ログインの処理は有りません。ダミーです。
ざっくりいうと、ボタンを押したらログイン成功してタブレイアウトに行くだけのものです。
プロジェクトは、 tabsレイアウトでセットアップしたと想定します。
ログインページを作る
ionic2でページを追加します。なんとCLIからページが追加できるのです。なかなか便利ですね。
プロジェクトの場所でコマンドを入力します
ionic g page login
これで、/src/pages/loginディレクトリが作成されました。
ディレクトリ内は
login.html
login.ts
login.scss
の３つが勝手に追加されてるはずです。
プロジェクト全体の設定
使用するファイルやら、コンポーネントやら、追加する必要があるようです。ionicでもmoduleの追加みたいな感じでやりましたね。
app.component.tsファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="hljs-keyword">import</span> { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;<span class="hljs-keyword">import</span> { Platform } <span class="hljs-keyword">from</span> <span class="hljs-string">'ionic-angular'</span>;<span class="hljs-keyword">import</span> { StatusBar, Splashscreen } <span class="hljs-keyword">from</span> <span class="hljs-string">'ionic-native'</span>;<span class="hljs-keyword">import</span> { TabsPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/tabs/tabs'</span>;<span class="hljs-keyword">import</span> {LoginPage} <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/login/login'</span>;<span class="hljs-meta">@Component</span>({ templateUrl: <span class="hljs-string">'app.html'</span>})<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> MyApp { <span class="hljs-comment">// rootPage = TabsPage;</span> rootPage = LoginPage; <span class="hljs-keyword">constructor</span>(<span class="hljs-params">platform: Platform</span>) { platform.ready().then(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-comment">// Okay, so the platform is ready and our plugins are available.</span> <span class="hljs-comment">// Here you can do any higher level native things you might need.</span> StatusBar.styleDefault(); Splashscreen.hide(); }); }} |
LoginPageのコンポーネントを使うため、importしています。LoginPageコンポーネントは
ionic g page login
で追加されているはずです。
コンポーネントは、クラスとテンプレートを併せたようなものだと思います。多分。
rootPageがアプリ起動時に最初に表示されるページです。 ui-routerに慣れてしまっていたので違和感しか感じない。。。でも慣れるしかないですね。
初期では rootPageはTabsPageに設定されているので、これを LoginPageに切り替えます。
それ以外はデフォルトのままです。
app.module
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="hljs-keyword">import</span> { NgModule, ErrorHandler } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;<span class="hljs-keyword">import</span> { IonicApp, IonicModule, IonicErrorHandler } <span class="hljs-keyword">from</span> <span class="hljs-string">'ionic-angular'</span>;<span class="hljs-keyword">import</span> { MyApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.component'</span>;<span class="hljs-keyword">import</span> { AboutPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/about/about'</span>;<span class="hljs-keyword">import</span> { ContactPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/contact/contact'</span>;<span class="hljs-keyword">import</span> { HomePage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/home/home'</span>;<span class="hljs-keyword">import</span> {LoginPage} <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/login/login'</span>;<span class="hljs-keyword">import</span> { TabsPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/tabs/tabs'</span>;@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, LoginPage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, LoginPage, TabsPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]})<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppModule</span> {}</span> |
ここでは追加するコンポーネントを列挙してく感じですね。declarationsとentryComponentsの箇所に LoginPage コンポーネントを追加していきます。
もちろんimportも忘れずに
login.html
1 2 3 | <span class="hljs-tag"><<span class="hljs-name">ion-content</span> <span class="hljs-attr">padding</span>></span><span class="hljs-tag"><<span class="hljs-name">button</span> (<span class="hljs-attr">click</span>) = <span class="hljs-string">"login()"</span>></span>LOGIN<span class="hljs-tag"></<span class="hljs-name">button</span>></span><span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span> |
練習なので超シンプルです。ログインフォームなのにIDもパスワードも入れません。ボタンを押したらログイン処理が始まります。
この(click)=”login()”という書き方もなんか馴染めないですねぇ。
ng-click=”login()”のほうがよかったなぁ。何なんでしょうこの( )は・・・双方向、単方向データバインドの使い分けとか色々あるみたいですが。
とにかくこれでボタンクリック時にlogin()が実行されます
login.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="hljs-keyword">import</span> { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;<span class="hljs-keyword">import</span> { NavController, NavParams } <span class="hljs-keyword">from</span> <span class="hljs-string">'ionic-angular'</span>;<span class="hljs-keyword">import</span> {TabsPage} <span class="hljs-keyword">from</span> <span class="hljs-string">'../tabs/tabs'</span>;<span class="hljs-comment">/* Generated class for the Login page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation.*/</span><span class="hljs-meta">@Component</span>({ selector: <span class="hljs-string">'page-login'</span>, templateUrl: <span class="hljs-string">'login.html'</span>})<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> LoginPage { <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> navCtrl: NavController, <span class="hljs-keyword">public</span> navParams: NavParams</span>) {} login(){ <span class="hljs-keyword">this</span>.navCtrl.push(TabsPage); }} |
ionicではstate.goとかを使った遷移をしていましたが、ionic2ではNavControllerを使うようです。
ionic2がデフォルトでコンストラクタのコードを生成してくれているので、使うのは簡単です。
constructor(public navCtrl: NavController, public navParams: NavParams) {}
の部分ですね。
実際にボタンが押された時動くプログラムは
this.navCtrl.push(TabsPage);
です。thisは省略できないみたい。遷移するにはNavControllerのもつpushメソッドを使うようです。
余談ですが@component内のselectorは各ページ用ディレクトリのSCSSと紐付けするためのものらしく、１ページ毎にSCSSが使えるようにデフォルトでなっています。templateUrlはHTMLファイルをテンプレートとして紐付けています。
とりあえずこれで動きました。
所感
正直とっつきにくいです。
まだ比較的リリースから日が浅いのもあって、日本語の情報も少ないし、Angular 2も後続と言うよりは全くの別物です。
TypeScriptも全くわからなかったのでその辺も勉強し直し。
通信処理はrxJS？という技術が使われてるらしく、その辺も含めて敷居が高いです。
ただ慣れてくればきっと面白い言語なんだろうと思います。Angular JS自体がトリッキーな言語でしたからね。
$scopeとか、依存度注入とか、ファクトリーとサービスの違いとか。
それを思えばAngular 2のほうが「普通の言語」らしさを感じられます。
