Skip to content

Commit 41403d1

Browse files
craigshoemakercraigshoemaker
committed
Added template engine to samples
Added a grunt task to take partial HTML files and merge them with a template file to create the full sample files. This allows us to maintain the layout of the samples in one place. During development run 'grunt watch' to have samples automatically rebuilt.
1 parent 9e6c11a commit 41403d1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+38159
-466
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ <h2>Samples</h2>
138138
igGrid <span class="caret"></span>
139139
</button>
140140
<ul class="dropdown-menu" role="menu">
141-
<li><a href="samples/igGrid.html">Basic</a></li>
141+
<li><a href="samples/igGrid.html">Markup</a></li>
142142
<li><a href="samples/igGrid-controller.html">Controller Options</a></li>
143143
<li><a href="samples/grid/master-detail/index.html">Master/Detail</a></li>
144144
</ul>

‎samples/grid/master-detail/index.html‎

Lines changed: 140 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,48 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Master Detail</title>
4+
<title>igGrid: Master/Detail - Ignite UI Grid integration with AngularJS</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
7+
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
88
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
9-
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.grid.css" rel="stylesheet" />
10-
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.editors.css" rel="stylesheet" />
119
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
12-
<link rel="stylesheet" href="../../../css/infragistics.theme.css" type="text/css" />
1310
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
14-
<style>
15-
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
16-
display: none !important;
17-
}
18-
</style>
11+
<link rel="stylesheet" href="/igniteui-angular/samples/sample.css" />
12+
13+
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.grid.css" rel="stylesheet" />
14+
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.editors.css" rel="stylesheet" />
15+
<style>
16+
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
17+
display: none !important;
18+
}
19+
</style>
20+
1921
</head>
20-
<body class="container" ng-app="app" ng-controller="masterDetailController">
21-
<h1>igGrid Master/Detail</h1>
22+
<body class="container">
23+
24+
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
25+
<div class="container">
26+
<div class="navbar-header">
27+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
28+
<span class="sr-only">Toggle navigation</span>
29+
<span class="icon-bar"></span>
30+
<span class="icon-bar"></span>
31+
<span class="icon-bar"></span>
32+
</button>
33+
<a class="navbar-brand" href="/">Ignite UI AngularJS Directives <span class="badge alert-info">Preview</span></a>
34+
</div>
35+
<div class="navbar-collapse collapse">
36+
<ul class="nav navbar-nav">
37+
<li><a href="/igniteui-angular/index.html">Home</a></li>
38+
<li><a href="https://github.com/IgniteUI/igniteui-angular">View on GitHub <i class="fa fa-github"></i></a></li>
39+
</ul>
40+
</div>
41+
</div>
42+
</div>
43+
44+
<div ng-app="app" ng-controller="masterDetailController">
45+
<h1 class="push-down-md">igGrid Master/Detail</h1>
2246
<div class="alert alert-danger" data-ng-cloak data-ng-show="error != null">Oops! There's been a problem: {{error}}</div>
2347
<div class="alert alert-info" data-ng-cloak data-ng-show="message.length > 0" data-ng-bind="message"></div>
2448
<ig-grid id="homesGrid"
@@ -47,106 +71,118 @@ <h1>igGrid Master/Detail</h1>
4771
</features>
4872
</ig-grid>
4973
<hr>
50-
<div class="well col-sm-8" data-ng-cloak data-ng-show="selectedHome != null">
51-
52-
<form class="form-horizontal" role="form">
53-
<div class="form-group">
54-
<label for="inputEmail3" class="col-sm-2 control-label">Address</label>
55-
<div class="col-sm-10">
56-
<input id="addressBox"
57-
type="text"
58-
class="form-control"
59-
placeholder="Address"
60-
data-ng-model="selectedHome.streetAddress" />
61-
</div>
62-
</div>
63-
<div class="form-group">
64-
<label for="cityBox" class="col-sm-2 control-label">City</label>
65-
<div class="col-sm-10">
66-
<input id="cityBox"
67-
type="text"
68-
class="form-control"
69-
placeholder="City"
70-
data-ng-model="selectedHome.city" />
71-
</div>
72-
</div>
73-
<div class="form-group">
74-
<label for="bedroomsBox" class="col-sm-2 control-label">Bedrooms</label>
75-
<div class="col-sm-10">
76-
<input id="bedroomsBox"
77-
type="text"
78-
class="form-control"
79-
placeholder="Bedrooms"
80-
data-ng-model="selectedHome.bedrooms" />
81-
</div>
82-
</div>
83-
<div class="form-group">
84-
<label for="bathroomsBox" class="col-sm-2 control-label">Bathrooms</label>
85-
<div class="col-sm-10">
86-
<input id="bathroomsBox"
87-
type="text"
88-
class="form-control"
89-
placeholder="Bathrooms"
90-
data-ng-model="selectedHome.bathrooms" />
91-
</div>
92-
</div>
93-
<div class="form-group">
94-
<label for="sqfeetBox" class="col-sm-2 control-label">Sq. Feet</label>
95-
<div class="col-sm-10">
96-
<input id="sqfeetBox"
97-
type="text"
98-
class="form-control"
99-
placeholder="Sq. Feet"
100-
data-ng-model="selectedHome.squareFeet" />
74+
<div class="row">
75+
<div class="well col-sm-8" data-ng-cloak data-ng-show="selectedHome != null">
76+
77+
<form class="form-horizontal" role="form">
78+
<div class="form-group">
79+
<label for="inputEmail3" class="col-sm-2 control-label">Address</label>
80+
<div class="col-sm-10">
81+
<input id="addressBox"
82+
type="text"
83+
class="form-control"
84+
placeholder="Address"
85+
data-ng-model="selectedHome.streetAddress" />
86+
</div>
10187
</div>
102-
</div>
103-
<div class="form-group">
104-
<label for="priceBox" class="col-sm-2 control-label">Price</label>
105-
<div class="col-sm-10">
106-
<input id="priceBox"
107-
type="text"
108-
class="form-control"
109-
placeholder="Price"
110-
data-ng-model="selectedHome.price" />
88+
<div class="form-group">
89+
<label for="cityBox" class="col-sm-2 control-label">City</label>
90+
<div class="col-sm-10">
91+
<input id="cityBox"
92+
type="text"
93+
class="form-control"
94+
placeholder="City"
95+
data-ng-model="selectedHome.city" />
96+
</div>
11197
</div>
112-
</div>
113-
<div class="form-group">
114-
<label for="notesBox" class="col-sm-2 control-label">Notes</label>
115-
<div class="col-sm-10">
116-
<textarea id="notesBox"
117-
class="form-control"
118-
placeholder="Notes"
119-
data-ng-model="selectedHome.notes"></textarea>
98+
<div class="form-group">
99+
<label for="bedroomsBox" class="col-sm-2 control-label">Bedrooms</label>
100+
<div class="col-sm-10">
101+
<input id="bedroomsBox"
102+
type="text"
103+
class="form-control"
104+
placeholder="Bedrooms"
105+
data-ng-model="selectedHome.bedrooms" />
106+
</div>
107+
</div>
108+
<div class="form-group">
109+
<label for="bathroomsBox" class="col-sm-2 control-label">Bathrooms</label>
110+
<div class="col-sm-10">
111+
<input id="bathroomsBox"
112+
type="text"
113+
class="form-control"
114+
placeholder="Bathrooms"
115+
data-ng-model="selectedHome.bathrooms" />
116+
</div>
117+
</div>
118+
<div class="form-group">
119+
<label for="sqfeetBox" class="col-sm-2 control-label">Sq. Feet</label>
120+
<div class="col-sm-10">
121+
<input id="sqfeetBox"
122+
type="text"
123+
class="form-control"
124+
placeholder="Sq. Feet"
125+
data-ng-model="selectedHome.squareFeet" />
126+
</div>
127+
</div>
128+
<div class="form-group">
129+
<label for="priceBox" class="col-sm-2 control-label">Price</label>
130+
<div class="col-sm-10">
131+
<input id="priceBox"
132+
type="text"
133+
class="form-control"
134+
placeholder="Price"
135+
data-ng-model="selectedHome.price" />
136+
</div>
137+
</div>
138+
<div class="form-group">
139+
<label for="notesBox" class="col-sm-2 control-label">Notes</label>
140+
<div class="col-sm-10">
141+
<textarea id="notesBox"
142+
class="form-control"
143+
placeholder="Notes"
144+
data-ng-model="selectedHome.notes"></textarea>
145+
</div>
146+
</div>
147+
<div class="form-group">
148+
<div class="col-sm-offset-2 col-sm-10">
149+
<button class="btn btn-default btn-link" data-ng-click="cancel()">Cancel</button>
150+
<button class="btn btn-default btn-primary" data-ng-click="save()">Save</button>
120151
</div>
121-
</div>
122-
<div class="form-group">
123-
<div class="col-sm-offset-2 col-sm-10">
124-
<button class="btn btn-default btn-link" data-ng-click="cancel()">Cancel</button>
125-
<button class="btn btn-default btn-primary" data-ng-click="save()">Save</button>
126-
</div>
127-
</div>
128-
</form>
152+
</div>
153+
</form>
154+
</div>
129155
</div>
156+
</div>
130157

