我开始使用Angular 2 + Ionic 2

大家好,我是 @creativewebjp。虽然这是我第一次使用Angular,但请多多关照。

最近我开始使用Ionic 2,所以参加了这次写Ionic 2的计划。然而,在Angular 2进入beta版之前,它进行了很多破坏性的改变,这也对Ionic 2产生了影响,近期我遇到了很多Ionic 2的变更和错误。由于我是初学者,对这种情况的处理很困难,不过我想等Ionic 2进入beta版后再全面使用它。

所以,考虑到只谈论Ionic 2会内容匮乏,所以我决定写一下我想使用Ionic 2的理由。顺便提一下,我从事Web开发和运营,并通过Google AdSense获得收入。

今天我发现,ionic-framework还停留在2.0.0-alpha.45版本,但ionic-cli已经升级到beta.15版本,并且示例运行得相当顺利,所以我打算正式开始使用。(补充于12月31日)

对Angular2的期待

我决定使用Angular2的直接原因是因为我看了Microsoft的Channel9上的ASP.NET + SPA视频。

因为我经常处理显示数据的屏幕,所以一直想使用AngularJS。但是对于我来说,由于我的业务依赖于Google搜索引擎来吸引流量,因此AngularJS被广为提及的以下缺点是致命的,所以我认为使用它是不可行的。

首次视图时间

由于需要一次性下载整个页面的所有内容,文件大小较大,并且需要评估JavaScript后才能显示,因此首次视图需要几秒钟。

SEO

近年来,Google的爬虫性能已经得到了提升,能够识别JavaScript,但与HTML相比,仍然存在劣势。

然而,我发现使用Angular Universal可以实现服务器端渲染,从而解决了这个问题。

此外,今年Google在开发Angular 2时采用了Microsoft的TypeScript,而Microsoft则将ASP.NET 5开源并使其能够在Mac和Linux上运行,并公开了Visual Studio Code等重大事件在Web领域发生。由于一直使用Microsoft系列的开发工具,我觉得Angular 2变得非常熟悉。

NodeServices.png

我开始学习Ionic2的原因。

虽然我对 Angular Universal 抱有期望,但实际上我不太清楚它有多少可用性,所以我认为从 Cordova 应用程序开始创建一个以移动设备优先的应用程序是现实的选择。在研究可用的框架时,我选择了 Ionic 或 Onsen UI。

Onsen UI似乎正在独立于Angular,这是在CodeIQ MAGAZINE的一篇文章中提到的。

田中先生表示,Onsen UI2.0已经在开发中。在此版本中,他们打算“与Angular独立开来”,并基于纯粹的Web组件库进行开发。

此外,他们还对内部架构进行了彻底改进,以适应Angular1.4系列、Angular2和React。田中先生解释说,他们意图将其打造成一种基于“自定义元素集合”的框架。他们还表示,他们正在进一步进行与特定平台UI的适配工作。

Ionic2和Angular2密切相连,与Angular2的开发平行进行。目前版本为2.0.0-alpha.45,很快将进入beta阶段。

在我个人的情况下,我认为与Angular 2紧密耦合没有问题,甚至认为通过紧密耦合可以简化程序并带来一些好处。

IonicList.png

Ionic 2 的安装

Ionic 2 的安装方面,Bonar 在第12天的文章中已经写了,所以这里只是补充一下说明。
由于 Ionic CLI 已经变成了 beta 版本,所以 Ionic SDK 的安装方式也有所改变。

$ sudo npm install -g ionic@beta

由于从 Ionic 1.2 开始,制作移动网站也成为了推荐的选项,所以如果是用于网站的话,不需要安装 Cordova,而是可以通过下面简单的命令来运行。不过最近由于变动比较多,可能会出现错误导致无法运行的情况。

$ ionic start <PATH> --v2
$ cd <PATH>
$ ionic serve
ionichelp.png

给正在使用Windows PC进行开发的人的建议。

为了安装Ionic,需要先安装Node.js。然而,在准备这个环境时,我遇到了与overmorrow的博客”Windowsでnpm installの赤いエラーに悩まされているアナタへ”中提到的错误问题。根据该博文和其所基于的Microsoft指南进行设置后,错误出现的情况变少了。因此,在此介绍一下相关设置。

广告
将在 10 秒后关闭
bannerAds