Ionic如何创设APP项目,代码笔记

By admin in 4858美高梅 on 2019年3月26日

一,创制app的时候,index.html的重中之重架构。

Ionic如何创立APP项目,Ionic创设APP项目

前方的章节中大家早已学会了ionic 框架怎样导入到项目中。

接下去大家将为大家介绍怎么样创设3个 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项目,代码笔记。接下去我们来落到实处3个包蕴标题、侧边栏、列表等的行使,设计图如下:

4858美高梅 1

创制侧边栏

侧面栏创制使用 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

接下去大家创制1个新的 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 框架怎样导入到项目中。
接下来大家将为大家介绍怎么着制造一个…

前方的章节中大家曾经学会了ionic 框架如何导入到项目中。

ionic 教程

 

接下去大家将为大家介绍如何创立一个 ionic APP 应用。

4858美高梅 2

4858美高梅 3

ionic 创制 APP 使用 HTML、CSS 和 Javascript 来创设,所以大家可以成立贰个www 目录,并在目录下创办 index.html 文件,代码如下:

<small>ionic 是2个强有力的 HTML5 应用程序开发框架(HTML5 Hybrid
Mobile App Framework )。 能够帮助您使用 Web 技术,比如 HTML、CSS 和
Javascript 创设接近原生体验的运动应用程序。

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

大家遵纪守法步骤在和谐的编辑器上来认真的成功那几个APP的创办吧。

ionic 主要关切外观和感受,以及和你的应用程序的 UI 交互,越发契合用来基于
Hybird 形式的 HTML5 移动应用程序开发。

4858美高梅 4

<!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是三个轻量的手提式有线电话机UI库,具有速度快,界面现代化、美观等特点。为了解决别的部分UI库在手提式有线电电话机上运维缓慢的标题,它平昔舍弃了IOS6和Android4.1以下的版本援助,来取得更好的应用体验。

 

以上代码中,大家引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS
扩展ionic.bundle.js(ionic.bundle.js)。


 

ionic.bundle.js 文件已经包蕴了
Ionic宗旨JS、AngularJS、Ionic的AngularJS扩张,借使你须求引入别的 Angular
模块,能够从 lib/js/angular 目录中调用。

ionic 特点

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是2个轻量级框架。
  • 3.ionic 宏观的融合下一代移动框架,扶助 Angularjs 的风味, MVC
    ,代码易维护。
  • 4.ionic 提供了精粹的筹划,通过 SASS 创设应用程序,它提供了诸多 UI
    组件来支援开发者开发强大的使用。
  • 5.ionic 专注原生,让您看不出混合使用和原生的区分
  • 6.ionic 提供了强硬的命令行工具。
  • 7.ionic 质量减价,运转速度快。

 

cordova.js 是在运用 Cordova/PhoneGap
创立应用时生成的,不需求手动引入,你能够在 Cordova/PhoneGap
项目中找到该公文,所以在开发进程中突显 404 是例行的。

学学本课程前您需求了然?

读书本学科前你必要了然以下基础知识:

  • HTML
  • CSS
  • Javascript
  • Angular

ionic 相关内容
ionic
官方网站:http://ionicframework.com/
ionic
官方文书档案:http://ionicframework.com/docs/
Github
地址:https://github.com/driftyco/ionic</small>



ionic 安装

<small>本站实例选取了ionic v1.0.1
版本,下载地址为:ionic-v1.0.1.zip。
ionic 最新版本下载地址:
http://ionicframework.com/docs/overview/\#download4858美高梅,。
下载后解压压缩包,包罗以下目录:

css/             => 样式文件
fonts/           => 字体文件
js/              => Javascript文件
version.json     => 版本更新说明

你也能够在 Github
上下载以下能源文件:https://github.com/driftyco/ionic(在release
目录中)。
接下去,我们只供给在类型中引入以上目录中的 css/ionic.min.css 和
js/ionic.bundle.min.js 文件即可创立 ionic 应用。

<big>实例

<ion-header-bar class="bar-positive"> 
    <h1 class="title">Hello World!</h1>
</ion-header-bar> 

<ion-content> 
    <p>我的第一个 ionic 应用。</p>
</ion-content>

品尝一下
»
<small>点击 “尝试一下” 按钮查看在线实例。

本课程注重讲解 ionic 框架的利用,大多数实例在浏览器中运行,移动装备上运营能够在接下去的命令行安装教程中详细询问。
注意:在移动使用如 phonegap 中大家只需将对应的 js 和 css
文件参与到财富库中即可。


1,大家引入了 Ionic CSS 文件、 Ionic JS
文件及 Ionic AngularJS 扩张ionic.bundle.js(ionic.bundle.js)。

创建 APP

命令行安装