131-
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
132-
133-
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
158+
<footer>
159+
<p>
160+
<a href="/igniteui-angular/index.html">Home</a> |
161+
<a href="https://github.com/IgniteUI/igniteui-angular/issues">Feedback &amp; Questions</a> |
162+
<a href="https://github.com/IgniteUI/igniteui-angular">Clone &amp; Fork</a>
163+
</p>
164+
<p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://igniteui.com">http://igniteui.com</a></p>
165+
</footer>
166+
167+
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
134168
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
135169
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
136-
137170
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
138-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.min.js"></script>
139-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-mocks.js"></script>
171+
172+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
173+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.min.js"></script>
174+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-mocks.js"></script>
140175

141-
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script>
142-
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
176+
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script>
177+
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
178+
179+
<script src="../../../src/igniteui-angular.js"></script>
180+
181+
<script src="app/lib/Math.uuid.js"></script>
182+
<script src="app/app.js"></script>
183+
<script src="app/services/fakeServerService.js"></script>
184+
<script src="app/services/dataService.js"></script>
185+
<script src="app/controllers/masterDetailController.js"></script>
143186

144-
<script src="../../../src/igniteui-angular.js"></script>
145-
146-
<script src="app/lib/Math.uuid.js"></script>
147-
<script src="app/app.js"></script>
148-
<script src="app/services/fakeServerService.js"></script>
149-
<script src="app/services/dataService.js"></script>
150-
<script src="app/controllers/masterDetailController.js"></script>
151187
</body>
152188
</html>

