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项目的全部代码,希望对大家有所帮助!

Javascript 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
深入理解node.js http模块
Jan 24 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
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
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python得到windows自启动列表的方法
2018/10/14 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
单位消防安全制度
2014/01/12 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
健康状况证明书
2014/11/26 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
python_tkinter弹出对话框创建
2022/03/20 Python
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server