NativeScript - Angular应用

NativeScript - Angular应用 首页 / NativeScript入门教程 / NativeScript - Angular应用

让无涯教程创建一个简单的应用程序，以了解NativeScript应用程序的步骤。

创建应用程序

先学习如何使用NativeScript CLI创建简单的应用程序tns。 tns提供了一个create命令，用于在NativeScript中创建一个新项目。

创建新应用程序的基本语法如下:

tns create <projectname> --template <template_name>

创建一个名为NativeScript Samples的新目录以在新应用程序上工作。现在，打开一个新终端，然后移到目录并键入以下命令-

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应用程序分为多个部分，如下所示-

链接：https://www.learnfk.comhttps://www.learnfk.com/nativescript/nativescript-angular-application.html

来源：LearnFk无涯教程网

  • Configuration section

  • Node modules

  • Android Sources

  • iOS Sources

  • Application source code

该应用程序的一般结构如下-

│ 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

来一起了解应用程序的每个部分，以及它如何帮助创建应用程序。

Configuration Section

应用程序根目录中的所有文件都是配置文件。配置文件的格式为JSON格式，这有助于开发人员轻松了解配置详细信息。 NativeScript应用程序依靠这些文件来获取所有可用的配置信息。

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" 
}

Node modules

由于NativeScript项目是基于节点的项目，因此将其所有依赖项存储在node_modules文件夹中。可以使用npm或tns将所有应用程序依赖项下载并安装到node_moduels中。

Android Sources

NativeScript自动生成android源代码并将其放置在App_Resources\Android文件夹中。它将用于使用 Android SDK 创建android应用程序

iOS Source

NativeScript自动生成iOS源代码并将其放在App_Resources\iOS文件夹中。它将用于使用iOS SDK和XCode创建iOS应用程序

Application source code

实际的应用程序代码位于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组件以纯HMTL设计的。

第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

执行此命令后，这将生成QR码以进行扫描并与您的设备连接。

运行上面代码输出

QRCode

现在将生成QR码，并在下一步中连接到PlayGround。

NativeScript PlayGround

在iOS或Android手机上打开NativeScript PlayGround应用，然后选择扫描QR码选项。它将打开相机。聚焦控制台上显示的QR码。这将扫描QR码。扫描QR码将触发应用程序构建，然后将应用程序同步到设备，如下所示-

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设备中初始化应用。无涯教程将在接下来的章节中对此进行更详细的讨论。

LiveSync

NativeScript可将应用程序中的更改实时同步到预览应用程序。使用您喜欢的任何编辑器打开项目(Visual Studio Code是实现更好可视化的理想选择)。让在代码中添加一些更改，看看如何在LiveSync中检测到这些更改。

现在打开文件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，如下所示-

运行上面代码输出

以下是空白的应用首页-棕色主题。

Brown Theme

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Java核心技术面试精讲 -〔杨晓峰〕

快速上手Kotlin开发 -〔张涛〕

如何看懂一幅画 -〔罗桂霞〕

重学线性代数 -〔朱维刚〕

说透5G -〔杨四昌〕

业务开发算法50讲 -〔黄清昊〕

深入浅出分布式技术原理 -〔陈现麟〕

AI大模型企业应用实战 -〔蔡超〕

云原生基础架构实战课 -〔潘野〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630