‎samples/igCombo.html‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<!DOCTYPE html>
2-
<html ng-app="igniteui-sample">
2+
<html>
33
<head>
4-
<title>Ignite UI Combo integration with AngularJS</title>
4+
<title>igCombo - Ignite UI Grid integration with AngularJS</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
88
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
9-
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.validator.css" rel="stylesheet" />
10-
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.combo.css" rel="stylesheet" />
119
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
1210
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
13-
<link rel="stylesheet" href="sample.css" />
11+
<link rel="stylesheet" href="/igniteui-angular/samples/sample.css" />
12+
13+
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.validator.css" rel="stylesheet" />
14+
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.combo.css" rel="stylesheet" />
15+
1416
</head>
15-
<body class="container" ng-controller="comboController">
17+
<body class="container">
18+
1619
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
1720
<div class="container">
1821
<div class="navbar-header">
@@ -22,16 +25,18 @@
2225
<span class="icon-bar"></span>
2326
<span class="icon-bar"></span>
2427
</button>
25-
<a class="navbar-brand" href="https://github.com/IgniteUI/igniteui-angular">Ignite UI AngularJS Directives <span class="badge alert-info">Preview</span></a>
28+
<a class="navbar-brand" href="/">Ignite UI AngularJS Directives <span class="badge alert-info">Preview</span></a>
2629
</div>
2730
<div class="navbar-collapse collapse">
2831
<ul class="nav navbar-nav">
29-
<li><a href="../index.html">Home</a></li>
32+
<li><a href="/igniteui-angular/index.html">Home</a></li>
3033
<li><a href="https://github.com/IgniteUI/igniteui-angular">View on GitHub <i class="fa fa-github"></i></a></li>
3134
</ul>
3235
</div>
3336
</div>
3437
</div>
38+
39+
<div ng-app="igniteui-sample" ng-controller="comboController">
3540
<h1 class="push-down-md"><a href="http://igniteui.com/combo/overview" target="_blank">igCombo</a></h1>
3641
<div class="row description">
3742
<div class="alert alert-info col-md-5 try-it-out">
@@ -88,10 +93,11 @@ <h2 class="h3">Edit Product Name</h2>
8893
</div>
8994

9095
</div>
96+
</div>
9197

92-
<footer>
98+
<footer>
9399
<p>
94-
<a href="../index.html">Home</a> |
100+
<a href="/igniteui-angular/index.html">Home</a> |
95101
<a href="https://github.com/IgniteUI/igniteui-angular/issues">Feedback &amp; Questions</a> |
96102
<a href="https://github.com/IgniteUI/igniteui-angular">Clone &amp; Fork</a>
97103
</p>
@@ -102,14 +108,15 @@ <h2 class="h3">Edit Product Name</h2>
102108
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
103109
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
104110
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
111+
112+
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.util.js"></script>
113+
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.datasource.js"></script>
114+
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.shared.js"></script>
115+
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.combo.js"></script>
116+
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.validator.js"></script>
117+
<script src="../src/igniteui-angular.js"></script>
118+
<script src="js/igniteui-sample.js"></script>
119+
<script src="js/data/northwind.js"></script>
105120

106-
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.util.js"></script>
107-
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.datasource.js"></script>
108-
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.shared.js"></script>
109-
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.combo.js"></script>
110-
<script src="//cdn-na.infragistics.com/jquery/20132/latest/js/modules/infragistics.ui.validator.js"></script>
111-
<script src="../src/igniteui-angular.js"></script>
112-
<script src="js/igniteui-sample.js"></script>
113-
<script src="js/data/northwind.js"></script>
114121
</body>
115122
</html>

0 commit comments

Comments
 (0)