Angular 5基本演示项目概述

介绍

这篇文章是Angular 5系列的延续，你可以在这里找到这个系列的第一部分。什么是新的以及如何设置我们的第一个Angular 5应用程序。所以，如果你还没有经历第一部分，我强烈建议你这样做。在我们的第一部分中，我们看到了Angular 5的更新以及如何在Angular 5中设置您的第一个应用程序。在这篇文章中，我们将讨论几个文件并给出一个应用程序概述。我们也将讨论组件，声明，模块，提供者等重点。所以在本文的最后，你将会对Angular项目结构有一些基本的了解，以及为什么它对于项目来说真的很重要。我希望你会喜欢这篇文章。

源代码

你可以在这里克隆或下载源代码:在线预览

背景

虽然Angular 5的项目架构与之前的版本完全相同，但我们将解释一些关键元素，以便初学者可以跟随这个系列。如果你是一位经验丰富的专业人员，我希望你不会介意。感谢您的理解。

了解角度应用程序

Angular项目有一个干净的架构，它包含如下图所示的文件夹结构。

Angular_App_Folder_Structure

我们将开始在我们的应用程序根文件夹的src / app文件夹中开发我们的应用程序。现在，让我们继续看看我们在现有的文件中有什么。让我们打开文件app.component.ts。

在Angular中，我们正在为每个选定的功能创建组件。我们做一个登录组件，一个用于注册，一个用于导航等，这样每个组件都可以单独维护。在每个组件中，我们有3个部分。

1. 1.Import section.
2. 2.Decoration.
3. 3.Export section.

导入部分帮助我们导入框架中可用的一些现有功能，比如我们如何在上面的代码片段中包含来自Angular / core的Component。

装饰是我们装饰组件的地方，给出了一个选择器（每个组件都是独一无二的），UI的样式，并给出模板的URL指向特定的HTML文件，我们在那里定制组件。我们也可以将我们的模板作为模板加入到我们的装饰中：’在这里您的自定义HTML’。

“导出”部分包含特定于该组件的自定义TypeScript代码。假设这是一个拥有自己功能的类。

现在，让我们将指针移动到app.module.ts，这是我们注册所有模块，组件，提供者等的地方。我们可以将其视为基类。像组件一样，它有一个导入和导出的部分。它也有一个  @NgModule 部分，其中包含我们的声明（组件），进口（模块），供应商（服务）。

我不会深入地讨论app.component.css，app.component.html，app.component.spec.ts，因为你可以看到里面的代码。所以我把这个留给你

如果您看到项目文件夹，则可以看到名为Environment的文件夹。顾名思义，它有助于我们为环境设置配置，例如开发和生产。

Index.html是我们称之为app-root的主页面; 记得我们将app.component的选择器设置为app-root？

请确保您在index.html文件中提供了<base href =“/”>，否则在Angular应用程序中会出现错误。

tsconfig.app.json文件是我们可以为我们的项目设置配置的地方，例如设置模块版本，编译器选项等。您可以看到如下的示例文件。

如果您使用Angular CLI创建了Angular应用程序，则会看到名为.angular- cli 的文件。json在你的项目中。这是您的所有自定义项目设置所在的文件。

最后但并非最不重要的是，  package.json是提及NPM软件包的文件，无论何时运行npm install命令，这都是命令查找的文件。

一旦包管理器完成运行安装命令，所有提到的包将被添加到文件夹node_modules。

未经允许不得转载：爱前端网 » Angular 5基本演示项目概述