代码笔记,ionic中动用热更新插件cordova

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

一,下载ionic
v1.0.1本子,下载地址为:ionic-v1.0.1.zip。

ionic 教程

sass
是一个css的预编写翻译器,常见的预编译器有less,sass,stylus等,近期sass就如更受珍视一些,bootstrap的风行版本以及ionic
都以用sass来营造页面效果的。那篇小说讲解怎么样在ionic工程运用sass,以及浅层次的解析一下ionic是何等营造sass代码的。

网上有成都百货上千有关那上面的资料和验证,不过本人并不曾找到七个着实能够搭建成功的案例。由此为了让大家别再走弯路,在此我钻探了2个晚上搭建成功,以此来增加大家的工效。
cordova-hot-code-push是一款专门为混合cordova应用开发的二个热更新插件,那么哪些是热更新?热更新顾名思义正是,在混合app代码(html、js、css)发生转移的时候,大家不要求重新对app打包又一次展开透露,而仅必要公告cordova-hot-code-push插件,代码已经产生了改变,然后cordova-hot-code-push插件就会依据我们钦命的代码服务器进行更新相关的代码。那样的利益在于,客户再也不用再到有关的app
store去下载新本子的app了,只要客户联网打开了app,app就会自动更新相关代码。那可是是用以代码更新上。要是大家所改变的不是代码,而是改变了webview大概说升级了ionic2到了ionic3,那么cordova-hot-code-push还会自动更新吗?毫无疑问cordova-hot-code-push已经力不从心再一次展开自动更新了,可是它能够向客户端推送新的app,并强迫用户下载升级!好了,上面笔者就用ionic2的项目以来说怎么搭建cordova-hot-code-push和利用。
本次搭建在OS系统中,服务端使用xampp本地搭建而成,当然windows用户也不用紧张,因为操作步骤都是一样的,在windows上你能够运用android模拟器实行测试。

       ionic
最新版本下载地址:。

4858美高梅 1

使用Sass

在工程文件夹中输入如下命令

$ ionic setup sass

这一步为我们的工程添加sass协助,之后我们能够在./scss/ionic.app.scss编纂css代码。要是设置很是,尝试调整node
版本,笔者使用4.1版本的node出错,切回0.12.7成功.

上边尝试利用sass改变暗中认可的positive颜色效果,以及扩大$big-bg变量,代表背景,然后添加.scroll-bg类,为滚动页面添加背景图片,以下为./scss/ionic.app.scss中的代码,注意,自定义的效应添加在最终一行加载ionic库在此之前。

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

$positive:    #057b6c !default;
$big-bg:      'http://ioniconf.com/img/bg.jpg';

.scroll-bg {
  background: url($big-bg) no-repeat center center fixed;
  background-size: cover;
}

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

对应的html代码:

<ion-view view-title="Search" >
  <ion-content class="padding scroll-bg">
    <h1 class="positive">Search</h1>
  </ion-content>
</ion-view>

成效如下:

4858美高梅 2

一 、首先成立四个ionic项目

自然你得保障您早已安装了nodejs
安装ionic和cordova

npm install -g cordova ionic

本身依照官方教程,创设多少个tabs项目,输入如下命令

ionic start tab tabs
cd tab
npm install
ionic serve

如此那般就创设好了ionic项目了。

       下载完如下图所示:

<small>ionic 是四个强硬的 HTML5 应用程序开发框架(HTML5 Hybrid
Mobile App Framework )。 可以协理您使用 Web 技术,比如 HTML、CSS 和
Javascript 创设接近原生体验的位移应用程序。

sass代码创设进程

ionic
使用gulp以此创设工具来预编写翻译sass,大家输入setup
sass命令的时候ionic会添加gulp-sass等gulp插件,然后在ionic.project文件中拉长”gulpStartupTasks”项,在运转的时候扩充gulp职务,sass和watch。

{
  "name": "express_client",
  "app_id": "",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

那多少个职责一个是用来编写翻译sass文件,一个是用来监察和控制sass文件,一有变动就重新编写翻译,以适配liveload,下边是gulpfile.js的有关安插

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});
gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

能够见到sass职务会将源文件为’./scss/ionic.app.scss’的代码用sass插件编写翻译之后写入到’./www/css/’文件夹中(ionic.app.css),然后再将该文件用minifyCss插件实行最小化,重命名为ionic.app.min.css,然后写入到./www/css/中。
末尾,在www/index.html会加载该css:

<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

