前の章では、イオンフレームワークをプロジェクトにインポートする方法を学びました。
次に、Ionic Appアプリケーションの作成方法を紹介します。
IONIC CREATESアプリはHTML、CSS、およびJavaScriptを使用して構築されているため、wwwディレクトリを作成し、ディレクトリにindex.htmlファイルを作成できます。コードは次のとおりです。
手順に従って、このアプリの作成を編集者に慎重に完了します。
<！Doctype html> <HTML> <head> <メタcharset = "utf-8"> <title> todo </title> <meta name = "viewport" content = "invisional-scale = 1、user-scalable = no、width = device-width"> <link href = "lib/css/css/css/css/css/ rel = "styleSheet"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <！ - cordova/phonegapで作成されたアプリに含まれるファイルは、cordova/phonegapによって提供されます（開発中に表示された404） - > <cordova.js "> </bow>
上記のコードでは、イオンCSSファイル、イオンJSファイル、およびイオン角度拡張Ionic.bundle.js（ionic.bundle.js）を導入しました。
Ionic.bundle.jsファイルには、イオンコアJS、AngularJS、およびイオンのAngularJS拡張機能が既に含まれています。他のAngularモジュールを導入する必要がある場合は、LIB/JS/Angularディレクトリからそれらを呼び出すことができます。
cordova.jsは、cordova/phonegapを使用してアプリケーションを作成するときに生成されます。手動で紹介する必要はありません。 Cordova/PhoneGapプロジェクトでファイルを見つけることができるため、開発中に404を表示するのが普通です。
アプリを作成します
次に、タイトル、サイドバー、リストなどを含むアプリケーションを実装します。デザイン図は次のとおりです。
サイドバーを作成します
サイドバーの作成では、イオン側のメナスコントローラーを使用します。
以前に作成したindex.htmlファイルを編集し、次のように<body>でコンテンツを変更します。
<body> <ion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-menu side = "left"> </ion-side-menu> </ion-menus> </body>
コントローラー分析：
ION-SIDE-MENUS：ボタンをクリックするか、画面をスライドさせることで拡張できるサイドバーメニューを備えたコンテナです。
Ionside-Menu-Content：メインコンテンツを表示するコンテナで、画面をスライドさせてメニューを展開できます。
イオンサイドメニュー：サイドバーを保管するためのコンテナ。
アプリを初期化します
次に、新しいAngularJSモジュールを作成して初期化します。コードはwww/js/app.jsにあります：
angular.module（ 'todo'、['inicic']）
次に、ボディタグにng-app属性を追加します。
<body ng-app = "todo">
index.htmlファイルに<スクリプトsrc = "cordova.js"> </script>にapp.jsファイルを紹介します。
<スクリプトsrc = "js/app.js"> </script>
index.htmlファイルボディタグのコンテンツを変更すると、コードは次のとおりです。
<body ng-app = "todo"> <ion-side-menus> <！ - センターコンテンツ - > <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ion-header-bar> <ion-content> </ion-content> <！ side = "left"> <ion-header-bar> <h1>プロジェクト</h1> </ion-header-bar> </ion-side-menu> </ion-side-menu> </body>
上記の手順では、イオン基本アプリのアプリケーションを完了しました。
リストを作成します
最初にコントローラーTODOCTRLを作成します：
<body ng-app = "todo" ng-controller = "todoctrl">
app.jsファイルで、コントローラーを使用してリストデータを定義します。
angular.module（ 'todo'、['ionic']）。コントローラー（ 'todoctrl'、function（$ scope）{$ scope.tasks = [{title： 'noviceチュートリアル'}、{title： 'www.runoob.com'}、{www.runoob.com '}、{title'}、 'titutorial'}。index.htmlページでは、Angular Ng-Reepeatを使用してデータを繰り返します。
<！ - センターコンテンツ - > <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ion-header-bar> <ion-content> <！ - list-> <ion-item ng-repeat = "タスクタスク "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content>変更後、index.htmlボディタグのコードは次のとおりです。
<body ng-app = "todo" ng-controller = "todoctrl"> <ion-side-menus> <！ - センターコンテンツ - > <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ion-header-bar> <ion-content>タスク "> {{task.title}} </ion-item> </ion-list> </ion-content> <！ - 左メニュー - > <ion-side-menu side =" left "> <ion-h1> projects </h1>> </ion-menu> </ion-side-menu> </ion-side-menu> </ion-side-menu> src = "http://www.runoob.com/static/ionic/js/app.js"> </script> <script src = "cordova.js"> </script> </body>追加ページを作成します
index.htmlを変更した後、次のコードを追加して</ionside-menus>：
<script id = "new-task.html" type = "text/ng-template"> <div> <！ - モーダルヘッダーバー - > <ion-header-bar> <h1> newタスク</h1> <button ng-click = "closenewtask（）" "> cancel </button> </ion-bar> </<> <> ng-submit = "createTask（task）"> <div> <label> <入力タイプ= "Text" Placeholder = "何をする必要がありますか？" ng-model = "task.title"> </label> </div> <div> <button type = "submit">タスクの作成</button> </div> </form> </ion-content> </div> </script>
上記のコードでは、 <script id = "new-task.html" type = "text/ng-template">を介して新しいテンプレートページを定義します。
createTask（タスク）関数は、フォームの送信時にトリガーされます。
ng-model =” task.title”は、フォームの入力データをタスクオブジェクトのタイトルプロパティに割り当てます。
コンテンツを<ionside-menu-content>で変更すると、コードは次のとおりです。
<！ - センターコンテンツ - > <Ion-Side-Menu-Content> <Ion-Header-Bar> <H1> todo </h1> <！ - ボタンを追加 - > <ボタンng-click = "Newtask（）"> </i> </i> </ionタスク "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> app.jsファイル、コントローラーコードは次のとおりです。Angular.module（ 'todo'、['inic']）。 {$ scope.tasks = [{title： 'Novice Tutorial'}、{title： 'www.runoob.com'}、{title： 'Novice Tutorial'}、{title： 'www.runoob.com'}]; //モデル$ ionicmodal.fromtemplateurlの作成とロード{$ scope.taskmodal = modal;}、{scope：$ scope、animation： 'slide-in-up'}）; // call $ scope.createTask = function（task）{$ scope.tasks.push（{title：task.title}）; $ scope.newtask = function（）{$ scope.taskmodal.show（）;}; //新しく追加されたモデル$ scope.closeNewtask = function（）{$ scope.taskmodal.hide（）;};}）;サイドバーを作成します
上記の手順を通じて、新しい機能を実装しました。これにより、アプリにサイドバー機能を追加します。
コンテンツを<ionside-menu-content>で変更すると、コードは次のとおりです。
<！ - センターコンテンツ - > <ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleProjects（）"> <i> </i> </button> <h1> {{ActiveProject.title}} </h1> <！ - ボタンを追加しますng-click = "newtask（）"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "task in ActiveProject.tasks "> {{ask.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content>サイドバーを追加します：<！ - 左利き - > <イオンサイドメニューサイド="左 "> ng-click = "newProject（）"> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "Project in projects" ng-click = "selectproject（project、$ index）" ng-class = "{active project = = =" project} "> {{project.title}} </ition-item> </ion-list> </ion-content> </ion-side-menu><ion-Item>のNGクラスディレクティブは、メニューのアクティベーションスタイルを設定します。
ここでは、新しいJSファイルApp2.jsを作成します（前のJSファイルApp2.jsと混同しないでください）、コードは次のとおりです。
Angular.module（ 'todo'、['ionic']）/***プロジェクトファクトリーは、ローカルストレージから保存とロードプロジェクトを処理し、*最後のアクティブプロジェクトインデックスを保存およびロードすることができます。 Angular.FromJson（ProjectString）;} return [];}、save：function（projects）{windocal.localStorage ['projects'] = angular.tojson（projects）;}、newproject：function（projecttitle）{// bew ProjectReturn {title：projectTitle、return {]}; parseint（window.localStorage ['lastactiveProject']）||、setlastactiveIndex：function（index）{windo.localStorage ['lastactiveProject'] = index;}}）。新しいプロジェクトを作成するためのユーティリティ関数指定されたProjectTitlevar createProject = function（projectTitle）{var newproject = projects.newproject（projectTitle）; $ scope.projects.push（newProject）; projects.save（$ scope.projects）;またはプロジェクトの初期化$ scope.projects = projects.all（）; //最後のアクティブ、または最初のプロジェクト$ scope.activeproject = $ scope.projects [projectlastactiveindex（）]; {createproject（projectTitle）;}}; //指定されたプロジェクトを選択するように呼び出されました$ scope.selectproject = function（project、index）{$ scope.activeproject = project; projects.setlastactiveIndex（index）; $ ionicsidemenudelegate.toggleleft（fals）;}; Modal $ IONICMODAL.FROMTEMPLATEURL（ 'New-Task.html'、function（Modal）{$ scope.taskmodal = modal;}、{scope：$ scope}）; $ scope.createTask = function（task）{if（！$ scope.actprojectprojectprojectprojeje {return;} $ scope.activeproject.tasks.push（{title：task.title}）; $ scope.taskmodal.hide（）; //非効率的ですが、すべてのprojectsprojects.save（$ scope.projects）; task.title = "";}; {$ scope.taskmodal.show（）;}; $ scope.closeNewtask = function（）{$ scope.taskmodal.hide（）;} $ scope.toggleprojects = function（）{$ ionicsidemenudelegate.toggleleft（）;};初期化//適切に$ timeout（function（）{if（$ scope.projects.length == 0）{while（true）{var projectTitle = prosp（ 'Your First Project Title：'）; if（projectTitle）{createProject（break;}}}}}）;}）;ボディのアイオンサイドメナスコードは次のとおりです:: <ion-side-menus> <！ - center content-> <ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleProjects（）"> <i> </i> </button>> ng-click = "newtask（）"> <i> </i> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "activeproject.tasks"> {{{{{{{{{task.title}} </ion-item> </nistem>列 - > <ion-side-menu Side = "left"> <ion-header-bar> <h1>プロジェクト</h1> <button ng-click = "newProject（）"> </button> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-list> <ion-list = "ng-cluct =" project " $ index） "ng-class =" {Active：ActiveProject == project} "> {{project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus>上記のコンテンツは、編集者が紹介したアプリプロジェクトをIonicがどのように作成するかのコード全体です。私はそれが誰にでも役立つことを願っています！