angular构建项目_使用Angular 2+和Electron I构建音乐播放器：设置和基本概念

angular构建项目

Last year, I wrote a series on how we can make a music player using React. The app was able to run as a desktop app because we employed Electron. Soundcloud was also used as the database for a music library. The series did well and helped a lot of us to get started with React, and for that reason, I am doing it again. As a matter of fact, developers who love Angular 2 reached out and wondered if I could make the same piece for Angular.

去年，我写了一系列有关如何使用React制作音乐播放器的文章 。 该应用程序能够作为桌面应用程序运行，因为我们雇用了Electron。 Soundcloud还被用作音乐库的数据库。 该系列的表现很好，并帮助我们很多人开始使用React，因此，我再次这样做。 事实上，热爱Angular 2的开发人员伸出援手，想知道我是否可以为Angular制作相同的作品。

This time, we are about to go on an adventure with Angular, building a fun music player while dancing and running the player right from our Mac, Windows or Linux environment. This is beginning to feel exciting already.

这次，我们将与Angular一起冒险，在我们的Mac，Windows或Linux环境中跳舞并运行播放器的同时构建有趣的音乐播放器。 这已经开始令人兴奋。

NOTE: We are using "Angular 2" and not Angular 1.x. I am trying as much as possible not to use the term "Angular 2" but just "Angular" for these reasons.

注意：我们使用的是“ Angular 2”而不是Angular1.x。 由于这些原因，我正在尝试尽可能不使用术语“ Angular 2”，而仅使用“ Angular”。

This article will be structured the same way as that of React, borrow a lot of its approach and utilize most of the techniques you see there.

本文的结构将与React相同，并借鉴了它的许多方法，并利用了您在那里看到的大多数技术。

The following diagram shows what our app will look at the end of this journey:

下图显示了我们的应用在此旅程结束时的外观：

If this feels exciting, read on.

如果这令人兴奋，请继续阅读。

必修知识 ( Required Knowledge )

Basics of JavaScript and HTML is all you need to join the party. The new Angular can be daunting, but I will try as much as possible to explain whatever seems strange. If you think you need to see an Angular getting started guide, then Tour of Heroes is a good place to be and is always up to date.

参加聚会所需的只是JavaScript和HTML的基础知识。 新的Angular可能令人生畏，但我将尽力解释所有看起来很奇怪的东西。 如果您认为需要查看Angular入门指南，那么“英雄之旅”将是一个不错的去处，并且始终保持最新状态。

工具和工具设置 ( Tools & Tools Setup )

One of the most challenging aspects of creating a desktop app with Electron and Angular is setting up the environment. This section will walk you through this process, in a stepwise manner.

使用Electron和Angular创建桌面应用程序最具挑战性的方面之一就是设置环境。 本节将逐步引导您完成此过程。

1.创建一个新的Angular应用 (1. Creating a New Angular App)

The Angular CLI is a utility tool that helps developers effortlessly create and Angular app as wells generate its parts (components, pipes, services, etc.). It hides the application bundling details and exposes a JSON file for configuring how the app is bundled which makes things more declarative.

Angular CLI是一个实用工具，可帮助开发人员轻松创建，并且Angular应用程序也可以生成其零件（组件，管道，服务等）。 它隐藏了应用程序捆绑的详细信息，并公开了一个JSON文件，用于配置应用程序的捆绑方式，从而使声明更具声明性。

First, of course, is to install this CLI tool:

首先，当然是要安装此CLI工具：

npm install -g angular-cli

You can create a new app using the CLI by running the following command:

您可以通过运行以下命令使用CLI创建新应用：

ng new scotch-music-player

An Angular app has been setup with just a single command. No Webpack a headache, nor SystemJS troubles, just a single line command.

仅使用一个命令即可设置Angular应用。 没有Webpack麻烦，也没有SystemJS麻烦，仅需一行命令。

2.安装电子 (2. Install Electron)

Electron amongst all other options has become the most popular tool for building desktop apps using web technologies. As a matter of fact, Electron was used to build some of the popular tools you use as a developer including VSCode and Atom. It has become so popular that it won't be surprising to see that one or more software(s) running on your machine was built on top of this awesome tool.

在所有其他选项中，Electron已成为使用Web技术构建桌面应用程序的最受欢迎工具。 实际上，Electron被用来构建一些流行的工具，包括VSCode和Atom 。 它已经变得如此流行，以至于看到您的计算机上运行的一个或多个软件都基于此强大工具构建就不足为奇了。

We need to install Electron in the just created Angular app. That is simple:

我们需要在刚刚创建的Angular应用中安装Electron。 很简单：

npm install --save-dev electron

3.配置电子 (3. Configure Electron)

