十二、Angular开发准备

向右看齐 2022-05-11 10:46 202阅读 0赞

#                                                   Angular开发准备 #

### 1、安装第三方依赖包Jquery、BootStarp ###

npm install jquery --save
    
    npm install bootstrap --save

–save：表示将这个安装包记录到package.json中。

![在这里插入图片描述][70]

package.json:  
![在这里插入图片描述][70 1]

### 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

![在这里插入图片描述][70 2]

### 4、组件生成 ###

![在这里插入图片描述][70 3]

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

![在这里插入图片描述][70 4]

新src/app/app.module.ts文件：  
![在这里插入图片描述][70 5]

[70]: /images/20220505/1f3e9422482042b6b766cf0fc88eceb1.png
[70 1]: /images/20220505/4186b83bda6840bfb55c59b5fd1c5fc4.png
[70 2]: /images/20220505/78cbe33f225a4192b61ce7482b1e7b00.png
[70 3]: /images/20220505/6cb2d83ab74c48b78c892a89dd005aad.png
[70 4]: /images/20220505/525f862886fe421299830240dc64db88.png
[70 5]: /images/20220505/52563b159cd847f58948dfdf4d433727.png