Skip to content

Commit 04d5dcf

Browse files
UrigoUrigo
committed
(docs-Tutorial): Move ng-app to BODY because Meteor now supports attributes on the BODY tag
1 parent 5fd2704 commit 04d5dcf

File tree

5 files changed

+53
-64
lines changed

5 files changed

+53
-64
lines changed

‎.docs/angular-meteor/client/scripts/routes.ng.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ angular.module("meteor-angular-docs").config(
145145
})
146146
.state('tutorial.step05', {
147147
url: '/step_05',
148-
templateUrl: 'client/views/steps/tutorial.step_05.tpl'
148+
template: UiRouter.template('tutorial.step_05.html')
149149
})
150150
.state('tutorial.step06', {
151151
url: '/step_06',

‎.docs/angular-meteor/client/views/steps/tutorial.step_00.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,9 @@ <h1>Step 0 - Bootstrapping</h1>
156156

157157
And name our application in the ng-app directive in index.html:
158158

159-
<div ng-app="socially" ng-include="'index.ng.html'"></div>
159+
<body ng-app="socially">
160+
<div ng-include="'index.ng.html'"></div>
161+
</body>
160162

161163
What we did here is to declare a new angular module named 'socially' and making it dependant on the 'angular-meteor' module (that we included in the first step).
162164

‎.docs/angular-meteor/client/views/steps/tutorial.step_05.tpl renamed to ‎.docs/angular-meteor/client/views/steps/tutorial.step_05.html

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
1+
<template name="tutorial.step_05.html">
22
<div class="row">
33
<div class="col-md-12">
4-
<a href="https://github.com/Urigo/angular-meteor/edit/master/.docs/angular-meteor/client/views/steps/tutorial.step_05.tpl"
4+
<a href="https://github.com/Urigo/angular-meteor/edit/master/.docs/angular-meteor/client/views/steps/tutorial.step_05.html"
55
class="btn btn-default btn-lg improve-button">
66
<i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this doc
77
</a>
@@ -21,7 +21,7 @@ <h1>Step 5 - Routing & Multiple Views</h1>
2121
</div>
2222

2323
<do-nothing class="col-md-12">
24-
<btf-markdown>
24+
{{#markdown}}
2525

2626
In this step, you will learn how to create a layout template and how to build an app that has multiple views by adding routing, using an Angular module called 'ui-router'.
2727

@@ -70,26 +70,21 @@ <h1>Step 5 - Routing & Multiple Views</h1>
7070

7171
__`parties-list.ng.html`:__
7272

73-
</btf-markdown>
74-
75-
<pre><code><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-title">form</span>&gt;</span>
76-
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
77-
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"newParty.name"</span>&gt;</span>
78-
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Description<span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
79-
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">"newParty.description"</span>&gt;</span>
80-
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"parties.push(newParty)"</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
81-
<span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span>
82-
<span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
83-
<span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">ng-repeat</span>=<span class="hljs-value">"party in parties"</span>&gt;</span>
84-
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/parties/</span></span></span><span class="hljs-expression">{{<span class="hljs-variable">party.</span>_<span class="hljs-variable">id</span>}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-value">"</span>&gt;</span></span><span class="hljs-expression">{{<span class="hljs-variable">party.name</span>}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
85-
86-
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span></span><span class="hljs-expression">{{<span class="hljs-variable">party.description</span>}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
87-
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">ng-click</span>=<span class="hljs-value">"remove(party)"</span>&gt;</span>X<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
88-
<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
89-
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span></span>
90-
</code></pre>
91-
92-
<btf-markdown>
73+
<form>
74+
<label>Name</label>
75+
<input ng-model="newParty.name">
76+
<label>Description</label>
77+
<input ng-model="newParty.description">
78+
<button ng-click="parties.push(newParty)">Add</button>
79+
</form>
80+
<ul>
81+
<li ng-repeat="party in parties">
82+
<a href="/parties/{{dstache}}party._id}}">{{dstache}}party.name}}</a>
83+
84+
<p>{{dstache}}party.description}}</p>
85+
<button ng-click="remove(party)">X</button>
86+
</li>
87+
</ul>
9388

9489

9590
The code is almost the same except for this one change:
@@ -109,25 +104,20 @@ <h1>Step 5 - Routing & Multiple Views</h1>
109104

110105
__`index.html`:__
111106

112-
</btf-markdown>
113-
114-
<pre><code>
115-
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
116-
<span class="hljs-tag">&lt;<span class="hljs-title">base</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/"</span>&gt;</span>
117-
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
118-
<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
107+
<head>
108+
<base href="/">
109+
</head>
110+
<body ng-app="socially">
119111

120-
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"socially"</span>&gt;</span>
121-
<span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>
122-
<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"/parties"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
123-
<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
124-
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
125-
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
112+
<div>
113+
<h1>
114+
<a href="/parties">Home</a>
115+
</h1>
116+
<div ui-view></div>
117+
</div>
126118

127-
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
128-
</code></pre>
119+
</body>
129120

130-
<btf-markdown>
131121
Notice we did 2 things:
132122

133123
1. replaced all the content with ui-view (that will be responsible of including the right content according to the current url)
@@ -141,12 +131,8 @@ <h1>Step 5 - Routing & Multiple Views</h1>
141131

142132
__`party-details.ng.html`:__
143133

144-
</btf-markdown>
145-
146-
<pre><code> Here you will see <span class="hljs-operator">the</span> details <span class="hljs-operator">of</span> party <span class="hljs-built_in">number</span>: {{ partyId }}
147-
</code></pre>
134+
Here you will see the details of party number: {{dstache}} partyId }}
148135

149-
<btf-markdown>
150136

151137
We will get to it later on.
152138

@@ -229,7 +215,7 @@ <h1>Step 5 - Routing & Multiple Views</h1>
229215
With the routing set up and the parties list view implemented, we're ready to go to the next step to implement the party details view.
230216

231217

232-
</btf-markdown>
218+
{{/markdown}}
233219
</do-nothing>
234220
<div class="col-md-12">
235221
<ul class="btn-group tutorial-nav">
@@ -240,4 +226,5 @@ <h1>Step 5 - Routing & Multiple Views</h1>
240226
</ul>
241227
</div>
242228
</div>
229+
</template>
243230

‎.docs/angular-meteor/client/views/steps/tutorial.step_08.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ <h1>Step 8 - User accounts, authentication and permissions</h1>
6969
<head>
7070
<base href="/">
7171
</head>
72-
<body>
72+
<body ng-app="socially">
7373

74-
<div ng-app="socially">
74+
<div>
7575
<meteor-include src="loginButtons"></meteor-include>
7676
<h1>
7777
<a href="/parties">Home</a>

‎.docs/angular-meteor/client/views/steps/tutorial.step_17.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,23 +62,23 @@ <h1>Step 17 - CSS, LESS and Bootstrap</h1>
6262

6363
Inside index.html surround the H1 and the loginButton with a header like that:
6464

65-
<body>
66-
67-
<div ng-app="socially">
68-
<header class="navbar navbar-fixed-top">
69-
<div class="container-fluid">
70-
<div class="navbar-header">
71-
<h1>
72-
<a href="/parties">Home</a>
73-
</h1>
74-
</div>
75-
<meteor-include src="loginButtons"></meteor-include>
76-
</div>
77-
</header>
78-
<div ui-view class="container-fluid"></div>
65+
<body>
66+
67+
<div>
68+
<header class="navbar navbar-fixed-top">
69+
<div class="container-fluid">
70+
<div class="navbar-header">
71+
<h1>
72+
<a href="/parties">Home</a>
73+
</h1>
74+
</div>
75+
<meteor-include src="loginButtons"></meteor-include>
7976
</div>
77+
</header>
78+
<div ui-view class="container-fluid"></div>
79+
</div>
8080

81-
</body>
81+
</body>
8282

8383
Converting to Bootstrap doesn't stop here. By applying bootstrap styles to various other parts of our Socially app, our website will look better on different screens. Have a look at [Code Diff](https://github.com/Urigo/meteor-angular-socially/compare/step_16...step_17) to see how we changed the structure of the main files.
8484

0 commit comments

Comments
 (0)