Skip to content

Commit 0631119

Browse files
Moiz KachwalaMoiz Kachwala
Moiz Kachwala
authored and
Moiz Kachwala
committed
Added bootstrap support
1 parent 2c10b47 commit 0631119

File tree

4 files changed

+78
-42
lines changed

4 files changed

+78
-42
lines changed

‎client/app/app.html‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
1-
<h1>{{title}}</h1>
2-
<nav>
3-
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
4-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
5-
</nav>
6-
<router-outlet></router-outlet>
1+
<header class="site-header" role="banner">
2+
<div class="navbar-wrapper">
3+
<nav class="navbar navbar-inverse" role="navigation">
4+
<div class="container">
5+
<div class="navbar-header">
6+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
7+
<span class="sr-only">Toggle navigation</span>
8+
<span class="icon-bar"></span>
9+
<span class="icon-bar"></span>
10+
<span class="icon-bar"></span>
11+
</button>
12+
</div>
13+
<div class="navbar-collapse collapse">
14+
<ul class="nav navbar-nav navbar-right">
15+
<li class="active"> <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
16+
</li>
17+
<li class="active"><a routerLink="/heroes" routerLinkActive="active">Heroes</a></li>
18+
</ul>
19+
</div>
20+
</div>
21+
</nav>
22+
</div>
23+
</header>
24+
<div class="container">
25+
<h1>{{title}}</h1>
26+
<router-outlet></router-outlet>
27+
</div>

‎client/index.html‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
<html>
2-
<head>
3-
<script>document.write('<base href="' + document.location + '" />');</script>
4-
<title>Angular 2 QuickStart</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" href="styles.css">
8-
9-
<!-- 1. Load libraries -->
10-
<!-- Polyfill(s) for older browsers -->
11-
<script src="libs/core-js/client/shim.min.js"></script>
12-
<script src="libs/zone.js/dist/zone.js"></script>
13-
<script src="libs/reflect-metadata/Reflect.js"></script>
14-
<script src="libs/systemjs/dist/system.src.js"></script>
152

16-
<!-- 2. Configure SystemJS -->
17-
<script src="systemjs.config.js"></script>
18-
<script>
3+
<head>
4+
<script>document.write('<base href="' + document.location + '" />');</script>
5+
<title>Angular 2 QuickStart</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css">
10+
11+
<!-- 1. Load libraries -->
12+
<!-- Polyfill(s) for older browsers -->
13+
<script src="libs/core-js/client/shim.min.js"></script>
14+
<script src="libs/zone.js/dist/zone.js"></script>
15+
<script src="libs/reflect-metadata/Reflect.js"></script>
16+
<script src="libs/systemjs/dist/system.src.js"></script>
17+
18+
<!-- 2. Configure SystemJS -->
19+
<script src="systemjs.config.js"></script>
20+
<script>
1921
System.import('app').catch(function(err){ console.error(err); });
2022
</script>
21-
</head>
23+
</head>
24+
25+
<!-- 3. Display the application -->
2226

23-
<!-- 3. Display the application -->
24-
<body>
27+
<body>
2528
<my-app>Loading...</my-app>
26-
</body>
27-
28-
</html>
29+
</body>
30+
</html>