先是你需求安装
Node.js,我们在接下去的安装中要求运用到其
NPM 工具,更加多 NPM 介绍能够查阅大家的NPM
使用介绍。
接下来经过命令行工具安装新型版本的
cordova 和 ionic
。通过参考Android

iOS
官方文书档案来设置。
Window 和 Linux 上开辟命令行工具实施以下命令:

$ npm install -g cordova ionic

Mac 系统上使用以下命令:

sudo npm install -g cordova ionic

唤醒: IOS要求在Mac Os X. 和Xcode环境下边设置使用。
假诺您早就设置了以上条件,能够实行以下命令来更新版本:

npm update -g cordova ionic

sudo npm update -g cordova ionic

2,cordova.js 是在运用 Cordova/PhoneGap
创设应用时生成的,不须要手动引入,你能够在 Cordova/PhoneGap
项目中找到该文件,所以在付出进度中显得 404 是常规的。

接下去大家来落到实处二个富含标题、侧边栏、列表等的运用,设计图如下:

创造应用

应用ionic官方提供的现成的应用程序模板,或二个空荡荡的类型开创3个ionic应用:

$ ionic start myApp tabs

 

4858美高梅 5

运作大家刚刚创造的ionic项目

选取 ionic tool 创立,测试,运营你的apps(恐怕通过Cordova直接开立)。

参考资料:《菜鸟教程》

始建侧边栏

创建Android应用
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

假若一切符合规律会弹出模拟器,界面如下所示:

4858美高梅 6

侧面栏成立使用 ion-side-menus 控制器。

创建iOS应用
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

(额外补充空格代码     以下分别是效果展示)
比方出现 “ios-sim was not found.” 错误,能够进行以下命令:
一经出现 “ios-sim was not found.” 错误,能够实施以下命令:
借使出现 “ios-sim was not found.” 错误,能够执行以下命令:

npm install -g ios-sim

设若一切符合规律会弹出模拟器,界面如下所示:

4858美高梅 7

编写制定大家原先创建的 index.html 文件,修改 <body>
内的剧情,如下所示:

Ionic Lab

Ionic Lab 是桌面版的开销环境,假若你不爱好使用命令行操作,Ionic Lab
将会满足你的供给。
Ionic Lab
为开发者提供了四个更简便的情势来开首,编写翻译,运转,和模拟运营Ionic的应用程序。
Ionic Lab 帮助的平台有:Window、Mac OS
X、Linux,下载地址为:http://lab.ionic.io/,下载后一向设置即可。整个操作界面如下所示:

4858美高梅 8

由此上述界面你能够完结以下操作:

  • 始建应用
  • 预览应用
  • 编写翻译应用
  • 运营应用
  • 上传应用
  • 运转日志查看
    ……
    推荐应用Sublime Text作为 Ionic 项指标编辑器,大家得以由此 Ionic Lab
    直接在Sublime Text 上打开项目,如下图:

    4858美高梅 9

Gif 操作演示  

![](https://upload-images.jianshu.io/upload_images/2323089-555bb230a29dcf2d.gif)


ionic 创建 APP

前边的章节中大家早就学会了 ionic 框架如何导入到项目中。
接下去大家将为大家介绍怎么样创立二个 ionic APP 应用。
ionic 创立 APP 使用 HTML、CSS 和 Javascript 来营造,所以我们能够创立3个www 目录,并在目录下开创 index.html 文件,代码如下:

<!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 是常规的。


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

接下去我们来兑现一个带有标题、侧边栏、列表等的施用,设计图如下:

4858美高梅 10

控制器解析:

创造侧边栏

侧面栏创立使用 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:存放侧边栏的容器。

ion-side-menus:
是2个暗含边栏菜单的容器,能够通过点击按钮只怕滑动荧屏来进展菜单。

初始化 APP

接下去大家创制3个新的 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>

<big>品尝一下
»
<small>以上步骤大家早就到位了 ionic 基本 APP 的采用。


ion-side-menu-content:体现重庆大学内容的器皿,能够透过滑行荧屏来拓展menu。

创办列表

第②创设一个操纵器 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>

<big>尝试一下
»


ion-side-menu:存放侧边栏的器皿。

创办添加页面

修改 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>

<small>以上代码中大家通过 <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

成立侧边栏

由此上述步骤大家早就落实了新增作用,未来大家为 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 指令设置菜单激活样式。
那里大家创立2个新的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>

尝试一下
»

接下去大家创制2个新的 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 的采用。

开创列表

第3创立3个控制器 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 指令设置菜单激活样式。

那里我们创造1个新的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
    化解android端在真机上tab处于顶部的难题
  • angular+ionic
    的app上拉加载更新数据实现方式
  • Ionic2创制App运转页左右滑动欢迎界面
  • 移动端Ionic App
    资源音信上下循环滚动的落到实处代码(跑马灯效果)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有