Angular开发准备2

Angular开发准备2

• • 在Angular中引入第三方库
  • 开发思路
  • 自动生成Angular组件

在Angular中引入第三方库

• 将第三方库安装到本地（angular项目目录下）

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

  在package.json中会自动添加

• 将第三方库引入到angular-cli.json中

  • 在app>styles>[“styles.css”,"…/node_modules/bootstrap/dist/css/bootstrap.css"]

  • 在apps>scripts>["…/node_modules/jquery/dist/jquery.js","…/node_modules/bootstrap/dist/js/bootstrap.js"]

• 安装typescript类型描述文件，是typescript代码中可以使用jquery,bootstrap

  • npm install @types/jquery --save-dev
  • npm install @types/bootstrap --save-dev

• 可以在AppModule中使用jquery

  export class AppModule {
    
       test(){
    
       	$("#app-root").show();  
    			
      	}
    
     }

开发思路

Angular的特性是方便开发可重用组件。将要开发程序的主页面划分成组件

Component组件是整个框架的核心，也是终极目标。“组件化”的意义：

1.分治 把逻辑封装在组件内部

2.复用 可以让组件跨项目复用

在angular中，组件就是一个类（构造函数的另一种写法）

自动生成Angular组件

Angular命令行工具提供了自动生成组件的功能

• 在项目目录下生成组件

• ng g component navbar

  执行上面的命令可以生成四个文件ts,html,css;更新app.module.ts文件.

问题:框架整合问题

描述：从angular13使用原生bootstrap3.3.7模板样式无效且不会报错！从angular7以后再用原生bootstrap就不行了，只要一编译就不能用编译不会报错！只能在页面调用index.html或者用ng-bootstrap

方法：可以在项目style.css中直接引入bootstrap.css

@import "~bootstrap/dist/css/bootstrap.css";