使用 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 将其嵌入，如下所示。

 <iframe src="link to your form" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">正在加载...</iframe>

预习：

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

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

导入模块和创建的组件

 从'导入 { NgModule }[ @角/核心](https://twitter.com/angular/core) ';  
 从'导入 { CommonModule }[ @角/常见](https://twitter.com/angular/common) ';  
 从'导入{RouterModule，路由}[ @角/路由器](https://twitter.com/angular/router) ';  
 从'./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/](https://github.com/bharat-chandra/bharat-chandra.github.io/)  
 $光盘[ b](https://github.com/bharat-chandra/bharat-chandra.github.io/) 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