Angular6项目构建

2019-05-28 16:45:58 浏览数 (1)

安装和启动项目

代码语言:javascript复制
npm install -g @angular/cli
ng new firstProject --sass
cd firstProject
ng serve --open 0

在项目中应用jquery

代码语言:javascript复制
npm install --save jquery

在ts文件中引入jquery

代码语言:javascript复制
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));

引入jquery类型 为了让vs code编辑器能自动识别jquery代码

代码语言:javascript复制
npm install --save @types/jquery

安装bootstrap控件

代码语言:javascript复制
npm install --save @ng-bootstrap/ng-bootstrap

在app.module.ts中添加红色框里的内容

在工程里的/src/assets下添加一个bootstrap/bootstrap.min.css,如图

最后在工程里的style.css文件 下 ,添加这句代码

代码语言:javascript复制
@import "assets/bootstrap/bootstrap.min.css";

然后具体实用的bootstrap组件可以按需引入 ,参考文档 https://ng-bootstrap.github.io

页面能跑ng-bootstrap控件的前提是项目中要添加FormsModule,方法如下

ng 命令

代码语言:javascript复制
ng generate component mycomponent  #创建一个组件
ng generate service myservice --module=app #创建一个服务
ng genertate module app-routing --flat --module=app  #创建一个路由

0 人点赞