安装jQuery和Bootstrap
- 1、下载bootstrap
npm install jquery --save
npm install popper.js --save
npm install bootstrap@next --save
- 2、引入配置
打开angular-cli.json文件，添加配置下列项：
"scripts": [
"../node_modules/jquery/dist/jquery.slim.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
- 3，ng serve重新启动项目
添加组件
$ ng g component components/site-header //创建一个名称为app-side-header的组件
app.module.ts
幕后将发生以下事情
src/app/components/site-header 目录被创建
site-header 目录下会生成以下四个文件：
- CSS 样式文件，用于设置组件的样式
- HTML 模板文件，用于设置组件的模板
- TypeScript 文件，里面包含一个 SiteHeaderComponent 组件类和组件的元信息
- Spec 文件，包含组件相关的测试用例
SiteHeaderComponent 组件会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中。
组件其实是一个类，它定义了一系列方法和属性，并且把HTML模板封装起来。它的意义是，你可以把它当做一个独立的隔离的盒子,并利用其中的方法和属性进行盒子内部的操作，以及和外界的父组件、兄弟组件交互。
组件创建完成
至此，一个组件通过angular-cli 命令创建完成，后面我们将进一步学习完成路由，类的创建，指令的创建，模块的创建，测试，项目的构建等内容，详情及代码请移至github上查看，欢迎提出问题，也可以一并完成一个后台管理项目的常用组件集合，也请给个start，哈哈。
