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: '
navbar
' }) 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", (2) selctor:"[app-test]"
(3) selctor:".app-test"

你可能感兴趣的:(Angular)