angular-cli 添加组件功能到应用

安装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，哈哈。