AngularJSWin10 UWP开发体系:使用VS二零一六 Update2+ionic开发第3个Cordova App

叁 、项目结构

建好的品类是那样的:

AngularJS 1

看一下档次布局,其实大家供给开支的首要部分都在www目录里:

AngularJS 2

看,和二个简练的web项目很像吧,css、img、js都有,那便是一个纯HTML5的网站。Js目录里是Angular的代码,templates目录里放的是页面。

点开注重项,发现有未设置的某个:

AngularJS 3

只是没什么,这几个未安装也不影响运转。

柒 、Angular使用promise达成异步的瑟维斯

为了方便演示,笔者动用了3个音讯网站的api接口:

http://app.thepaper.cn/clt/jsp/v3/nodeContList.jsp?n=25462&WD-UUID=864819028898243&pageidx=1

那个接口是三个GET请求,有几个参数,在那之中pageidx是页数。

获取数据的某个写在哪呢?大家参考services里的Chats,写在services里。注意,模板自带的用了factory,但本身那里用service。其实那多个东西大概,笔者习惯用service。具体的分裂能够参见这么些小说:http://www.ng-newsletter.com/25-days-of-angular/day-1
反正笔者觉得除了service能够自定义一些参数,效能都差不离。

开辟services.js,添加以下代码:

AngularJS 4

概念一个News瑟维斯,注入$q和$http。因为获取网络数据是异步的,Angular里提供了promis的落到实处况势,通过调用$q.defer()来创设一个deferred实例,deferred有resolve、reject、notyfy多少个措施,当中resolve是接受结果,reject是拒绝。Promise有一篇文章写的可比好:http://blog.jobbole.com/51178/至今只知道promise是用来兑现异步的就能够了。$http是Angular内置的http服务,能够一本万利的贯彻get/post等各样互联网请求,用法和jQuery的ajax有点类似。

对了还得看一下接口的回到数据。浏览器能够一直伸手这个地点,重回的数目是那样的:

AngularJS 5

数据是json格式,若是resultCode为1,表达重返平常。contList是1个新闻题目标列表。

service里面这么写:

AngularJS 6

AngularJS 7

最后,要返回deferred.promise。

虽说题目是UWP连串,但骨子里本身是以Android为第①平台写这么些demo的,因为依旧想看看Cordova在Android平台的显现^_^
ionic已经支撑Universal,所以本文最后大家也得以编写翻译成uwp应用来运转一下。

玖 、下拉刷新和滚动加载越多

列表呈现出来了,以往加上下拉刷新和滚动到底层加载更加多啊。

Ionic贴心的包装了那多少个办法。下拉刷新是ionRefresher:
http://ionicframework.com/docs/api/directive/ionRefresher/

加载更多是ion-infinite-scroll:
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

先来看下拉刷新。在controller里添加以下代码:

AngularJS 8

实质上下拉刷新正是重新得到一下第①页数据,把数据重复赋值即可。

接下来修改view,修改tab-newsList.html文件,在ion-content里添加以下代码:

AngularJS 9

对,就四个ion-refresher就消除了。

加载越来越多也是近乎,在controller里添加三个取得更加多的主意:

AngularJS 10

修改view:

AngularJS 11

小心,下拉刷新是加在ion-content指令的最前边,而加在更加多是置身最终,都要被ion-content指令包裹起来。

是还是不是很简单?想想uwp里的下拉刷新……

⑩ 、使用VS Code编辑代码

顺手说一下,作者在接纳ionic
pack插件的时候,频仍遭受了引起VS贰零壹肆崩溃的题材,近期还没找到好的消除办法。其实能够用VS
Code来编码,安装后按F1,输入”扩大”,对您没看错,要输入粤语!哈哈VS
Code汉语化的太彻底了。从前都以输入ext
install,以往必须输入中文命令。然后找ionic和Angular的扩充安装,就能够支撑智能提示了。

AngularJS 12

VS
Code写代码也是很爽的,ionic注释都以粤语的哈哈:

AngularJS 13

十一,跨平台

事实上用Cordova主要依然为了跨平台,ionic也协助uwp啊,要不然笔者就不佳意思写成Win10
UWP开发类别了。在调节目标那里选一下,能够看出帮衬n个平台:

AngularJS 14

选Universal,连接个Win10有线电话,一样能编写翻译运维哦^_^
是其一样子的:

AngularJS 15

能够看看,tab的职位在底下,跟Android平台是区别等的。Ionic依据各平台的布署语言实行了定制。但也得以由此配备项来更改。

iOS因为尚未配备,没有原则测试了。

要是有孤掌难鸣编写翻译或不能安装的情景,能够尝试清理消除方案,再重新编写翻译即可。我赶上过五遍,都以清理后就足以设置调节和测试了。

二 、新建项目

设置好模板插件之后,新建一个Cordova项目IonicDemo,选Tabs
Template:

