Angular开发准备2
在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";