使用 angular13 的个人投资组合

使用 angular13 的个人投资组合

下载 Node.js

下载 | Node.js (nodejs.org)

1. 安装 Angular 并设置你的新应用

>npm 安装 @angular/cli
> 新的 myApp
//在提示时选择路由“yes”和样式“css”
> of s --open

参考 Angular——设置本地环境和工作区

或者

手表 如何在 Windows 10 中安装 Angular CLI | Angular CLI 创建和部署应用程序 | Edureka-YouTube

2.添加bootstrap等依赖

编辑“我的应用” /src/index.html” 在您项目的根文件夹中，如下所示

3.添加导航栏

编辑 “src/app/app.component.html”

预习 ：

3. 创建主页

在项目根文件夹中打开命令提示符并键入以下命令以生成 家庭组件

我的应用程序 > gc首页

然后转到“src/app/home/”并编辑“home.component.html”，看起来像 <p>在家工作！</p> 以您希望页面的样子。

4. 创建技能页面

在项目根文件夹中打开命令提示符并键入以下命令以生成 技能组件

我的应用程序 > gc技能

然后转到“src/app/skills/”并编辑“skills.component.html”，看起来像 <p>技能有效！</p> 以您希望页面的样子。

5.对“项目”和“联系”页面也继续相同的过程

我的应用程序 > 气相色谱项目
我的应用程序 > gc联系方式

专家提示： 对于联系表格，请免费创建一个谷歌表格并使用 iframe 将其嵌入，如下所示。

预习：

通过这种方式，我们可以避免使用后端代码或一些付费服务。

6.（重要）在“app-routing.module.ts”文件中添加路由

导入模块和创建的组件

从'导入 { NgModule } @角/核心 ';
从'导入 { CommonModule } @角/常见 ';
从'导入{RouterModule，路由} @角/路由器 ';
从'./home/home.component'导入{ HomeComponent }；
从'./skills/skills.component'导入{ SkillsComponent }；
从'./portfolio/portfolio.component'导入{ PortfolioComponent }；
从'./contact/contact.component'导入{ContactComponent}；

为每个组件指定路由

常量路线：路线= [
{ path: '', redirectTo: 'home', pathMatch: 'full'}, //默认
{ path: 'home', component: HomeComponent }, //主页
{ path: 'skills', component: SkillsComponent }, //技能页面
{ path: 'portfolio', component: PortfolioComponent }, //portfolio 页面
{ path: 'contact', component: ContactComponent }, //联系页面
{ path: '**', redirectTo: 'home' } //页面为不存在的路由渲染
];

导入包和导出模块

@NgModule({
进口：[RouterModule.forRoot(routes)]，
出口：[路由器模块]
})
导出类 AppRoutingModule { }

R 引用

您可以通过克隆我的仓库并根据您的要求进行更改来使用我的模板

$ 混帐克隆 https://github.com/bharat-chandra/bharat-chandra.github.io/
$光盘 b harat-chandra.github.io
$ npm 安装
$ of s --open

回购链接：

[

GitHub — bharat-chandra/bharat-chandra.github.io

该项目是使用 Angular CLI 版本 13.1.3 生成的。为开发服务器运行 ng serve。导航…

github.com

](https://github.com/bharat-chandra/bharat-chandra.github.io/)

在社交网络上与我联系
✅ 网站： bharat-chandra.github.io
✅ 领英： linkedin.com/in/bc87
✅ GitHub： github.com/bharat-chandra

关注我即将发布的帖子，让我们在下一个教程中学习如何免费部署您的应用程序（即将推出）......

喜欢……分享……评论……关注

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12516/51000412