AngularJS 16

接下去VS2016会下载很多包:

AngularJS 17

一定要保持互联网连接,不然很或者下载失利。

嗯小编有健康的网络连接,照旧败诉了……

AngularJS 18

设置VS二零一四Update2的经过是尤其曲折的。幸好经过不懈的不竭,终于折腾成功了。

五 、Angular的运作方式

接下去就该钻探一下了,那一个页面是在哪儿放着吗?又是怎么组装起来的吧?

既是www目录是个网站,当然首先要探望index页面了。打开index.html页面,能够见见,页面尾部引入了ionic和Angular、Cordova的js文件,在那之中Cordova下边有一行注释:

<!–
cordova script (this will be a 404 during development) –>

证实在付出过程中,这么些文件找不到是健康的。

接下去有三行首要的js:

AngularJS 19

那正是骨干的js文件了。Angular和MVC类似,也有model、controller等概念。

接下去是html代码:

AngularJS 20

首页就这么简单,这么些ion开首的竹签,就是ionic提供的Angular的directive。Directive是Angular的要害概念,能够实现了自定义的html扩展。也便是说,ionic实际上是编写制定了一套Angular的一声令下来兑现那个绝妙的页面效果。

万一没接触过Angular,或然还不太精通。没关系,接着往下看。

开辟www/js/app.js文件,这正是Angular的起始化文件:

AngularJS 21

看刚刚的Index.html代码,里面有

AngularJS 22

而js里有3个叫starter的module,那就把html和Angular联系起来了。Angular看到ng-app的代码,就会对这部分举办拍卖。module
函数有多少个参数,使用了正视注入,注入了1个controller和三个services。

上面有config函数,这里运用了Angular的路由,来拍卖各个页面包车型客车景况:

AngularJS 23

也便是说,每一种不一致的state,对应不一样的html页面,使用分裂的controller。

看tab页,对应的template是tabs.html。打开:

AngularJS 24

这里又是ionic的命令,定义了多个ion-tab,来显示分裂的tab页,对应差其他state。

再打开www/js/controller.js文件,里面正是各种controller的概念了:

AngularJS 25

那有点类似MVC的概念,种种页面都有照应的controller处理。

接下去看Angular的二个重大概念,双向绑定。大家刚刚看聊天列表这几个页面,页面地址是templates/
tab-chats.html,打开:

AngularJS 26

看ion-item里面有ng-repeat的代码,那是Angular的循环,能够把前面的chat
in chats循环展现处理。那么chats是何地来的呢?打开controller.js:

AngularJS 27

Controller里倒是有个chats,但$scope是什么东西?

笔者的精通,$scope是2个胶水,把controller和view粘起来。Controller里的事物,都要放在$scope下才能被view访问到。ChatsCtrl里定义了三个$scope.chats,而页面上就足以用

AngularJS 28

诸如此类的代码,完毕绑定。倘诺您写过MVC或WPF程序,应该比较易于理解。

那么chats是哪里来的吗?ChatsCtrl首先实行了借助注入,注入了多少个Chats,然后函数里举办了3个赋值操作,Chats.all()

还记得刚才app.js里开头化app的时候注入了一个starter.services吗?未来开拓www/js/services.js:

AngularJS 29

找到了,services是概念在此处的。那里运用了Angular的factory,定义了3个名为Chats的factory,当中的all()方法正是再次来到1个闲谈列表。

通过如此的分析,我们就大约驾驭了先后的运维方式,首先Angular会初阶化app,注入controller和service,对ionic的命令举行处理,渲染成页面。

结语

本条demo到此处就终止了。查看音信详情的页面跟查看聊天详情的步调一样,就不写了。那么些例子首假如想表明,VS2016对Cordova的扶助已经很圆满了。那只是四个非常粗略的入门例子,更浓厚的内容本人也在稳步学习。希望有趣味的同班合伙谈论。还有很重点的一些,对于跨平台App开发本身平素有其一视角,跨平台不是万能的,要看现实的运用处境。比如简单的消息浏览app,能够用Cordova形式,假若涉嫌到较多调用硬件的现象,依然原生代码效用更高。将来也足以试试Xamarin,VS二〇一五Update2已经停放了Xamarin的支撑,期待以往Xamarin有更好的显现。

六、添加view及controller

方今能够设想大家的指标了,作者想添加三个tab页,用来展现叁个新闻列表,这几个列表也要从互连网接口进行获取。

第二来添加七个tab页。打开tabs.html,一步一趋加1个ion-tab:

AngularJS 30

图标作者偷闲就不改了,具体的图标可参看:http://ionicons.com/
那里有ionic自带的图标准样品式

在templates目录里添加一个tab-newsList.html文件。

在controller.js里,添加一个名为NewsListCtrl的controller:

AngularJS 31

在其间定义多个newsList,即要显示的消息列表。

昨天修改app.js里的state,把controller和view关联起来:

