首页 > Web开发 > 详细

Angular+golang+postgres+docker实现web聊天+用户管理之Angular

时间:2020-03-07 18:30:18      阅读:80      评论:0      收藏:0      [点我收藏+]

一、博客分批


二、命令

1、创建项目

ng new myangularproject



第一个选择:是否添加路由,基本上所有项目都需要路由,输入 y

技术分享图片



第二个选择:选择样式,通常都是 scss

技术分享图片



运行这里的时候在安装依赖,会很慢,选择 ctrl+c 取消安装

技术分享图片



进入项目文件夹

cd myangularproject



cnpm inpm i 安装依赖( cnpm 是淘宝的镜像,速度会快很多,但是我不知道为什么用不了,所以这里还是用 npm i )

技术分享图片

安装完依赖后,项目的创建就完成了



2、运行项目

ng serve

显示运行成功后,浏览器输入 localhost:4200 即可访问

技术分享图片


3、创建组件

ng g component components/first


最后为目录,表示在 app 文件夹下新建 components 文件夹,并在 components 文件夹下创建名称为 first 的组件

技术分享图片

组件用于数据的展示


4、创建服务

ng g service services/myservice


最后为目录,表示在 app 文件夹下新建 services 文件夹,并在 services 文件夹下创建名称为 services 的服务

技术分享图片

服务用于获取数据


5、编辑成静态文件

ng build


在给定的输出路径下,将 Angular 应用编译到名为 dist 的输出目录中。必须从工作空间目录中执行。

技术分享图片
技术分享图片


三、路由跳转

技术分享图片


ts文件中使用路由,先引入再声明初始化

技术分享图片
技术分享图片


1、ts带参数跳转

技术分享图片


2、ts不带参跳转

技术分享图片


3、html跳转

技术分享图片


Angular+golang+postgres+docker实现web聊天+用户管理之Angular

原文:https://www.cnblogs.com/wasi-991017/p/12294864.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!