angular构建项目_使用Angular和NativeScript构建Web和移动应用程序

angular构建项目

Angular has been around for a few years now and since its release it has been useful when creating many different categories of applications, including web as well as mobile. The problem, at least for me, has always been that the experience for creating these various applications has been inconsistent and often confusing even though the driving technology has always been the same.

Angular已经存在了几年，自发布以来，它在创建许多不同类别的应用程序（包括Web和移动应用程序）时非常有用。 至少对我来说，问题一直在于，即使驱动技术始终相同，创建这些各种应用程序的体验仍然不一致并且常常令人困惑。

Things have gotten better now that custom schematics can be used with the official Angular CLI. So what does that mean for us? We can take a project created with the Angular CLI, add a schematic, let's say for NativeScript, and end up with CLI compatible for both web and mobile.

现在，自定义原理图可以与官方Angular CLI一起使用，情况已经变得更好。 那对我们意味着什么？ 我们可以接受一个使用Angular CLI创建的项目，添加一个示意图（假设是NativeScript） ，最后得到与Web和移动设备兼容的CLI。

We're going to see how to use the Angular CLI to build a web and mobile compatible application with the NativeScript schematics.

我们将看到如何使用Angular CLI使用NativeScript原理图构建与Web和移动设备兼容的应用程序。

安装所需的全局NPM依赖关系 ( Install the Required Global NPM Dependencies )

Before we can create and maintain NativeScript applications from the Angular CLI, we need to make sure we have the appropriate global NPM dependencies available on our computer. Assuming that you already have Node.js installed and configured, execute the following from your command line:

在可以从Angular CLI创建和维护NativeScript应用程序之前，我们需要确保我们的计算机上具有适当的全局NPM依赖项。 假设您已经安装并配置了Node.js，请从命令行执行以下命令：

npm install -g @angular/cli@6.1.0-beta.0
npm install -g @nativescript/schematics
npm install -g nativescript

The above commands will install the Angular CLI, the NativeScript CLI, and the NativeScript schematics for the Angular CLI. You have to remember that the schematics are only for creating and maintaining projects. The NativeScript CLI is still required for building and deploying the mobile applications.

上面的命令将安装Angular CLI，NativeScript CLI和Angular CLI的NativeScript示意图。 您必须记住，原理图仅用于创建和维护项目。 仍然需要NativeScript CLI来构建和部署移动应用程序。

Take note of the version of the Angular CLI being used. As of right now, 06/29/2018, beta.2 and rc.0 have some bugs that are scheduled to be fixed in rc.1. Until then, make sure you're using beta.0 instead.

注意所使用的Angular CLI的版本。 截至目前，2018年6月29日，beta.2和rc.0中有一些bug计划在rc.1中修复。 在此之前，请确保您使用的是beta.0。

We won't get into it in this tutorial, but your computer must also be configured for Android and iOS development if you wish to build locally. If you wish to do a cloud build and skip all the Android and iOS setup, you can check out NativeScript Sidekick.

我们不会在本教程中介绍它，但是如果您希望在本地构建，则还必须将您的计算机配置为Android和iOS开发。 如果您想进行云构建并跳过所有Android和iOS设置，则可以查看NativeScript Sidekick 。

创建具有NativeScript支持的新Angular CLI项目 ( Create a New Angular CLI Project with NativeScript Support )

With the proper dependencies in place, we can add NativeScript support to an Angular CLI project. While you can do it to an existing project, we're going to start with a fresh project for simplicity. From the command line, execute the following:

有了适当的依赖关系后，我们可以将NativeScript支持添加到Angular CLI项目中。 尽管您可以对现有项目进行操作，但为简单起见，我们将从一个新项目开始。 在命令行中，执行以下操作：

ng new angular-project

The above command will create a new Angular project, which by default, will be for web applications, not native mobile applications. We can add mobile application support by using the following, very simple, command:

上面的命令将创建一个新的Angular项目，默认情况下，该项目将用于Web应用程序，而不是本机移动应用程序。 我们可以使用以下非常简单的命令来添加移动应用程序支持：

ng add @nativescript/schematics

Make sure you had navigated into your project before executing the command above. You have to be in a project that was created with the Angular CLI, so if you had created a NativeScript project with the NativeScript CLI, I don't think schematics can be included.