AngularJS 32

这么在点击音讯tab的时候,链接符合tab/newsList,就会找到NewsListCtrl的controller和tab-newsList.html,进行呈现。注意state里的各类参数,和view代码的name的对应。

列表的规范也是照着聊天的页面写:

AngularJS 33

好了,controller有了,view也有了,数据也定义了,但数据从哪来吧?当然要从网络获得了。

四 、第二次编写翻译

近来插上您的安卓手机,运维第三个Cordova程序吗。在菜单上摘取调节和测试设备,推荐用真机调试,笔者有次用了VS2014的安卓模拟器,速度是高速,但把网络搞坏了。对于那种简单的Cordova程序,用Ripple也是足以的。Ripple是在Chrome里运营的3个插件,也提供了一些诸如GPS、后退键等模拟器的意义。

一旦是首先次编写翻译Cordova项目,会下载Gradle,速度相比慢,大概须求半个多时辰到更久。最好不要中途甘休,不然会时有发生莫明其妙的不当。平常编写翻译三回后就快了。那是Ripple里的典范:

AngularJS 34

右边是Ripple的片段新闻,包罗平台、版本、加速度计、电池状态等,当中加快度计还能模拟手提式无线电话机摇动的机能。

AngularJS 35

右手是安装、GPS音讯、互联网、事件等

AngularJS 36

其间事件会日常应用:

AngularJS 37

此地提供了有的deviceready、backbutton等事件,当中deviceready是Cordova开头化完设备准备甘休后的轩然大波,能够在中间做一些拍卖。Backbutton正是模仿后退键了。还能提供pause、resume等事件的模仿。

只是对此日前这一个简单的先后来说,基本用不到那么复杂的成效,能够点击Tab栏看看,四个Tab,首页是3个介绍,第一个是三个推抢列表,第多个是三个开关按钮。聊天列表点击的时候还会有页面切换效果,看着还不易。

⑧ 、调用service呈现数据

Service重返的是贰个promise,在调用的时候,会使用then方法来接收数据。Then方法有七个参数,二个是打响后的处理,四个是没戏后的拍卖。修改controller里的代码:

AngularJS 38

瞩目不要忘了把NewsService注入进来。

还要改一下页面包车型大巴项模板:

AngularJS 39

现行反革命运维一向下探底视:

AngularJS 40

啊?Tab标题怎么乱码了吧。那早晚是编码难题了。

在tabs.html文件上点右键,接纳打开药格局,选取带编码功效的html编辑器:

AngularJS 41

然后选取utf-8:

AngularJS 42

能够看到,果然乱码了:

AngularJS 43

重新输入中文标题,保存。以后正是utf-8编码了。有恐怕VS二零一五在保存的时候选用了GB2312。但那种情景没找到规律,有时候文件中也有中文就没错。假设遇上编码问题的话就手动改一下啊。

有关ion-list
的来得样式,可参考官方文书档案,有愈多表达:http://ionicframework.com/docs/components/#list

http://ionicframework.com/docs/api/directive/ionList/

壹 、环境安排

本人想做这么三个最不难易行的效应,展现3个情报列表,援助下拉刷新和滚动到底层自动加载越来越多。那是一个App最简便易行的法力,在ionic里能够非常粗大略的落实。对于Angular的一些,作者也会在支付进度中简单介绍一下。

自个儿学新东西的时候,不太喜欢先看许多概念的事物,而是先做个东西运转起来后,再去研讨之中的概念。所以先建个品类运作一下看看啊。

Ionic主页地址:http://ionicframework.com/

法定教程是以node.js的命令行来确立项目,幸亏有VS二〇一四,能够直接下载ionic的体系模板来起头率先个类型。

ionic模板下载地址:https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a

Ionic智能感知补助下载地址:https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/

 

也得以一直在VS2016的恢宏里搜索ionic:

AngularJS 44

设置前多个即可,第一个是ionic的智能感知插件ionic
Pack,第②个是ionic项目模板,支持二种样式的门类,空白型、班加罗尔菜单型、Tab型。

借使开发Cordova项目来说,推荐大家用一下ionic那一个框架,效果可以接受。对于Cordova、PhoneGap、ionic、AngularJS那一个框架或库的涉嫌,笔者个人精通是那样,PhoneGap是2个商业贸易类型,用来促成HTML5式的跨平台开发,后来Adobe公司将中间的主导代码开源,正是科尔多瓦,Cordova只承担落到实处JavaScript调用原生代码的机能,是3个壳,而壳里具体用怎么样样式,在HTML5层还有好多框架,如ionic、jquery
mobile都得以。ionic集成了AngularJS,实际上是写了一些AngularJS的directive,用来简化开发,ionic又提供了一套css样式,倘使开发web
app,也得以只行使他的css样式。VS二〇一四对那个框架和类库都提供了精粹的支持。

相关文章