在大家输入ionic serve
命令的时候也会张开gulp义务,修改ionic.app.scss文件会实时编写翻译,然后显示到浏览器中。

2、安装cordova-hot-code-push插件(使用全局安装)

npm install -g cordova-hot-code-push-cli

进而在档次根目录安装cordova-hot-code-push-plugin插件

cordova plugin add cordova-hot-code-push-plugin

4858美高梅 3

ionic 首要关怀外观和体验,以及和您的应用程序的 UI 交互,特别符合用于基于
Hybird 格局的 HTML5 移动应用程序开发。

参考

  • 官网
  • learnsite
  • 本篇原著地址

③ 、分明本地服务器ip地址

比如说本人设置的是xampp服务器软件,我透过http://localhost可以一向访问到服务器根目录文件,然而若是我们在模拟器中选取http://localhost和127.0.0.1就无法访问到服务器了。由此大家得得到到本机的ip地址
mac下在终点(命令行)输入ifconfig即可看出如下画面,找到你的ip地址:

4858美高梅 4

Mac下查看ip地址

Mac下查看ip地址

windows下的对象可以行使ipconfig命令实行查看,只怕在互连网共享中央查看本机IP地址
收获了Ip地址,那就间接使用ip地址访问下当地的服务器,看看是还是不是健康访问,在浏览器中敲入

4858美高梅 5

xampp本地搭建服务器

xampp本地搭建服务器

假若您利用的是别的服务器,请自行进行检测。

二,桌面上新确立文件夹,如下图所示:

ionic是1个轻量的手提式有线话机UI库,具有速度快,界面现代化、美观等风味。为了消除任何一些UI库在小弟大上运维缓慢的题材,它直接扬弃了IOS6和Android4.1之下的本子匡助,来获取更好的行使体验。

4、创建cordova-hcp.json模板

cordova-hcp.json首即便为着便于大家未来的操作,不用再去修改www目录下的chcp.json文件,由此那样做首如若为着增强工效

4858美高梅 6

品种目录结构

种类目录结构

在tab项目根目录下新建二个cordova-hcp.json文件,输入如下内容

{
“autogenerated”: true,
“name”: “tabs”,
“min_native_interface”: 1,
“content_url”:
“http://192.168.22.62/tabs”,
“ios_identifier”:”代码笔记,ionic中动用热更新插件cordova。https://itues.apple.com/cn/\*\*\*”,
“update”: “now”
}

参数
autogenerated 暗中同意为true,自动升级的意思
name app的名称
min_native_interface
原生壳(能够知道为原生webview版本),此版本由你本人定义版本号
content_url 更新文件所在服务器的目录地址
ios_identifie 这么些是ios app
store的地方,作为测试,能够忽略,这些地方是包装后提交的地址
update
更新的意况,now|web内容下载完毕即安装更新;resume|app从后台切换过来的时候安装更新;start|app运行时安装更新(暗中同意值).

 


伍 、测试模板生成的www/chcp.json文件是不是科学

cd 到项目根目录,执行下边语句

cordova-hcp build

施行后,就足以到www目录下找到chcp.json文件,查看音讯,发现多了一行代码:”release”:
“2017.06.30-15.27.25″,并且也多了3个chcp.manifest的文本

{
4858美高梅 ,”autogenerated”: true,
“name”: “tabs”,
“min_native_interface”: 1,
“content_url”:
“http://192.168.22.62/tabs”,
“ios_identifier”:
“https://itues.apple.com/cn/\*\*\*”,
“update”: “now”,
“release”: “2017.06.30-15.27.25”
}

实际上正是个时间
chcp.manifest则是每叁个文件变动后的hash值,cordova-hot-code-push会去检查和测试那一个值,假诺这几个值发生了改观则从服务器下载相关文书进行更新。
到此,我们的模版完毕了。

 
  4858美高梅 7

ionic 特点

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是多个轻量级框架。
  • 3.ionic 周密的一德一心下一代移动框架,匡助 Angularjs 的风味, MVC
    ,代码易维护。
  • 4.ionic 提供了特出的筹划,通过 SASS 创设应用程序,它提供了无数 UI
    组件来增派开发者开发强大的应用。
  • 5.ionic 专注原生,让你看不出混合使用和原生的区别
  • 6.ionic 提供了强硬的命令行工具。
  • 7.ionic 质量减价,运营速度快。

六 、修改根目录config.xml

在中参预如下代码:

<chcp>
<native-interface version=”1″ />
<config-file
url=”http://192.168.22.62/tabs/chcp.json”
/>
</chcp>

