1.背景介绍
Angular组件的必备元素
1.组件元数据装饰器:@Component()
告诉angular如何处理TS类,里面包含多个属性,这些属性的值叫元数据,angular根据这些元数据来渲染组件并执行逻辑。
2.模板:Template。通过组件的模板来定义组件的外观, 渲染组件。一般在模板中使用angular的数据绑定语法来呈现控制器中的数据
3.控制器:Controller。控制器就是组件的TS类,被装饰器装饰,包含组件所有的属性和方法。模板展现控制器的数据,控制器处理模板上发生的事件。
2.知识剖析
首先创建一个组件:ng g component user
会自动在src/app目录下面创建user文件夹,里面有4个这个组件的文件:组件定义文件ts,css文件,html模板,自动化测试文件
查看ts文件,里面的selector有个配置:'app-user',在别的地方使用这个组件的时候,写上这个标签就能被渲染。
在angular-cli.json里面的prefix可以修改app前缀,换成自定义的名字或者去掉。
app.component.ts介绍
首先从angular核心模块里引入一个Component的装饰器
下面是组件元数据装饰器@component,所有的组件必须使用一个装饰器@Component来注解
最下面的的export class AppComponent是TS类,告诉app.component是一个组件。在TS中,我们用装饰器附加元数据到类上。元数据会告诉angular如何讲TS类处理成组件。
元数据
selector:这个组件可以通过app标签来调用,展示这个组件模板的内容。
templateUrl:定义组件的html文件为模板
styleUrls:组件的css文件
控制器下面有个属性叫title,这个属性的值会被展示到浏览器的页面中。
app.module.ts介绍
一个模块也是一个带着装饰器的TS类。最上边是一组import,引入模块需要的包,然后用@NgModule装饰器声明模块
在声明中,首先用declarations属性声明模块中有什么组件,指令,管道。其次,imports属性声明还需要什么模块,这里声明了三个angular框架提供的模块,当你引用这些模块后,你就可以使用这些模块提供的指令和服务providers:默认情况下是空的,用来声明模块中提供了什么服务
providers:默认情况下是空的,用来声明模块中提供了什么服务
bootstrap属性声明了模块的主组件是什么
3.常见问题
启动时加载了哪个页面?
启动时加载了哪些脚本?
这些脚本做了什么事?
4.解决方案
打开angular-cli.json
有一个叫“apps”这样的数组,数组中的对象有一个index属性和main属性。
默认情况下index属性指向src/index.html,它是启动时加载的页面。
main属性指向src/main.ts文件,它是启动时加载的脚本。
main.ts是整个应用的起点
开头我们要导入必要的库‘./polyfills.ts’,以便运行在老版本浏览器中
从浏览器模块中导入platformBrowserDynami方法,告诉angular使用哪个模块来启动整个应用
导入angular核心模块中提供的enableProdMode方法,用来关闭开发者模式
导入AppMoudle,也就是命令行工具生成的整个应用的主模块
最后调用bootstrapModule方法传入AppModule作为启动模块来启动应用
AppModule作为主模块会首先加载,然后分析AppModule需要依赖那些模块并加载这些模块,比如app.module.ts中BrowserModule模块,加载这个模块以后会分析这个模块还需要什么模块再去加载,依次类推,直道加载完所有所需的依赖。
加载完后会在index.html中寻找启动模块AppModule指定的主组件AppComponent对应的CSS选择器app-root,这时候会用app.component.html替换掉这个app标签。
在整个过程完成之前,页面会展示app标签中的内容,也就是“loading”这个字符串。
angular里component怎么使用全局的样式?
比如要加入bootstrap里面的css文件,
5.参考文献
大漠穷秋的博客:https://my.oschina.net/mumu/blog">https://my.oschina.net/mumu/blog
PPT:http://chowhengguang.oschina.io/demo/PPT9.html