angular5 bootstrap4 快速整合nav实例

步骤1. 设置开发环境

• 如果你的机器上还没有Node.js和npm，请先安装它们。

• 然后全局安装 Angular CLI 。

    npm install -g @angular/cli

步骤2. 创建新项目

• 打开终端窗口。

• 运行下列命令来生成一个新项目以及应用的骨架代码:

    ng new my-app

步骤3. 启动开发服务器

    cd my-app
    ng serve --open

• 打开浏览器localhost:4200 启动应用将会看到:
  

步骤4. 安装bootstrap4相关的包

    npm install bootstrap@4.0.0-beta.2 popper.js jquery --save

步骤5. bootstrap4 nav实例

• 终端运行 ng g c components/common/nav 生成nav组件

  

• angular路由配置 app.module.ts

  

• 修改app.component.html为

  

• 浏览器输入http://localhost:4200/nav

  

• 打开bootstrap4官网的starter template

• https://v4.bootcss.com/docs/4.0/examples/starter-template/

• 查看网页源代码 复制nav标签里面的内容粘贴到 nav.component.html

  

• 配置js和css的路径 angular-cli.json

  

• 重启服务

  

• github链接 github

• Compiled!