4858美高梅 8

config.xml文件

config.xml文件

native-interface
version=”1″,这里的1必须和chcp.json中”min_native_interface”: 1
是相同的,这几个1意味了外壳(webview版本)版本。做外壳更新用到此参数。

 

学学本课程前您须要精晓?

上学本学科前你要求精通以下基础知识:

  • 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/\#download。
下载后解压压缩包,包括以下目录:

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
文件加入到财富库中即可。


七 、在xcode或安卓虚拟机上运营项目

mac上,输入如下命令
ionic platform add ios
ionic cordova run ios(旧版本的ionic请运维ionic run ios)
windows上由于完毕ios环境难,因而就采用android
ionic platform add android
ionic cordova run android(旧版本的ionic请运营ionic run android)
自个儿运行的结果如下(笔者事先修改过默许项目标文书):

4858美高梅 9

ios下运行ionic项目

ios下运行ionic项目

三,在webApp里面新建立index.html,ionic,同时把ionic-v1文件夹中的
css/ionic.min.css 和 js/ionic.bundle.min.js
文件拖入到ionic中。如下图所示:

命令行安装

率先你需求安装
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

8、内壳(html、js、css)热更新

率先我们修改项目下page/about.html页面,更它扩大部分文字,笔者那边增添的是“this
is about page”。
运维命令cordova-hcp build重新生成相关的文本
大家在xampp/htdocs目录下新建八个文本夹名称为tabs,接着大家将ionic根目录下的www内的具备文件拷贝到xampp/htdocs目录下。
在xcode或然安卓虚拟机少校我们的ionic app kill掉,相当于挟持退出。
又一次打开我们的app,你会看到about页面已经发出了变动,刚才我们添加的文字出现了。

4858美高梅 10

热更新

热更新

当成屡试不爽啊,热更新真的太有利了。可是那种创新仅仅只是内壳的热更新。

 

开创应用

选择ionic官方提供的现成的应用程序模板,或多少个空荡荡的品种开创2个ionic应用:

$ ionic start myApp tabs

⑨ 、外壳热翻新(待续…)

 
 4858美高梅 11

运转我们刚刚创造的ionic项目

选择 ionic tool 创设,测试,运营你的apps(或然通过科尔多瓦直接开立)。

ionic中选拔热更新插件cordova-hot-code-push

 

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

假诺一切寻常会弹出模拟器,界面如下所示:

4858美高梅 12

 

创建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美高梅 13

  4858美高梅 14

Ionic Lab

Ionic Lab 是桌面版的费用环境,如若您不爱好使用命令行操作,Ionic Lab
将会满足你的须要。
Ionic Lab
为开发者提供了一个更简明的办法来起首,编写翻译,运转,和宪章运转Ionic的应用程序。
Ionic Lab 帮忙的阳台有:Window、Mac OS
X、Linux,下载地址为:http://lab.ionic.io/,下载后一贯设置即可。整个操作界面如下所示:

4858美高梅 15

由此上述界面你能够达成以下操作:

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

    4858美高梅 16

Gif 操作演示  

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


ionic 创建 APP

面前的章节中大家已经学会了 ionic 框架如何导入到项目中。
接下去大家将为我们介绍怎么着制造1个 ionic APP 应用。
ionic 创造 APP 使用 HTML、CSS 和 Javascript 来塑造,所以大家能够创建三个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 是健康的。


 

创建 APP

接下去大家来完结四个富含标题、侧边栏、列表等的采取,设计图如下:

4858美高梅 17

四,用Sublime打开webApp,同时在index.html中进入代码:

成立侧边栏

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

<big>尝试一下
»
<small>以上步骤大家早就做到了 ionic 基本 APP 的选择。


4858美高梅 18

创设列表

第③创制四个说了算器 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>品尝一下
»


<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope) {

    });
    </script>
    <style>
    body {
    cursor: url('http://www.runoob.com/static/img/finger.png'), auto;
    }
    </style>
</head>
<body ng-controller="MyCtrl">

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

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

    </body>
</html>

创办添加页面

修改 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(); 
  };
});

4858美高梅 19

始建侧边栏

经过以上步骤大家早已完成了新增功用,今后我们为 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>

尝试一下
»

 

五,sublime的末尾效果图,如下图所示:

 

4858美高梅 20

 

六,运转代码,效果图如下图所示:

 

4858美高梅 21

 

七,第3个应用程序运转成功啦。

 

 

参考资料:《菜鸟教程》

发表评论

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

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