使用Angular CLI和Onsen UI 2进行应用程序开发

2 年 ago
雅, 悟
3 minutes

本文所指对象

考虑使用Angular（6.x）和Onsen UI 2（2.10.x）进行移动应用开发的人。

总结

我将在使用「Angular CLI」创建的项目中集成「Onsen UI 2」，建立起用于开发移动应用程序的基础。

请参考以下存储库：
https://github.com/puku0x/angular-cli-onsenui

搭建开发环境

1. 安装PhoneGap

这次我们要制作移动应用。请先安装PhoneGap。

$ npm install -g phonegap

2. 安装 Angular CLI。

使用Angular时必备工具，请不要忘记安装。

$ npm install -g @angular/cli

3. 创建项目

让我们创建一个应用程序项目。

$ phonegap create my-app

可以根据个人喜好自由设定“我的应用”部分。

4. 删除不必要的文件

让我们删除README.md文件。

$ rm my-app/README.md

如果忘记删除，则无法成功在Angular CLI中创建项目。

5. 项目的覆盖

使用Angular CLI命令创建一个与步骤3中创建的项目同名的项目。

$ ng new my-app --style=scss

我想，将样式表更改为 SCSS 是一个很好的选择?

6. 转到工作目录

请进入生成的项目的工作目录。

$ cd my-app

手机间隔资产备份

在使用Angular CLI进行构建时，将删除www目录及其子目录。

让我们将www/res和www/img备份到src目录中。

$ mv www/res src/res
$ mv www/img src/img

8. 更改 angular.json

请按以下方式修改相应部分。

请将相关部分修改为以下内容。

"options": {
  "outputPath": "www",
  <中略>
  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/res",
    "src/img"
  ],

9. 启动开发服务器

我們將啟動開發用的伺服器。

$ ng serve -o

只要在浏览器中打开localhost:4200并显示应用程序界面，就可以了。

my-app-01.png

當我打開開發者工具(F12)並切換到手機模擬器模式下，我看到了以下的畫面。

10. 关闭开发服务器

在开发过程中，当您更改文件时，它会自动更新屏幕。

在终端上按下Ctrl + C可以退出开发服务器。

11. 安装Onsen UI

在移动设备的用户界面上使用Onsen UI进行显示。
让我们通过npm进行安装。

$ npm install onsenui ngx-onsenui

12. 修正 AppModule

请添加 OnsenModule 和 CUSTOM_ELEMENTS_SCHEMA。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { OnsenModule } from 'ngx-onsenui';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, OnsenModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

13. 修改styles.scss。

让我们导入与Onsen UI相关的CSS。

/* You can add global styles to this file, and also import other style files */
@import "~onsenui/css/onsenui.css";
@import "~onsenui/css/onsen-css-components.css";

现在已经准备好使用Onsen UI了。

14. 创建页面

请在终端中执行以下命令。

$ ng g component page1

15. 修正Page1Component的部分（1）

让我们修改模板。

<ons-toolbar>
  <div class="left"></div>
  <div class="center">Page 1</div>
</ons-toolbar>
<div class="content">
  <p>This is the first page.</p>
  <ons-button>Push page</ons-button>
</div>

16. 修复 Page1Component 的修改（2）

让我们将选择器更改为ons-page[page1]。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ons-page[page1]',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.scss']
})
export class Page1Component implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

17. 修复 AppComponent（1）

让我们将模板按以下方式进行更改。

<ons-navigator [page]="rootPage"></ons-navigator>

ons-navigator是一个提供页面转换功能的组件。在这里，我们设置了初始画面。

18. AppComponent的修改（2）

让我们设置rootPage。

import { Component } from '@angular/core';
import { Page1Component } from './page1/page1.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  rootPage = Page1Component;
}

19. 追加entryComponents

请将Page1Component添加到AppModule的entryComponents中。

import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';

@NgModule({
  declarations: [AppComponent, Page1Component],
  entryComponents: [Page1Component],
  <中略>
})
export class AppModule { }

为了在ons-navigator进行页面跳转时动态加载组件，需要使用entryComponents来告诉Angular指定的需要加载的组件。

确认

undefined

只需给出一个选项，请用中文将以下句子改写：准备在开发应用程序中运行

21. 安装

让我们在移动设备上安装”PhoneGap Developer”。

目前AppStore停止了发布。

22. 编辑index.html

让我们添加cordova.js吧。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <!-- <base href="/"> 削除 -->
  <script type="text/javascript" src="cordova.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

23. 建设（+观察）

请使用Ctrl+C停止服务器并执行以下命令。

$ ng build --watch

当文件发生更改时，会自动重新构建并输出到/www。

24. PhoneGap服务器的启动

在新的终端窗口中执行以下命令。

$ phonegap serve

请在PhoneGap Debugger应用上打开开发PC的IP地址：3000。

可以在浏览器中打开localhost:3000。

如果显示的是与20相同的屏幕，则表示成功。

结束

辛苦了！

现在，您已准备好在Angular CLI项目中使用Onsen UI。

如果你覺得這還不夠滿足你的需要！那就參考一下
https://github.com/puku0x/angular-cli-onsenui
來實現頁面轉換吧！

填充或補充

在常规开发中，请使用ng serve。
phonegap serve用于在真机上运行。

只要不使用调试应用程序，使用Cordova可以吗？

Onsen UI的其他组件如何使用？
→ 请参考：https://ja.onsen.io/v2/docs/angular2.html

bannerAds