执行上面的命令之前，请确保已导航到项目。 您必须处于使用Angular CLI创建的项目中，因此，如果您使用NativeScript CLI创建了NativeScript项目，则我认为不会包含原理图。

In the scenario that you're truly creating a fresh code-sharing project, you can create an Angular with NativeScript project using the following single command as an alternative:

在您确实要创建一个新的代码共享项目的情况下，可以使用以下单个命令来替代使用NativeScript项目创建Angular：

ng new --c=@nativescript/schematics --name=angular-project --shared

However, if you're adding schematics to an existing project, the prior command should be used. More information on the schematics for NativeScript can be found in the official @nativescript/schematics repository.

但是，如果要将原理图添加到现有项目中，则应使用先前的命令。 有关NativeScript原理图的更多信息，请参见官方@ nativescript / schematics存储库。

了解原理图更改和角度开发过程 ( Understanding the Schematic Changes and Process for Angular Development )

When you add the NativeScript schematics to your Angular project, you'll notice that it created quite a few files and even altered a few of the configuration files. Your original project should be in tact, so don't worry about something destructive happening.

将NativeScript原理图添加到Angular项目中时，您会注意到它创建了很多文件，甚至更改了一些配置文件。 您的原始项目应该完好无损，所以不必担心会发生破坏性的事情。

The most obvious thing that you'll notice is that you have some .tns.ts and some .tns.html files. At first glance you'll probably think that you now have to manage two different code-sets, which is not entirely true. NativeScript is a native mobile application framework which means you can't use standard HTML markup for the UI. For this reason, yes you do have to maintain a web UI and a NativeScript UI. When it comes to the TypeScript, you could have a web version and a NativeScript version for everything, but you don't need to. Where it makes sense is in the modules and routing areas since there are services like NativeScriptRoutingModule and RoutingModule which accomplish the same, but are specific to platform.

您会注意到的最明显的事情是，您有一些.tns.ts和一些.tns.html文件。 乍一看，您可能会认为您现在必须管理两个不同的代码集，但这并不完全正确。 NativeScript是本机移动应用程序框架，这意味着您不能为UI使用标准HTML标记。 因此，是的，您必须维护一个Web UI和一个NativeScript UI。 当涉及到TypeScript时，可以为所有内容提供一个Web版本和一个NativeScript版本，但是您不需要这样做。 有意义的地方是模块和路由区域，因为有诸如NativeScriptRoutingModule和RoutingModule类的服务可以实现相同功能，但特定于平台。

Have I confused you yet?

我迷惑了你吗？

Let's modify our new project so that we can see the power of having so many platforms under "almost" a single CLI. Starting with the project's src/app/app.routing.tns.ts file, clone it to src/app/app.routing.ts and make it look like the following:

让我们修改新项目，以便我们可以看到在“几乎”一个CLI下拥有这么多平台的强大功能。 从项目的src / app / app.routing.tns.ts文件开始，将其克隆到src / app / app.routing.ts并使其看起来如下所示：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: '/players', pathMatch: 'full' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

If you haven't noticed, the differences are in the naming of the modules being used. Since this file is for the web, we have removed the tns from the filename and used the vanilla Angular modules.

如果您没有注意到，则区别在于所使用的模块的命名。 由于此文件用于网络，因此我们从文件名中删除了tns并使用了香草Angular模块。

We're not quite in the clear yet. We need to alter our project's src/app/app.module.ts file to be more in line with the NativeScript version:

我们还不太清楚。 我们需要更改项目的src / app / app.module.ts文件，使其更符合NativeScript版本：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app.routing';

import { AppComponent } from './app.component';
import { BarcelonaModule } from './barcelona/barcelona.module';

