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
打印页面
上一页
下一页
广告