12

Configure Bootstrap with Angular 2, Webpack and Spring – Tutorial

 4 years ago
source link: https://marco.dev/2017/02/06/configure-bootstrap-with-angular-2-webpack-and-spring-tutorial/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

java-version.com: What's new in Java 16? 15? Keep up to date!

Configure Bootstrap with Angular 2, Webpack and Spring – Tutorial

I update the reference Angular/Java application for this blog (https://angular.cafe) adding Bootstrap.

The new homepage is now like this:

home-1.png?resize=479%2C265

The data comes from an H2 database deployed with the application.

To use Bootstrap this step are required:

in package.json add the dependency to bootstrap

"bootstrap": "3.3.7",
"jquery": "3.1.1"

or import it with npm install bootstrap@3 -save

and npm install jquery -save

I didn’t import Bootstrap 4 because is still in alpha version.

We have to tell to webpackage to import the files in the distribution package. In vendor.ts add:

// bootstrap 
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

in webpack.common.js I added the ‘synonyms’ of jquery:

new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})

I created a menu component that contains the bootstrap tags:

You can see the content here: home.html

code.png?resize=945%2C322

The component menu.component.ts is self explanatory:


import {Component} from "@angular/core";

@Component({
    selector : 'bootstrap-menu',
    templateUrl :'../html/menu.html'
})
export class MenuComponent {
constructor(){
}}

To reuse the same menu in every page I call the menu component from the app.component.ts that is the main component of the module:


    @Component({
    selector: 'my-app',
    template: `<bootstrap-menu></bootstrap-menu>
       <router-outlet></router-outlet>
    `,
    providers: [HttpModule, ConstantsService, Location]
    })

the template calls the bootstrap menu followed by the component called by the router.

In the developer console you can see the data sent by the server:

chrome-1-e1486333521414.png?resize=900%2C389

Author

Marco Molteni

Marco Molteni Blog


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK