Angular开发准备
1、安装第三方依赖包Jquery、BootStarp
npm install jquery --save
npm install bootstrap --save
–save:表示将这个安装包记录到package.json中。
package.json:
2、angular.json中引入第三库(类似pom.xml)
angular.json:
...
"options": {
"outputPath": "dist/auction",
"index": "src/index.html", //项目启动时显示的页面
"main": "src/main.ts", //显示页面加载的脚本
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [ //第三方css
"src/styles.css"
],
"scripts": [] //第三方依赖库
},
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
3、安装类型定义文件
在TypeScript中使用类型定义文件,帮助开发者在TypeScript中使用已有的JS工具包,比如JQuery。
npm install @types/bootstrap --save-dev
npm install @types/jquery --save-dev
4、组件生成
ng g component carousel
ng g component footer
ng g component navbar
ng g component product
ng g component search
ng g component stars
生成四个文件,更新src/app/app.module.ts文件
新src/app/app.module.ts文件: