如何在Angular中构建一个完整的网页

最新版本的Angular通常被认为是一个来自企业方面的框架,通常享有业务线应用程序的公司。虽然Angular确实已经从一个框架演变为一个支持各种应用程序的平台,但是开发人员可以为他们的用户创建身临其境的体验。

这是关于如何在Angular中构建整版动画网站的系列文章的第一部分。我们将首先构建一个整页网站,然后在以下部分中对其进行动画处理。

在本教程中,我们将主要关注Angular部分,并放弃讨论与应用程序构造无直接关系的HTML和CSS部分。请下载源代码跟着走。

01.创建一个项目

有许多移动部件可用于非平凡的Web应用程序。您的应用程序有哪些依赖项?你打算怎么在本地运行?你打算怎么测试呢?你打算如何捆绑你的资产

值得庆幸的是,复杂的这些元素合成过程在视线之外被处理掉了@角/ CLI。在我们终端的一些命令中,我们可以使用功能齐全的Angular应用程序供我们使用。

使用CLI的第一步是安装它。为此,请使用以下命令:

npm install -g @ angular / cli

安装CLI后,从命令行我们可以导航到我们要安装项目的文件夹。从那里我们将运行新的用我们项目的名称。这将创建一个具有相同名称的文件夹,一旦项目完成,我们将导航到该文件夹。

光盘新的angular-animations-site cd angular-animations-site

就是这样!我们的Angular应用程序已准备好运行。您可以使用启动应用程序Npm开始要么服务。我更喜欢使用Npm开始因为它更传统,并使我能够添加额外的命令。然后,您可以导航到HTTP://本地主机:4200看到应用程序正在运行

The stock Angular CLI application running

库存Angular CLI应用程序正在运行

02.包括动画和角度材料

因为我们喜欢漂亮的东西,所以我们将通过添加和安装来为我们的应用程序做一些小的补充@角/动画@角/材料包:

npm i --save @ angular / material @ angular / animations

我们可以通过将它们添加到我们的角色来让Angular了解这些依赖关系App.module.ts文件。我们将使用Angular Material按钮,卡片和工具栏,因此我们将导入各自的模块以及BrowserAnimationsModule

// app / app.module.ts ...从'@ angular / material'导入{MdButtonModule,MdCardModule,MdToolbarModule};从'@ angular / platform-browser / animations'导入{BrowserAnimationsModule};

然后我们可以将它们添加到进口我们的阵列NgModule宣言。

// app / app.module.ts ...从'@ angular / material'导入{MdButtonModule,MdCardModule,MdToolbarModule};从'@ angular / platform-browser / animations'导入{BrowserAnimationsModule}; @NgModule({... imports:[... BrowserAnimationsModule,MdToolbarModule,MdButtonModule,MdCardModule],...})

最后,我们将把靛蓝粉色主题导入我们的Styles.css的文件。

/ * styles.css * / @import'~@angular/material/prebuilt-themes/indigo-pink.css';

到目前为止,我们完全专注于设置应用程序,以便我们可以开始开发。这些命令最初可能会让人觉得笨拙,但是一旦你习惯了这些命令,你会发现只需要几分钟的时间就可以拥有一个完全建立起来的环境,我们需要建立一个甜蜜的网站所需要的所有花里胡哨。

03.介绍页面组件

因为我们正在使用Angular构建一个网站,所以我们需要引入一种机制来显示我们的页面。在Angular中,应用程序的原子构建块是组件。通过使用定义良好的封装组件构建我们的应用程序,我们可以通过引入新组件轻松地重用功能,以及组合新功能。

CLI提供开箱即用的生成器支持,这就是我们用来创建页面组件的方法。我们可以通过运行下面的命令生成我们的页面组件(G命令是简写生成)。

Ng G组件页面

注意:我建议花时间学习如何手动构建主要的Angular片,直到你建立了你的肌肉记忆。只有当您真正了解正在发生的事情时,您才应该使用生成器优化工作流程。

CLI将生成一个文件夹SRC目录命名使用HTML,CSS和Typescript文件以及spec文件。在我们的Page.component.ts文件,我们有一个组件的基本结构。我们的组件引用了我们的模板和样式文件@零件元数据和我们的构造函数NgOnit方法潦倒。

// app / page / page.component.ts从'@ angular / core'导入{Component,OnInit}; @Component({selector:'app-page',templateUrl:'。/ page.component.html',styleUrls:['./ page.component.css']})导出类PageComponent实现OnInit {constructor(){} ngOnInit(){}}

除了生成我们的组件,CLI还将修改我们的组件App.module.ts包括一个PageComponent进入我们的声明阵列。这意味着我们的页面组件现在可用于整个模块。

// app / app.module.ts @NgModule({declarations:[AppComponent,PageComponent],...})

作为一个完整性检查,我们可以跳进我们的App.component.html文件和添加至底部。请注意,我们使用的元素标记对应于选择我们定义的财产@零件元数据。

{{标题}}

The page component rendering in our main application component

我们的主应用程序组件中的页面组件呈现

04.构建页面组件

随着我们的页面组件活得很好,我们可以构建它,使它看起来像一个真正的网页。我们将介绍一个对象标题字幕内容,和图片属性。

// app / page / page.component.ts导出类PageComponent实现OnInit {page = {title:'Home',副标题:'Welcome Home!',内容:'一些家庭内容。',图片:'assets / bg00。 jpg'}; constructor(){} ngOnInit(){}}

The styled page component with Angular Material

带有Angular Material的样式化页面组件

我们将更新我们的模板以绑定到宾语。有一个图像元素最终会被扩充以填满整个浏览器窗口。我们还将添加一个Angular Material卡组件,我们将绑定其余的组件反对。

{{页面标题}}

{{page.subtitle}}
{{page.content}}

我们的页面组件开始看起来好多了!我们的下一步是增加具有多个页面并在它们之间导航的能力。

第2页:如何创建多个页面



翻译字数超限