前面把基本环境搭建好了并且也创建了基础项目，我们需要对目录结构进行一个大致了解，在此可以查看angular中文官网的详细介绍 https://angular.cn/guide/quickstart，其实只要大概过一遍就行，后面接触慢慢了解，官网虽然写更专业，但有时候感觉挺枯燥的，所以自己根据自己的理解和经验把angular相关的都写成笔记，目前来说angular的热度感觉一直下降，更多的前端开发者和企业都更关注于vue和react等其它前端开发技术栈。写angular笔记原因有三，一来怕长时间不用忘记，二来可以更加深入的了解angular，三来希望有更多的angular爱好者交流学习进步，个人觉得官方教程还是要多看，再结合网上分享的经验可以让自己更好的深入了解angular,后续自己的也会根据网上分享的angular技巧进行实践，然后根据自己的理解形成笔记分享出来。开发angular，个人喜欢使用VSCode工具 https://code.visualstudio.com/ 。
现在除了对基础项目的目录了解后，我们还需了解下angular-cli相关的快捷命令 https://www.npmjs.com/package/@angular/cli ，我们常用的也就几个，当然熟悉了，也可以自己手动创建，不需要命令也行，之前用过进入项目目录，命令行运行ng serve --open ,现在简单介绍下几个：
ng serve --host 0.0.0.0 --port 4201
这里没有加 --open，当然也可以后面加,但要手动浏览器输入地址，上面这命令是运行angular项目使用本地局域网ip（同等127.0.0.1），我的局域网ip 192.168.0.1,那么浏览器就要输入 http://192.168.0.101:4201/ 或者 http://127.0.0.1:4201/，如果不加 --port 4201,默认是是4200。每次都要这么运行岂不是很麻烦？其实创建的基础angular项目已经配置好了一些基本命令，打开package.json文件，有个 "start": "ng serve",我们也可以通过npm start来运行项目，为了方便，我们可以把此命令配置改成 "start": "ng serve --host 0.0.0.0 --port 4201 --open",我们还可以看看其它的，比如ng g component myheader,生成一个名叫myheader的组件，项目正在运行中，我们再vscode的工具新增一个命令行终端，之前是怎么运行的呢？打开vscode工具，快捷键ctrl + ~ ,命令行输入npm start，现在新增一个终端运行ng g component myheader
运行过后新增了myheader文件夹和相关文件
现在如何使用这个myheader组件呢？
这里的myheader组件已经在app.module.ts中声明了，如果自己手动创建的组件文件就要去app.module.ts中声明，再来看看selector:‘app-myheader‘，简单的可以认为相当于html的标签，声明以后可以任意地方的html文件中使用，当然这里只是简单打比方，现在把app.component.html的内容下加上<app-myheader></app-myheader>
码云：https://gitee.com/nicefree/angular/tree/master/ngtest
原文：https://www.cnblogs.com/freezyh/p/9339214.html