Electron configuration and setup is achieved using a JavaScript file by listening to lifecycle events, accessing the API methods and passing in our options to this methods. At the root of Angular app, create a main.js file:

使用JavaScript文件通过监听生命周期事件，访问API方法并将我们的选项传递给该方法来实现电子配置和设置。 在Angular应用的根目录下，创建一个main.js文件：

// ./main.js
const {app, BrowserWindow} = require('electron')


let win = null;

app.on('ready', function () {

  // Initialize the window to our specified dimensions
  win = new BrowserWindow({width: 1000, height: 600});

  // Specify entry point
  win.loadURL('http://localhost:4000');

  // Show dev tools
  // Remove this line before distributing
  win.webContents.openDevTools()

  // Remove window once app is closed
  win.on('closed', function () {
    win = null;
  });

});

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

app.on('window-all-closed', function () {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

When the app is ready, we create a new BrowserWindow and configure it's dimension.

应用就绪后，我们将创建一个新的BrowserWindow并配置其尺寸。

Next, we use the loadURL method to tell Electron where it should fetch its content from. http://localhost:4000 is where Angular CLI will run our Angular app at if we run ng serve.

接下来，我们使用loadURL方法告诉Electron它应该从哪里获取其内容。 如果我们运行ng serve ，Angular CLI将在http://localhost:4000运行Angular应用程序。

The openDevTools method shows the developer tools for debugging purposes. This is not needed when the app is being distributed and therefore should be removed before that.

openDevTools方法显示用于调试目的的开发人员工具。 分发应用程序时不需要此操作，因此应在此之前将其删除。

We need to tell Electron about this file by specifying it in the package.json:

我们需要通过在package.json指定它来告诉Electron这个文件：

{
  "name": "scotch-music-player",
  "version": "0.0.1",
  "main": "main.js",
  ...
}

Run the following command to start Angular in one terminal:

运行以下命令以在一个终端中启动Angular：

ng serve

...and the following to start Electron in another

...以及以下内容以另一个方式启动Electron

electron.

Awesome!

太棒了！

4.发行配置 (4. Distribution Config)

There are few points to consider while preparing the app for distribution:

在准备分发应用程序时，需要考虑以下几点：

1. The loadURL should be a file path and not http path.
   loadURL应该是file路径，而不是http路径。
2. The base URL should point to the dist folder and not /
   基本网址应指向dist文件夹，而不是/
3. Dev tools should be hidden.
   开发工具应该被隐藏。

To achieve this effectively, we need to install dotenv, a package that allows you the opportunity to configure environmental variables in a .env file:

为了有效地实现这一目标，我们需要安装dotenv ，这是一个允许您在.env文件中配置环境变量的.env ：

npm install --save dotenv

Create a .env file at the root of the project folder with the following values:

使用以下值在项目文件夹的根目录中创建一个.env文件：

PACKAGE=false
HOST=http://localhost:4200

You can now update the ready event handler behavior accordingly:

现在，您可以相应地更新ready事件处理程序的行为：

// ./main.js
const {app, BrowserWindow} = require('electron')
const path = require('path');
const url = require('url');

require('dotenv').config();

let win = null;

...

app.on('ready', function () {

  // Initialize the window to our specified dimensions
  win = new BrowserWindow({width: 1000, height: 600});

  // Specify entry point
  if (process.env.PACKAGE === 'true'){
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  } else {
    win.loadURL(process.env.HOST);
    win.webContents.openDevTools();
  }

  ...

});

When the PACKAGE env variable is set to true, it is expected that the app is run with content in the dist folder which is generated when ng build is executed. If PACKAGE=true is NOT the case, then we just continue what we were doing before.

当PACKAGE env变量设置为true ，预计应用程序将使用dist文件夹中的内容运行，该文件夹是在执行ng build时生成的。 如果不是PACKAGE=true ，那么我们将继续之前的操作。

We just considered the 2nd and 3rd points, how about the 1st point, on base URL?

我们只是考虑了第二点和第三点，第一点在基本URL上怎么样？

The ng build command allows you to pass in options of base URL so you can do something like this:

ng build命令允许您传入基本URL的选项，因此您可以执行以下操作：

ng build --base-href /$ROOT/your-project-folder/scotch-player/dist/

That's not fun to always type at the console so you can add it as a script to package.json:

总是在控制台上键入并不是很有趣，因此您可以将其作为脚本添加到package.json中：

"scripts": {
    "start": "ng serve",
    "build": "ng build --base-href /$ROOT/your-project-folder/scotch-player/dist/",
    "electron": "electron .",
}

You can test these distribution strategies by changing PACKAGE to true in .env as well as running the following commands in different terminal:

您可以通过在.env中将PACKAGE更改为true以及在其他终端中运行以下命令来测试这些分发策略：

npm run build

and

和

npm run electron

5.实时重载 (5. Live Reload)

Our productivity gets a boost when we do not have to stop electron and restart it to see our changes. Therefore, we need a way to ask Electron to refresh our app once a change occurs in the application.

当我们不必停止电子并重新启动以查看我们的变化时，我们的生产率就会得到提高。 因此，一旦应用程序发生更改，我们需要一种方法来要求Electron刷新我们的应用程序。

A module called electron-reload exists for this so go ahead to install:

为此，存在一个称为electron-reload模块，因此请继续安装：

npm install electron-reload

In your main.js file you just need to require the module and pass in a directory to watch:

在您的main.js文件中，您只需要使用模块并传递目录即可观看：

...
require('electron-reload')(__dirname);
...

角度组件：演示与容器 ( Angular Components: Presentation vs Container )

A very popular pattern in the JavaScript community these days, especially amongst component architecture based projects, is separating app components into two major parts -- presentation (a.k.a UI) and container. This phenomenon rose among React developers and with time became popular among other developers working on different component-based solutions. We will explore what these types are, why they even exist and when to use which.

如今，尤其是在基于组件体系结构的项目中，JavaScript社区中非常流行的一种模式是将应用程序组件分为两个主要部分-表示（aka UI）和容器。 这种现象在React开发人员中越来越普遍，并且随着时间的流逝在从事基于组件的不同解决方案的其他开发人员中越来越流行。 我们将探讨这些类型是什么，为什么它们甚至存在以及何时使用它们。

演示（UI）组件 (Presentation (UI) Components)

UI components as they are also called are responsible for rendering contents in the view. Contents and styles are what they specialties. They never care about how this content come about; they just know how to render it.

UI组件（也称为UI组件）负责在视图中呈现内容。 内容和样式是它们的特色。 他们从不关心这些内容是如何产生的。 他们只知道如何渲染它。

For the reason that UI components are ignorant of data, they should have a way to receive data from whatever is responsible for that. In Angular, this is achieved using the Input directive which we will use while building our app.

由于UI组件不了解数据，因此它们应该有一种方法可以从负责该操作的任何组件接收数据。 在Angular中，这是通过在构建应用程序时将使用的Input指令实现的。

Events also are delegated up to the container component and not handled in the UI components using the Output directive. We will also see how while building the music app.

事件也被委托给容器组件，并且不使用Output指令在UI组件中处理。 我们还将看到构建音乐应用程序时的方式。

The reason why presentation components do not hold data models or handle events is, these components have high tendency to be re-used anywhere in your app and if data or events are bound directly to them, they become very difficult to re-use or move around.

表示组件不保存数据模型或处理事件的原因是，这些组件很容易在应用程序中的任何地方重复使用 ，并且如果数据或事件直接绑定到它们，则它们变得很难重用或移动。周围。

The following are good examples of UI components:

以下是UI组件的好示例：

• Date picker
  日期选择器
• Music controls
  音乐控制
• Video controls
  视频控件
• Image galleries
  图片库
• Navigation menus
  导航菜单
• Accordions
  手风琴
• Autocompletes
  自动完成
• ...and much more
  ...以及更多

容器组件 (Container Components)

This component does less to no content and more data models. Container components are responsible for how data is manufactured or fetched, how data is structured, formatted and so on.

该组件几乎没有内容，而没有更多数据模型。 容器组件负责数据的制造或获取方式，数据的结构方式，格式等。

Container components are the guys responsible for sending data down to presentation component and handling events delegated to them from the presentation component.

容器组件是负责将数据发送到表示组件并处理从表示组件委派给它们的事件的人员。

Your app most time will have few container components depending on how large the app is. Sometimes a container component to a page or section and sometimes a container component to house the whole app if the app is really small or a just a single view app.

您的应用大多数时间将只有很少的容器组件，具体取决于应用的大小。 如果应用程序很小或仅是一个视图应用程序，则有时是页面或分区的容器组件，有时是容纳整个应用程序的容器组件。

A very good example is the app component that comes with every Angular quickstart or starter kit.

一个很好的例子是每个Angular快速入门或入门工具包附带的应用程序组件。

往下 ( Up Next )

What we have just done is the most intimidating aspect of creating an Angular + Electron project which is setting it up. Explaining the basic types of components will explain why our app is structured the way it is while we build the app out. In the next article, we will get more awesome by creating the presentation components of our music app.

我们刚刚所做的是创建正在设置的Angular + Electron项目中最令人生畏的方面。 解释组件的基本类型将解释为什么在构建应用程序时以我们的方式构建应用程序。 在下一篇文章中 ，通过创建音乐应用程序的演示组件，我们将变得更加出色。

翻译自: https://scotch.io/tutorials/build-a-music-player-with-angular-2-electron-i-setup-basics-concepts

angular构建项目