Home > Developer > JavaScript
How does Ionic create an APP project?
In the previous chapter, we have learned how to import the ionic framework to a project.
Next we will introduce how to create an ionic APP.
The ionic creation APP is built using HTML, CSS, and Javascript. Therefore, we can create a www directory and create the index.html file under the directory. The Code is as follows:
Follow the steps to create the APP in your editor.
<! DOCTYPE html>The above Code introduces the Ionic CSS file, Ionic JS file, and Ionic AngularJS extension ionic. bundle. js (ionic. bundle. js ).
The ionic. bundle. js file already contains AngularJS extensions of Ionic core JS, AngularJS, and Ionic. If you need to introduce other Angular modules, you can call them from the lib/js/angular directory.
Cordova. js is generated when you use Cordova/PhoneGap to create an application. You do not need to introduce it manually. You can find this file in the Cordova/PhoneGap project, therefore, it is normal to display 404 during development.
Create an APP
Next, we will implement an application that includes the title, sidebar, and list. The design diagram is as follows:
Create sidebar
Use the ion-side-menus controller to create a sidebar.
Edit the previously created index.html file and modify the content in <body> as follows:
<body><ion-side-menus><ion-side-menu-content></ion-side-menu-content><ion-side-menu side="left"></ion-side-menu></ion-side-menus></body>Controller Resolution:
Ion-side-menus: a container with a sidebar menu. You can click a button or slide the screen to expand the menu.
Ion-side-menu-content: the container that displays the main content. You can expand the menu by sliding the screen.
Ion-side-menu: the container that stores the sidebar.
Initialize APP
Next we will create a new AngularJS module and initialize it. The code is located in www/js/app. js:
angular.module('todo', ['ionic'])Then add the ng-app attribute to our body tag:
<body ng-app="todo">Introduce the app. js file on the <script src = "cordova. js"> </script> of the index.html file:
<script src="js/app.js"></script>Modify the body tag of the index.html file. The Code is as follows:
<Body ng-app = "todo"> <ion-side-menus> <! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark">
The above steps have completed the application of the basic ionic APP.
Create list
First create a controller TodoCtrl:
<body ng-app="todo" ng-controller="TodoCtrl">In the app. js file, use the Controller to define the list data:
Angular. module ('todo ', ['ionic']). controller ('todoctrl', function ($ scope) {$ scope. tasks = [{title: 'cainiao '}, {title: 'www .runoob.com'}, {title: 'cainiao '}, {title: 'www .runoob.com '}];});On the index.html page, we use Angular ng-repeat to iterate data in the data list:
<! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark">
After modification, the code in the index.html body tag is as follows:
<Body ng-app = "todo" ng-controller = "TodoCtrl"> <ion-side-menus> <! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark">
Create add page
After modifying index.html, add the following code after </ion-side-menus>:
<script id="new-task.html" type="text/ng-template"><div class="modal"><!-- Modal header bar --><ion-header-bar class="bar-secondary">
In the above Code, we use<Script id1_1_new-task.html "type =" text/ng-template ">Defines a new template page.
The createTask (task) function is triggered when a form is submitted.
Ng-model = "task. title" assigns the input data of the form to the title attribute of the task object.
Modify the content in <ion-side-menu-content>. The Code is as follows:
<! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark">
Create sidebar
Through the above steps, we have implemented the new feature. Now we add the sidebar feature for the app.
Modify the content in <ion-side-menu-content>. The Code is as follows:
<! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark"> <button class = "button-icon" ng- click = "toggleProjects () "> <I class =" icon ion-navicon "> </I> </button>
The ng-class command in <ion-item> sets the menu activation style.
Here we create a new js file app2.js (in order not to be confused with the previous one), the Code is as follows:
Angular. module ('todo ', ['ionic'])/*** The Projects factory handles saving and loading projects * from local storage, and also lets us save and load the * last active project index. */. factory ('project', function () {return {all: function () {var projectString = window. localStorage ['project']; if (projectString) {return angular. fromJson (projectString);} return [];}, save: function (projects) {window. localSt Orage ['project'] = angular. toJson (projects) ;}, newProject: function (projectTitle) {// Add a new projectreturn {title: projectTitle, tasks: [] };}, getLastActiveIndex: function () {return parseInt (window. localStorage ['lastactiveproject']) | 0;}, setLastActiveIndex: function (index) {window. localStorage ['lastactiveproject'] = index ;}}}). controller ('todoctrl', function ($ scope, $ timeout, $ ionicModal, Proje Cts, $ ionicSideMenuDelegate) {// A utility function for creating a new project // with the given projectTitlevar createProject = function (projectTitle) {var newProject = Projects. newProject (projectTitle); $ scope. projects. push (newProject); Projects. save ($ scope. projects); $ scope. selectProject (newProject, $ scope. projects. length-1);} // Load or initialize projects $ scope. projects = Projects. all (); // Grab th E last active, or the first project $ scope. activeProject = $ scope. projects [Projects. getLastActiveIndex ()]; // Called to create a new project $ scope. newProject = function () {var projectTitle = prompt ('Project name'); if (projectTitle) {createProject (projectTitle );}}; // Called to select the given project $ scope. selectProject = function (project, index) {$ scope. activeProject = project; Projects. setLastActive Index (index); $ ionicSideMenuDelegate. toggleLeft (false) ;}; // Create our modal$ionicModal.fromTemplateUrl('new-task.html ', function (modal) {$ scope. taskModal = modal ;}, {scope: $ scope}); $ scope. createTask = function (task) {if (! $ Scope. activeProject |! Task) {return;} $ scope. activeProject. tasks. push ({title: task. title}); $ scope. taskModal. hide (); // Inefficient, but save all the projectsProjects. save ($ scope. projects); task. title = "" ;}; $ scope. newTask = function () {$ scope. taskModal. show () ;}; $ scope. closeNewTask = function () {$ scope. taskModal. hide () ;}$ scope. toggleProjects = function () {$ ionicSideMenuDelegate. toggleLeft () ;}; // Try to create the first proj Ect, make sure to defer // this by using $ timeout so everything is initialized // properly $ timeout (function () {if ($ scope. projects. length = 0) {while (true) {var projectTitle = prompt ('Your first project title: '); if (projectTitle) {createProject (projectTitle ); break ;}}}) ;}); the ion-side-menus code in the body is as follows: <ion-side-menus> <! -- Center content --> <ion-side-menu-content> <ion-header-bar class = "bar-dark"> <button class = "button-icon" ng- click = "toggleProjects () "> <I class =" icon ion-navicon "> </I> </button>
The above content is a small Editor to show you how to create all the code for the Ionic APP project, I hope to help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
