首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Ionic如何创建APP项目

Posted in Javascript onJune 03, 2016

前面的章节中我们已经学会了ionic 框架如何导入到项目中。

接下来我们将为大家介绍如何创建一个 ionic APP 应用。

ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建，所以我们可以创建一个 www 目录，并在目录下创建 index.html 文件，代码如下：

大家按照步骤在自己的编辑器上来认真的完成这个APP的创建吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
<script src="cordova.js"></script>
</head>
<body>
</body>
</html>

以上代码中，我们引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 扩展ionic.bundle.js（ionic.bundle.js）。

ionic.bundle.js 文件已经包含了 Ionic核心JS、AngularJS、Ionic的AngularJS扩展，如果你需要引入其他 Angular 模块，可以从 lib/js/angular 目录中调用。

cordova.js 是在使用 Cordova/PhoneGap 创建应用时生成的，不需要手动引入，你可以在 Cordova/PhoneGap 项目中找到该文件，所以在开发过程中显示 404 是正常的。

创建 APP

接下来我们来实现一个包含标题、侧边栏、列表等的应用,设计图如下：

Ionic如何创建APP项目

创建侧边栏

侧边栏创建使用 ion-side-menus 控制器。

编辑我们先前创建的 index.html 文件，修改 <body> 内的内容，如下所示：

<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>

控制器解析：

ion-side-menus： 是一个带有边栏菜单的容器，可以通过点击按钮或者滑动屏幕来展开菜单。

ion-side-menu-content：展示主要内容的容器，可以通过滑动屏幕来展开menu。

ion-side-menu：存放侧边栏的容器。

初始化 APP

接下来我们创建一个新的 AngularJS 模块，并初始化，代码位于 www/js/app.js 中：

angular.module('todo', ['ionic'])

之后在我们的 body 标签中添加 ng-app 属性：

<body ng-app="todo">

在 index.html 文件的 <script src=”cordova.js”></script> 上面引入 app.js 文件：

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

修改 index.html 文件 body 标签的内容，代码如下所示：

<body ng-app="todo">
<ion-side-menus>
<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</body>

以上步骤我们已经完成了 ionic 基本 APP 的应用。

创建列表

首先创建一个控制器 TodoCtrl：

<body ng-app="todo" ng-controller="TodoCtrl">

在app.js文件中，使用控制器定义列表数据：

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
$scope.tasks = [
{ title: '菜鸟教程' },
{ title: 'www.runoob.com' },
{ title: '菜鸟教程' },
{ title: 'www.runoob.com' }
];
});

在index.html页面中数据列表我们使用 Angular ng-repeat 来迭代数据：

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>

修改后 index.html body 标签内代码如下：

<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
<script src="http://www.runoob.com/static/ionic/js/app.js"></script>
<script src="cordova.js"></script>
</body>

创建添加页面

修改 index.html 在 </ion-side-menus> 后添加如下代码:

<script id="new-task.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
</div>
</script>

以上代码中我们通过 <script id=”new-task.html” type=”text/ng-template”> 定义了新的模板页面。

表单提交时触发 createTask(task) 函数。

ng-model=”task.title” 会将表单的输入数据赋值给 task 对象的 title 属性。

修改 <ion-side-menu-content> 内的内容，代码如下：

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
<!-- 新增按钮-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content>
<!-- 列表 -->
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
app.js 文件中，控制器代码如下：
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope, $ionicModal) {
$scope.tasks = [
{ title: '菜鸟教程' },
{ title: 'www.runoob.com' },
{ title: '菜鸟教程' },
{ title: 'www.runoob.com' }
];
// 创建并载入模型
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// 表单提交时调用
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// 打开新增的模型
$scope.newTask = function() {
$scope.taskModal.show();
};
// 关闭新增的模型
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
});

创建侧边栏

通过以上步骤我们已经实现了新增功能，现在我们为 app 添加侧边栏功能。

修改 <ion-side-menu-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>
<h1 class="title">{{activeProject.title}}</h1>
<!-- 新增按钮 -->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
添加侧边栏：
<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" 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: activeProject == project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>

<ion-item> 中的 ng-class 指令设置菜单激活样式。

这里我们创建一个新的js 文件 app2.js(为了不与前面的混淆)，代码如下：

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('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
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 function 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 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.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({
title: 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 first project, 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;
}
}
}
});
});
body 中 ion-side-menus 代码如下：：
<ion-side-menus>
<!-- 中心内容 -->
<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>
<h1 class="title">{{activeProject.title}}</h1>
<!-- 新增按钮 -->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>
<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" 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: activeProject == project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

以上内容是小编给大家介绍的Ionic如何创建APP项目的全部代码，希望对大家有所帮助！

Ionic如何创建APP项目

- Author -

小月

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
使用正则替换变量
May 05 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
javascript实现获取服务器时间
May 19 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
tsconfig.json配置详解
May 17 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 #Javascript
深入理解JavaScript内置函数
Jun 03 #Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 #Javascript
长波(3) 立体声(1) Harman Kardon(1) GWEN(1) ad hoc(1) KDKA(1) 中波(3) 电台频率(32) 收音机(62) 调频(4)
You might like
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
js完美实现@提到好友特效（兼容各大浏览器）
2015/03/16 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
基于Python的OCR实现示例
2020/04/03 Python
华为智利官方商店：Huawei Chile
2020/05/09 全球购物
2014年安全生产大检查方案
2014/05/13 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年保管员工作总结
2014/11/18 职场文书
好员工观后感
2015/06/17 职场文书
小学生读书笔记范文
2015/06/30 职场文书
高中16字霸气押韵班级口号集锦！
2019/06/27 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript