一、在Angular项目中使用第三方类库,分三步:
1)下载安装jquery/bootstrap类库到项目的node_nodules目录中
在项目根目录执行安装命令,--save是将当前安装的库依赖配置写入package.json
识jquery/bootstrap的代码,自动提示,这样就可以在ts中调用js、bootstrap。
1)下载安装jquery/bootstrap类库到项目的node_nodules目录中
在项目根目录执行安装命令,--save是将当前安装的库依赖配置写入package.json
npm install jquery --save
npm install bootstrap --save
2)将这两个库引入到项目中,修改.angular-cli.json文件如下:
"apps": [
{
... ...
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
... ...
}
],
3)安装jquery/bootstrap的类型描述文件,目的是让typescript代码认
识jquery/bootstrap的代码,自动提示,这样就可以在ts中调用js、bootstrap。
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
二、创建组件
在项目根目录下执行ng g component 组件名,创建组件并更新app.module,将这些组件增加到decarations
ng g component navbar // 导航栏组件
ng g component footer // 底部信息
ng g component search // 搜索组件
ng g component carousel // 轮播图组件
ng g component product // 产品组件
ng g component stars // 星级评价组件