‎client/systemjs.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ var isPublic = typeof window != "undefined";
55
var map = {
66
'app': 'app', // 'dist',
77
'@angular': (isPublic)? '@angular' : 'node_modules/@angular',
8-
'rxjs': (isPublic)? 'rxjs' : 'node_modules/rxjs',
8+
'rxjs': (isPublic)? 'rxjs' : 'node_modules/rxjs'
99
};
1010
// packages tells the System loader how to load when no filename and/or no extension
1111
var packages = {
@@ -22,7 +22,7 @@ var isPublic = typeof window != "undefined";
2222
'platform-browser-dynamic',
2323
'router',
2424
'router-deprecated',
25-
'upgrade',
25+
'upgrade'
2626
];
2727
// Individual files (~300 requests):
2828
function packIndex(pkgName) {

‎gulpfile.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ gulp.task('build:server', function () {
3636
.pipe(gulp.dest('dist/server'))
3737
});
3838

39-
gulp.task('build:client', function(){
39+
gulp.task('build:client', function () {
4040
var tsProject = tsc.createProject('client/tsconfig.json');
4141
var tsResult = gulp.src('client/**/*.ts')
4242
.pipe(sourcemaps.init())
@@ -72,7 +72,7 @@ gulp.task("compile", ["tslint"], () => {
7272
* Copy all resources that are not TypeScript files into build directory. e.g. index.html, css, images
7373
*/
7474
gulp.task("clientResources", () => {
75-
return gulp.src(["client/**/*", "!**/*.ts","!client/typings", "!client/typings/**","!client/*.json"])
75+
return gulp.src(["client/**/*", "!**/*.ts", "!client/typings", "!client/typings/**", "!client/*.json"])
7676
.pipe(gulp.dest("dist/client"));
7777
});
7878

@@ -89,20 +89,31 @@ gulp.task("serverResources", () => {
8989
*/
9090
gulp.task("libs", () => {
9191
return gulp.src([
92-
'core-js/client/shim.min.js',
92+
'core-js/client/**',
9393
'zone.js/dist/zone.js',
9494
'reflect-metadata/Reflect.js',
95+
'reflect-metadata/Reflect.js.map',
9596
'systemjs/dist/system.src.js'
96-
], {cwd: "node_modules/**"}) /* Glob required here. */
97+
], { cwd: "node_modules/**" }) /* Glob required here. */
9798
.pipe(gulp.dest("dist/client/libs"));
9899
});
99100

101+
/**
102+
* Copy all required libraries into build directory.
103+
*/
104+
gulp.task("css", () => {
105+
return gulp.src([
106+
'bootstrap/dist/**/**'
107+
], { cwd: "node_modules/**" }) /* Glob required here. */
108+
.pipe(gulp.dest("dist/client/css"));
109+
});
110+
100111

101112
/**
102113
* Install typings for server and client.
103114
*/
104-
gulp.task("installTypings",function(){
105-
var stream = gulp.src(["./server/typings.json","./client/typings.json"])
115+
gulp.task("installTypings", function () {
116+
var stream = gulp.src(["./server/typings.json", "./client/typings.json"])
106117
.pipe(gulpTypings(null)); //will install all typingsfiles in pipeline.
107118
return stream; // by returning stream gulp can listen to events from the stream and knows when it is finished.
108119
});
@@ -111,10 +122,12 @@ gulp.task("installTypings",function(){
111122
* Start the express server with nodemon
112123
*/
113124
gulp.task('start', function () {
114-
nodemon({ script: 'dist/server/bin/www'
125+
nodemon({
126+
script: 'dist/server/bin/www'
115127
, ext: 'html js'
116128
, ignore: ['ignored.js']
117-
, tasks: ['tslint'] })
129+
, tasks: ['tslint']
130+
})
118131
.on('restart', function () {
119132
console.log('restarted!')
120133
});
@@ -130,7 +143,7 @@ gulp.task('start', function () {
130143
*/
131144

132145
gulp.task("build", function (callback) {
133-
runSequence('clean', 'build:server', 'build:client', 'clientResources','serverResources', 'libs', callback);
146+
runSequence('clean', 'build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', callback);
134147
});
135148

136149
/**
@@ -158,9 +171,9 @@ gulp.task('watch', function () {
158171
*/
159172

160173
gulp.task("build", function (callback) {
161-
runSequence('clean', 'build:server', 'build:client', 'clientResources','serverResources', 'libs', callback);
174+
runSequence('clean', 'build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', callback);
162175
});
163176

164-
gulp.task('default', function() {
165-
runSequence( 'build:server', 'build:client', 'clientResources','serverResources', 'libs','watch','start');
177+
gulp.task('default', function () {
178+
runSequence('build:server', 'build:client', 'clientResources', 'serverResources', 'libs', 'css', 'watch', 'start');
166179
});

0 commit comments

Comments
 (0)