十二、Angular开发准备

版权声明：本文为博主原创文章，未经博主允许欢迎转载，请注明原文链接。一起交流，共同进步。 https://blog.csdn.net/newbie_907486852/article/details/83182180

                                                  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文件：