NativeScript - Angular 應用

上一頁
下一頁

讓我們建立一個簡單的基礎應用來理解 NativeScript 應用的工作流程。

建立應用

讓我們學習如何使用 NativeScript CLI（tns）建立簡單的應用。tns 提供了一個名為 create 的命令，用於在 NativeScript 中建立新專案。

建立新應用的基本語法如下：

tns create <projectname> --template <template_name>

其中，

  • Projectname 是專案的名稱。

  • template_name 是專案模板。NativeScript 提供了許多啟動模板來建立不同型別的應用。使用基於 Angular 的模板。

讓我們建立一個名為 NativeScriptSamples 的新目錄來處理我們的新應用。現在，開啟一個新的終端，然後移動到我們的目錄並輸入以下命令：

tns create BlankNgApp --template tns-template-blank-ng

其中，tns-template-blank-ng 指的是一個基於 AngularJS 的空白移動應用模板。

輸出

..... 
..... 
..... 
Project BlankNgApp was successfully created. 
Now you can navigate to your project with $ cd BlankNgApp 
After that you can preview it on device by executing $ tns preview

現在，我們的第一個移動應用 BlankNgApp 已建立。

應用結構

在本節中，讓我們透過分析我們的第一個應用 BlankNgApp 來了解 NativeScript 應用的結構。NativeScript 應用被組織成多個部分，如下所示：

  • 配置部分

  • 節點模組

  • Android 原始碼

  • iOS 原始碼

  • 應用原始碼

應用的總體結構如下：

│ angular.json 
│ LICENSE 
│ nsconfig.json 
│ package-lock.json 
│ package.json 
│ tsconfig.json 
│ tsconfig.tns.json 
│ tsfmt.json 
│ webpack.config.js 
│
├───App_Resources 
│  ├───Android 
│  │ 
│  └───iOS 
│ 
├───hooks 
│ 
├───node_modules 
| 
└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
      │  app-routing.module.ts 
      │  app.component.html 
      │  app.component.ts 
      │  app.module.ts 
      │ 
      └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

讓我們瞭解應用的每個部分以及它如何幫助我們建立應用。

配置部分

應用根目錄下的所有檔案都是配置檔案。配置檔案的格式為 JSON 格式，這有助於開發人員輕鬆理解配置細節。NativeScript 應用依賴於這些檔案來獲取所有可用的配置資訊。讓我們在本節中瀏覽所有配置檔案。

package.json

package.json 檔案設定應用的標識（id）以及應用正常執行所依賴的所有模組。以下是我們的 package.json 檔案：

{ 
   "nativescript": {
      "id": "org.nativescript.BlankNgApp",
      "tns-android": {
         "version": "6.3.1"
      }, "tns-ios": {
         "version": "6.3.0"
      } 
   }, "description": "NativeScript Application", 
   "license": "SEE LICENSE IN <your-license-filename>", 
   "repository": "<fill-your-repository-here>", 
   "dependencies": { 
      "@angular/animations": "~8.2.0", 
      "@angular/common": "~8.2.0", 
      "@angular/compiler": "~8.2.0", 
      "@angular/core": "~8.2.0", 
      "@angular/forms": "~8.2.0", 
      "@angular/platform-browser": "~8.2.0", 
      "@angular/platform-browser-dynamic": "~8.2.0", 
      "@angular/router": "~8.2.0", 
      "@nativescript/theme": "~2.2.1", 
      "nativescript-angular": "~8.20.3", 
      "reflect-metadata": "~0.1.12", 
      "rxjs": "^6.4.0", 
      "tns-core-modules": "~6.3.0", 
      "zone.js": "~0.9.1" 
   }, 
   "devDependencies": { 
      "@angular/compiler-cli": "~8.2.0", 
      "@ngtools/webpack": "~8.2.0", 
      "nativescript-dev-webpack": "~1.4.0", 
      "typescript": "~3.5.3" 
   }, 
   "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", 
   "readme": "NativeScript Application" 
}

這裡，

應用的標識 (nativescript/id) - 將應用的 id 設定為 org.nativescript.BlankNgApp。此 id 用於將我們的應用釋出到 Play 商店或 iTunes。此 id 將是我們的應用識別符號或包名稱。

依賴項 (dependencies) - 指定我們所有依賴的節點模組。由於預設的 NativeScript 實現依賴於 Angular 框架，因此包含了 Angular 模組。

開發依賴項 - 指定應用依賴的所有工具。由於我們正在 TypeScript 中開發應用，因此它將 TypeScript 作為依賴模組之一。

angular.json - Angular 框架配置資訊。

nsconfig.json - NativeScript 框架配置資訊。

tsconfig.json, tsfmt.json & tsconfig.tns.json - TypeScript 語言配置資訊

webpack.config.js - 用 JavaScript 編寫的 WebPack 配置檔案。

節點模組

由於 NativeScript 專案是基於 Node 的專案，因此它將所有依賴項儲存在 node_modules 資料夾中。我們可以使用 npm (npm install) 或 tns 將所有應用依賴項下載並安裝到 node_modules 中。

Android 原始碼

NativeScript 自動生成 Android 原始碼並將其放置在 App_Resources\Android 資料夾中。它將用於使用 Android SDK 建立 Android 應用。

iOS 原始碼

NativeScript 自動生成 iOS 原始碼並將其放置在 App_Resources\iOS 資料夾中。它將用於使用 iOS SDK 和 XCode 建立 iOS 應用。

應用原始碼

實際的應用程式碼放在 src 資料夾中。我們的應用在 src 資料夾中有以下檔案。

└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
   │ app-routing.module.ts 
   │ app.component.html 
   │ app.component.ts 
   │ app.module.ts 
   │ 
   └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

讓我們瞭解所有檔案的作用以及它們在本節中是如何組織的：

步驟 1

main.ts - 應用的入口點。

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

在這裡，我們已將 AppModule 設定為應用的引導模組。

步驟 2

app.css - 應用的主要樣式表，如下所示：

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

這裡，

app.css 匯入 NativeScript 框架的核心樣式表和棕色主題樣式表。

步驟 3

app\app.module.ts - 應用的根模組。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], 
      imports: [
         NativeScriptModule,
         AppRoutingModule
      ], 
      declarations: [
         AppComponent
      ], schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class AppModule { }

這裡，

AppModule 是基於 NgModule 建立的，並設定了應用的元件和模組。它匯入兩個模組 NativeScriptModule 和 AppRoutingModule 以及一個元件 AppComponent。它還將 AppComponent 設定為應用的根元件。

步驟 4

app.component.ts - 應用的根元件。

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

這裡，

AppComponent 設定了元件的模板和樣式表。模板使用 NativeScript UI 元件以純 HTML 設計。

步驟 5

app-routing.module.ts - AppModule 的路由模組。

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: () =>
   import("~/app/home/home.module").then((m) => m.HomeModule) } 
];
@NgModule(
   {
      imports: [NativeScriptRouterModule.forRoot(routes)], 
      exports: [NativeScriptRouterModule] 
   }
)
export class AppRoutingModule { }

這裡，

AppRoutingModule 使用 NativeScriptRouterModule 並設定 AppModule 的路由。它基本上將空路徑重定向到 /home，並將 /home 指向 HomeModule。

步驟 6

app\home\home.module.ts - 定義一個新的模組 HomeModule。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
   {
      imports: [
         NativeScriptCommonModule,
         HomeRoutingModule
      ],
      declarations: [
         HomeComponent
      ],
      schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class HomeModule { }

這裡，

HomeModule 匯入兩個模組 HomeRoutingModule 和 NativeScriptCommonModule 以及一個元件 HomeComponent。

步驟 7

app\home\home.component.ts - 定義 Home 元件，用作應用的主頁。

import { Component, OnInit } from "@angular/core";
@Component(
   {
      selector: "Home", templateUrl: "./home.component.html" 
   }
) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
}

這裡，

HomeComponent 設定了 Home 元件的模板和選擇器。

步驟 8

