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基本演示项目概述

赞 (6) 打赏

评论 0

评论前必须登录!

登陆 注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