Skip to content

Commit b70474c

Browse files
mariuszmmariuszm
committed
feat(build): replaced UI Bootstrap with Angular Material
1 parent fe465a3 commit b70474c

15 files changed

Lines changed: 85 additions & 109 deletions

File tree

‎.bootstraprc‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"babel-core": "^6.22.1",
2424
"babel-loader": "^6.2.10",
2525
"babel-plugin-__coverage__": "^11.0.0",
26-
"bootstrap-loader": "2.0.0-beta.15",
2726
"clean-webpack-plugin": "^0.1.14",
2827
"css-loader": "^0.26.0",
2928
"eslint": "^3.10.2",
@@ -60,9 +59,9 @@
6059
"dependencies": {
6160
"angular": "^1.5.8",
6261
"angular-mocks": "^1.5.8",
63-
"angular-ui-bootstrap": "^2.2.0",
6462
"angular-ui-router": "^1.0.0-beta.3",
65-
"bootstrap": "^4.0.0-alpha.5",
66-
"jquery": "^3.1.1"
63+
"angular-animate": "^1.6.1",
64+
"angular-aria": "^1.6.1",
65+
"angular-material": "^1.1.3"
6766
}
6867
}

‎src/app/common/nav/nav.controller.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
class AppNavController {
22
/* @ngInject */
3-
constructor (conf) {
4-
this.conf = conf;
3+
constructor ($transitions) {
4+
this.$transitions = $transitions;
5+
}
56

6-
console.time('App init');
7+
$onInit () {
8+
this.transitionEnd = this.$transitions.onSuccess(null, ($transition$) => {
9+
this.currentNavItem = $transition$.$to().name;
10+
});
711
}
812

9-
$onInit () {}
1013
$postLink () {}
11-
$onDestroy () {}
14+
15+
$onDestroy () {
16+
this.transitionEnd();
17+
}
1218
}
1319

1420
export { AppNavController };

‎src/app/common/nav/nav.html‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
<nav class="navbar navbar-light bg-faded mb-1">
2-
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
3-
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
4-
<ul class="nav navbar-nav">
5-
<li class="nav-item" ui-sref-active="active">
6-
<a class="nav-link" ui-sref="home">Home</a>
7-
</li>
8-
<li class="nav-item" ui-sref-active="active">
9-
<a class="nav-link" ui-sref="about">About</a>
10-
</li>
11-
</ul>
12-
<span class="navbar-brand float-lg-right" ng-bind="$ctrl.conf.appName + ' ' + $ctrl.conf.appVersion"></span>
13-
</div>
14-
</nav>
1+
<md-nav-bar md-selected-nav-item="$ctrl.currentNavItem" nav-bar-aria-label="navigation links">
2+
<md-nav-item md-nav-sref="home" name="home">Home</md-nav-item>
3+
<md-nav-item md-nav-sref="about" name="about">About</md-nav-item>
4+
</md-nav-bar>

‎src/app/components/about/about.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
11
<section class="about">
22

3-
<div class="row-fluid">
4-
<h1>Why ng-devstack?</h1>
5-
<p>It's been a while since the first version of ng-devstack has arrived. Based on old ecosystem (including gulp, ES5, etc.) it wouldn't survive long in today's world of dynamically changing front-end technologies.<br />This is the time to introduce <strong>major upgrade</strong>, which incorporates most recent techniques and best practices.<br />Hopefully, it will make the switch to Angular 2 less painfull.</p>
6-
<p>Anyone searching for old version of ng-devstack, it is <a href="https://github.com/mariuszm/ng-devstack/tree/0.4.0">here</a>.</p>
7-
</div>
3+
<h2 class="about-header md-display-1">Why ng-devstack?</h2>
4+
<p>It's been a while since the first version of ng-devstack has arrived. Based on old ecosystem (including gulp, ES5, etc.) it wouldn't survive long in today's world of dynamically changing front-end technologies.<br />This is the time to introduce <strong>major upgrade</strong>, which incorporates most recent techniques and best practices.<br />Hopefully, it will make the switch to Angular 2 less painfull.</p>
5+
<p>Anyone searching for old version of ng-devstack, it is <a href="https://github.com/mariuszm/ng-devstack/tree/0.4.0">here</a>.</p>
86

9-
<div class="row-fluid">
10-
<h1>Features</h1>
11-
<ul>
12-
<li>new Angular 1.5 component architecture,</li>
13-
<li>support for ES6 with <a href="https://babeljs.io/">Babel 6</a>,</li>
14-
<li>integration with <a href="https://webpack.github.io/">webpack 2</a>, allowing to use its' best features:
15-
<ul>
16-
<li>local webserver with live reload,</li>
17-
<li>Hot Module Reloading, tries to reload just the component that's changed, instead of the entire page),</li>
18-
<li>support for styles/scripts source maps,</li>
19-
<li>JS/CSS/HTML minification,</li>
20-
</ul>
21-
</li>
22-
<li>unit testing with <a href="http://karma-runner.github.io/">Karma</a>,</li>
23-
<li>support for SASS (including <a href="https://v4-alpha.getbootstrap.com/">Twitter Bootstrap 4</a>),</li>
24-
<li>support for CSS <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>,</li>
25-
<li>support for <a href="http://eslint.org/">ESLint</a>,</li>
7+
<h2 class="about-header md-display-1">Features</h2>
8+
<ul>
9+
<li>new Angular 1.5 component architecture,</li>
10+
<li>support for ES6 with <a href="https://babeljs.io/">Babel 6</a>,</li>
11+
<li>integration with <a href="https://webpack.github.io/">webpack 2</a>, allowing to use its' best features:
12+
<ul>
13+
<li>local webserver with live reload,</li>
14+
<li>Hot Module Reloading, tries to reload just the component that's changed, instead of the entire page),</li>
15+
<li>tree-shaking, excluding unused bundles from exports with webpack 2 and Babel 6</li>
16+
<li>support for styles/scripts source maps,</li>
2617
<li>JS/CSS/HTML minification,</li>
27-
<li><code>html5Mode</code> support (see <a href="https://github.com/mariuszm/ng-devstack#additional-info">Additional Info</a> for details),</li>
28-
<li>integration with <a href="https://ui-router.github.io/ng1/">UI Router 1.0</a> &amp; <a href="http://angular-ui.github.io/bootstrap/">UI Bootstrap</a>.</li>
29-
</ul>
30-
</div>
18+
</ul>
19+
</li>
20+
<li>support for SASS (processed with <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>),</li>
21+
<li>support for <a href="http://eslint.org/">ESLint</a>,</li>
22+
<li>unit testing with <a href="http://karma-runner.github.io/">Karma</a>,</li>
23+
<li>integration with <a href="https://ui-router.github.io/ng1/">UI Router 1.0</a> &amp; <a href="https://material.angularjs.org/">Angular Material</a>.</li>
24+
</ul>
3125

32-
<div class="row-fluid mt-3">
33-
<p>For more information please visit project's <a href="https://github.com/mariuszm/ng-devstack">GitHub</a>.</p>
34-
</div>
26+
<p>For more information please visit project's <a href="https://github.com/mariuszm/ng-devstack">GitHub</a>.</p>
3527

3628
</section>

‎src/app/components/about/about.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
.about {
22
line-height: 1.6;
3+
4+
&-header {
5+
margin-bottom: 0;
6+
7+
&:first-child {
8+
margin-top: 0;
9+
}
10+
}
311
}

‎src/app/components/home/home.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<section class="home">
2-
<div class="jumbotron">
3-
<h1 class="display-3">This is ng-devstack!</h1>
4-
<p class="lead">Everything a front-end developer needs to simplify building AngularJS applications.</p>
5-
<br />
6-
<p>
7-
<a class="btn btn-primary btn-lg" role="button" href="https://github.com/mariuszm/ng-devstack">Download</a>
8-
</p>
9-
</div>
2+
<h2 class="md-display-3">This is ng-devstack!</h2>
3+
<p class="md-headline">Everything a front-end developer needs to simplify building AngularJS applications.</p>
4+
<br />
5+
<p>
6+
<md-button class="md-raised md-primary" ng-href="https://github.com/mariuszm/ng-devstack">Download</md-button>
7+
</p>
108
</section>

‎src/app/components/home/home.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
.home {
2-
.jumbotron {
3-
text-align: center;
4-
}
2+
text-align: center;
53
}

‎src/app/root.controller.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
class RootController {
22
/* @ngInject */
3-
constructor ($transitions) {
3+
constructor (conf, $transitions) {
4+
this.conf = conf;
45
this.$transitions = $transitions;
56

67
console.time('App init');

‎src/app/root.html‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
<div class="container">
2-
<div class="row">
3-
<div class="col-md-10 offset-md-1">
4-
<app-nav></app-nav>
5-
<div ui-view></div>
6-
</div>
7-
</div>
1+
<div layout="column" layout-align="center center">
2+
3+
<md-toolbar>
4+
<div class="md-toolbar-tools">
5+
<h2 flex ng-bind="::($ctrl.conf.appName + ' ' + $ctrl.conf.appVersion)"></h2>
6+
</div>
7+
</md-toolbar>
8+
9+
<div class="layout md-whiteframe-z1" layout-md="column">
10+
<app-nav></app-nav>
11+
<div ui-view class="md-padding layout-content"></div>
12+
</div>
13+
814
</div>

0 commit comments

Comments
 (0)