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!
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
