Ionic How to create an app project _javascript tips

Source: Internet
Author: User
Tags button type

In the previous chapters we have learned how the ionic framework is imported into the project.

Next we'll show you how to create a Ionic app application.

Ionic Create the APP using HTML, CSS, and Javascript to build, so we can create a WWW directory and create a index.html file in the directory with the following code:

Follow the steps in your own editor to carefully complete the creation of this app.

<! DOCTYPE html>
 
 

In the above code, we introduce 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 for the ionic core JS, Angularjs, Ionic, and can be invoked from the angular directory if you need to introduce additional lib/js/angular modules.

Cordova.js is generated when you use CORDOVA/PHONEGAP to create an application, you can find it in the CORDOVA/PHONEGAP project without manual introduction, so it is normal to show 404 during development.

Create an APP

Next, we'll implement an application that includes the title, sidebar, list, and so on, and the design is as follows:


Create Sidebar

The sidebar is created using the Ion-side-menus controller.

Edit the Index.html file we created earlier, and modify the contents of <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 sidebar menus that you can use to expand the menu by clicking on a button or sliding screen.

Ion-side-menu-content: A container that shows the main contents, which you can use to expand the menu by sliding the screen.

Ion-side-menu: The container that holds the sidebar.

Initialize APP

Next we create a new ANGULARJS module and initialize the code in Www/js/app.js:

Angular.module (' Todo ', [' Ionic '])

Then add the Ng-app attribute to our body tag:

<body ng-app= "Todo" >

The App.js file is introduced into the <script src= "Cordova.js" ></script> of index.html files:

<script src= "Js/app.js" ></script>

Modify the contents of the index.html file body tag, as shown in the following code:

<body ng-app= "Todo" >
<ion-side-menus>
<!--center content-->
<ion-side-menu-content>
<ion-header-bar class= "Bar-dark" >

The above steps we have completed the application of Ionic basic app.

Create a 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: ' Rookie Tutorial '},
{title: ' www.runoob.com '},
{title: ' Rookie Tutorial '},
{title: ' www.runoob.com '}
]
;

In the Index.html page, we use angular ng-repeat to iterate over the data:

<!--Center content-->
<ion-side-menu-content>
<ion-header-bar class= "Bar-dark" >

After the modified index.html body tag inside the code 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

Modify 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 define a new template page by <script id= "new-task.html" type= "Text/ng-template" > .

Triggers the CreateTask (Task) function when the form is submitted.

Ng-model= "Task.title" assigns the input data from the form to the title property of the Task object.

To modify the contents of <ion-side-menu-content>, the code is as follows:

<!--Center content--> <ion-side-menu-content> <ion-header-bar class= "Bar-dark" > 

Create Sidebar

With the above steps we have implemented new features and now we are adding sidebar functionality to the app.

To modify the contents of <ion-side-menu-content>, the code is as follows:

<!--Center content--> <ion-side-menu-content> <ion-header-bar class= "Bar-dark" > <button class= button Button-icon "ng-click=" toggleprojects () "> <i class=" icon Ion-navicon "></i> </button> 

The ng-class directive 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), the code is as follows:

Angular.module (' Todo ', [' Ionic '])/** * Projects Factory handles and saving loading * from local Projects
D also lets us save and load the * Last active project index. */. Factory (' Projects ', function () {return {all:function () {var projectstring = window.localstorage[' Projects ']; if (pr
ojectstring) {return Angular.fromjson (projectstring);} return []; }, Save:function (projects) {window.localstorage[' projects '] = Angular.tojson (projects);}, Newproject:function (  Projecttitle) {//ADD a new project return {title:projecttitle, tasks: []}, Getlastactiveindex:function () {return parseint (window.localstorage[' lastactiveproject ') | |
0;
}, Setlastactiveindex:function (index) {window.localstorage[' lastactiveproject '] = Index;}} }). controller (' Todoctrl ', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {//A utility funct Ion for creating a new project//with the given projecttitle var 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 the last active, or the $scope. ActiveProject = $scope. Projects[projects.getlastactiveindex ()]; Called to create a new project $scope. NewProject = function () {var projecttitle = prompt (' project name '); if (Projectti
TLE) {createproject (projecttitle);}};
Called to select the given project $scope. Selectproject = function (Project, index) {$scope. ActiveProject = project;
Projects.setlastactiveindex (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 ({Tit
Le:task.title}); $scope. TaskModal.hide ();
Inefficient, but save all the projects Projects.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 ' sure to defer//' by using $timeout so everything is initialized//properly $timeout (function () {if ($scope. projects.length = 0) {while (true) {var projecttitle = prompt (' Your project title:
');
if (projecttitle) {createproject (projecttitle); break;}}
}
});
}); The body Ion-side-menus code as follows:: <ion-side-menus> <!--center content--> <ion-side-menu-content> < Ion-header-bar class= "Bar-dark" > <button class= "button Button-icon" ng-click= "toggleprojects ()" > <i class = "icon Ion-navicon" ></i> </button> 

The above content is small make up to everybody introduced ionic how to create the entire code of the app project, hope to be helpful to everybody!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.