Angular 从零开始 1- 搭建项目到 组件写法

Angular 中文网:环境搭建
https://www.angular.cn/guide/setup-local
一、启动过程介绍

1.启动顺序：
main.ts 为入口
	=> app.module.ts
		=>app.component.ts
			=>app.component.html,app.component.css

2.Angular模块
每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。
   Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。
   	*区别与js模块
	*https://angular.cn/guide/architecture#模块

二、cli 通过npm创建组件,会自动帮你在文件夹创建好4个文件,且帮你在主文件app.module.ts引入 对应模块
ng g c test
ng g c test/child
三、默认为外部模板,外部样式, antd-angular 等组件库 官方案例为 内部样式.

	1. 模板 --不需要放置根标签，会自动加上根标签
		(1)外部模板

		@Component({
		  templateUrl: './navbar.component.html'
		})

		(2)内部模板
		@Component({
		  template: '<div>navbar</div>'
		})
	2. 样式
		(1)外部样式
		@Component({
		  	styleUrls: ['./app.component.css']
		})
		(2)内部样式
		@Component({
			styles:[`div{background:red}`]
		})
		(3)全局样式
		   - style.css
		   - 加上这个属性encapsulation:ViewEncapsulation.None //隔离包裹 设置成none


	3. selector支持的写法： 默认也是第一种样式
		(1) selctor:"app-test",  <app-test></app-test>
		(2) selctor:"[app-test]" <div app-test></div>
		(3) selctor:".app-test" <div class="app-test"></div>