app\home\home-routing.module.ts - HomeModule 的路由模組，用於定義 Home 模組的路由。

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
const routes: Routes = [
   { path: "", component: HomeComponent } 
]; 
@NgModule(
   { 
      imports: [NativeScriptRouterModule.forChild(routes)], 
      exports: [NativeScriptRouterModule] 
   }
) 
export class HomeRoutingModule { }

這裡，

HomeRoutingModule 將空路徑設定為 HomeComponent。

步驟 9

app.component.html 和 home.component.html - 它們用於使用 NativeScript UI 元件設計應用的 UI。

執行應用

如果要執行應用而不使用任何裝置，請鍵入以下命令：

tns preview

執行此命令後，它將生成一個二維碼供您掃描並連線到您的裝置。

輸出

QRCode

二維碼

現在二維碼已生成，並在下一步連線到 PlayGround。

NativeScript PlayGround

在您的 iOS 或 Android 手機上開啟 NativeScript PlayGround 應用，然後選擇“掃描二維碼”選項。它將開啟相機。將相機對準控制檯中顯示的二維碼。這將掃描二維碼。掃描二維碼將觸發應用構建，然後將應用同步到裝置，如下所示：

Copying template files... 
Platform android successfully added. v6.3.1 
Preparing project... 
File change detected. Starting incremental webpack compilation... 
webpack is watching the files… 
Hash: 1f38aaf6fcda4e082b88 
Version: webpack 4.27.1 
Time: 9333ms 
Built at: 01/04/2020 4:22:31 PM
               Asset          Size        Chunks         Chunk Names 
               0.js           8.32 KiB     0     [emitted] 
          bundle.js           22.9 KiB    bundle [emitted] bundle 
       package.json          112 bytes           [emitted] 
         runtime.js             73 KiB   runtime [emitted] runtime 
tns-java-classes.js            0 bytes  [emitted] 
          vendor.js            345 KiB   vendor  [emitted] vendor 
Entrypoint bundle = runtime.js vendor.js bundle.js 
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy 
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built] 
[./app/app.component.html] 62 bytes {bundle} [built] 
[./app/app.component.ts] 354 bytes {bundle} [built] 
[./app/app.module.ts] 3.22 KiB {bundle} [built] 
[./app/home/home.module.ts] 710 bytes {0} [built] 
[./main.ts] 1.84 KiB {bundle} [built] 
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built] 
[nativescript-angular/platform] external "nativescript-angular/platform" 42 
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built] 
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42 
bytes {bundle} [built] 
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built] 
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built] 
   + 15 hidden modules Webpack compilation complete. Watching for file changes. 
Webpack build done! 
Project successfully prepared (android) 
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f). 
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f). 
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal. 
LOG from device Bala Honor Holly: Angular is running in the development mode. 
Call enableProdMode() to enable the production mode.

輸出

掃描後，您應該會在裝置上看到您的 BlankNgApp。它顯示如下：

BlankNgApp

在裝置上執行應用

如果要測試應用中連線的裝置，可以使用以下語法進行驗證：

'tns device <Platform> --available-devices'

之後，您可以使用以下命令執行您的應用：

tns run

以上命令用於在本地構建您的應用並安裝到 Android 或 iOS 裝置上。如果要將應用執行在 Android 模擬器上，請鍵入以下命令：

tns run android

對於 iOS 裝置，您可以按照以下命令操作：

tns run ios

這將在 Android/iOS 裝置上初始化應用。我們將在後續章節中詳細討論此內容。

即時同步

NativeScript 提供應用更改到預覽應用的即時同步。讓我們使用您喜歡的任何編輯器（Visual Studio Code 是更好的選擇，因為它提供了更好的視覺化效果）開啟專案。讓我們在程式碼中新增一些更改，並看看即時同步如何檢測到這些更改。

現在開啟 app.css 檔案，它將包含以下內容：

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/blue.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

這裡，import 語句指示應用的顏色方案。讓我們將藍色顏色方案更改為如下所示的棕色顏色方案：

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

裝置上的應用將重新整理，您應該會看到一個棕色的 ActionBar，如下所示：

輸出

以下是 BlankNgApp 的主頁 - 棕色主題。

Brown Theme
列印頁面
上一頁
下一頁
廣告