Being highly
experienced Java architect-cum-programmer, having just fundamental knowledge of
front-end technologies (i.e. HTML, CSS, JavaScript, jQuery, Jasmine, Bower,
Grunt, Node.js, etc.), arbitrarily I thought to get my hands dirty with Angular
(so called Angular 2.0 at present) and Bootstrap @ https://github.com/tirthalpatel/Learning-FET/tree/master/gs-angular/gs-angular2-app.
After going through Angular Architecture Overview, I thought to
give it a try with Bootstrap CSS. So I decided to take "angular2-seed" project
and start from there. This decision really enabled me to play with few Angular
syntax and fundamentals quickly. However, a real struggle started, when it came
to incorporate Bootstrap CSS into the project. Firstly, I just added bootstrap
css {<link href="css/bootstrap.min.css" rel="stylesheet"
media="screen">} in index.html as per traditional approach and it
didn't work. After spending few hours, I
could realize Angular 2 seed project uses Webpack. Then,
google helped me to find how to use Bootstrap (CSS only) and Webpack! Finally, I could incorporate
Bootstrap CSS in Angular 2 seed project with further trail-and-error approach
as per below steps.
(1) package.json: added bootstrap,
babel-core, babel-loader, css-loader, file-loader, style-loader and url-loader
dependencies
(2) webpack.config.js: added loaders
configuration in module of webpackConfig
(3) app.ts: imported bootstrap.css
A POC project of Angular 2 +
Webpack + Bootstrap CSS
Source code @ https://github.com/tirthalpatel/Learning-FET/tree/master/gs-angular/angular2-webpack-bootstrap
A demo project for getting
started with Angular 2 and trying its numerous features
Refer README file
for instructions of running Angular app.
No comments:
Post a Comment