新建一个angular项目后,创建组件及配置路由

其实这些步骤angular官网上写的很详细,可以去官网看哦~

1. 创建一个新的angular项目
ng new appname --name appname
2. 创建路由配置文件
ng generate module app-routing --flat --module=app

生成的 app-routing.module.ts 和 app-routing.module.spec.ts 是与 app.module.ts 在同一目录下的,也就是都在app目录下

3. 新建组件
ng g c login

login是我要创建的组件的名字( angular的组件一定要用命令去创建,手动创建的是会报错还是无效来着
angular项目的组件都放在src下的app目录下,一个文件夹就代表一个组件,而每个文件夹里都可以嵌套多个文件夹,即嵌套多个组件
执行此命令后,会自动生成一个组件的文件,且 app.module.ts 中也会自动引入新建的组件

4. 路由配置01

在 app-routing.module.ts 文件中配置路由,实现组建的切换,页面的跳转
在这里插入图片描述
在引入组件之前,这三个文件是必须引入的,好像创建这个文件时会自动引入,我也忘记了,那个router如果没有自动引入就自己手动引入吧

— 接下来就要引入组件了 —
在这里插入图片描述
其实也可以从 app.module.ts 文件里直接复制过来,毕竟创建组件时就自动引入到 app.module.ts 里了,又在同一目录下,引入的路径也是一样的,可以直接拿过来用

5. 路由配置02

在这里插入图片描述
这一点angular官网上写得很清楚
引入组件之后就可以配置路由了,还是 app-routing.module.ts 文件中
看上边的图,,,第一条配置的是首页默认路径,也就是你在浏览器中打开项目时,默认显示的页面
redirectTo: ‘/loginManage’ ,表示指向登录页,/loginManage 是我的项目下登录页的路径,下边那一行就是配置的登录页路径

6. 路由配置03

在这里插入图片描述
之后,在@NgModule({ })中,按照图中那样写就可以了

7. 最后的最后

在这里插入图片描述
最后的最后,在html页面配置好跳转路径就可以了

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值