@NgModule({
    declarations: [
        AppComponent,
        AboutComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BarcelonaModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

If you're coming from an established Angular project, you'll likely be playing catchup with the NativeScript version instead. In other words the reverse of what we're doing.

如果您来自已建立的Angular项目，则可能会改用NativeScript版本进行赶超。 换句话说，我们正在做的事情正好相反。

The last step is to fix up the src/app/app.component.html file. As of now, June 2018, we have a default landing page with no routing in our Angular project. We need to finish with the routing setup. In the project's src/app/app.component.html, replace everything with the following:

最后一步是修复src / app / app.component.html文件。 截至2018年6月，我们有一个默认的登录页面，但我们的Angular项目中没有路由。 我们需要完成路由设置。 在项目的src / app / app.component.html中 ，将所有内容替换为以下内容：

<router-outlet></router-outlet>

We're only trying to match the behavior between the two applications. Since the application is fresh, the NativeScript version accomplished a lot more than the web version. The initial content further validated this.

我们仅试图匹配两个应用程序之间的行为。 由于应用程序是全新的，因此NativeScript版本比Web版本完成了很多工作。 最初的内容进一步证实了这一点。

At this point our project is done, but what if we wanted to use the Angular CLI going forward with our project? How about we create a new component with the following command:

至此，我们的项目已经完成，但是如果我们想在项目中继续使用Angular CLI，该怎么办？ 我们如何使用以下命令创建一个新组件：

ng g component about

The above command will use the CLI to create a component called about and as a result you'll end up with the following:

上面的命令将使用CLI创建一个名为about的组件，结果您将获得以下内容：

src/app/about/about.component.css
src/app/about/about.component.html
src/app/about/about.component.tns.html
src/app/about/about.component.ts
src/app/about/about.component.spec.ts

Where I'm going with this is that you can use the Angular CLI like you would any other Angular application. You'll end up with a .tns.html file that you can add your custom UI for mobile to. There are plenty of other commands beyond generating components, so don't feel that you're limited.

我要做的是，可以像使用其他任何Angular应用程序一样使用Angular CLI。 最后，您将获得一个.tns.html文件，您可以将自定义UI添加到移动设备中。 除了生成组件之外，还有许多其他命令，因此不要觉得自己受到限制。

使用NativeScript CLI在Android或iOS上运行Angular CLI项目 ( Running an Angular CLI Project on Android or iOS with the NativeScript CLI )

With the project created, altered, and ready to go, we can worry about running our application. In its simplest form, we can test that the project still works as a web application. From the command line, execute the following:

创建，更改并准备好项目后，我们可以担心运行我们的应用程序。 以最简单的形式，我们可以测试该项目仍然可以作为Web应用程序使用。 在命令行中，执行以下操作：

ng serve

When the command completes, you can visit http://localhost:4200 in your web browser to see it in action. To run the application on a mobile device, you can similarly run the following:

命令完成后，您可以在Web浏览器中访问http：// localhost：4200来查看其运行情况。 要在移动设备上运行该应用程序，您可以类似地运行以下命令：

tns run ios --bundle

The above command will run the application on iOS. You can easily switch the ios part for android if that is better for you. The most important part of the command is the --bundle. If you don't bundle the application, it will crash with a lot of confusing errors.

上面的命令将在iOS上运行该应用程序。 您可以轻松切换适用于android的ios部分，如果这样做更适合您。 该命令最重要的部分是--bundle 。 如果您不捆绑该应用程序，它将崩溃并出现许多令人困惑的错误。

结论 ( Conclusion )

You just saw how to use the Angular CLI with a NativeScript Android and iOS application. This was a long awaited and insanely requested feature by both the Angular and NativeScript community. Having separation of CLIs for development that used Angular was doing no one any favors.

您刚刚看到了如何在NativeScript Android和iOS应用程序中使用Angular CLI。 这是Angular和NativeScript社区期待已久且疯狂要求的功能。 分离使用Angular进行开发的CLI并没有带来任何好处。

It is important to remember that NativeScript projects build native mobile applications. For this reason you can recycle your logic, but separate UI components must exist. Even though it sounds like a bad thing, it is a good thing because you can give your mobile and web applications a separate, but very polished user experience. If you want to give NativeScript a quick try, check out the NativeScript Playground. You can build your first truly native mobile app deployed on your own device in 3 minutes.

重要的是要记住，NativeScript项目会构建本机移动应用程序。 因此，您可以回收逻辑，但是必须存在单独的UI组件。 即使听起来像是一件坏事，也是一件好事，因为您可以为您的移动和Web应用程序提供单独的，但非常优美的用户体验。 如果您想快速尝试NativeScript，请查看NativeScript Playground 。 您可以在3分钟内构建在您自己的设备上部署的第一个真正的本地移动应用程序。

翻译自: https://scotch.io/tutorials/use-angular-and-nativescript-to-build-a-web-and-mobile-application

angular构建项目