Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 511 lines (462 sloc) 18.033 kb
b664845 @IgorMinar initial commit - still messy, begs for work
IgorMinar authored
1 <!doctype html>
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
7ac1d49 @mhevery Make it work on IE
authored
5 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5c862a6 @IgorMinar sarah's new design from 11-04-20 after code cleanup and file renames
IgorMinar authored
6 <head>
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
d08e11e @IgorMinar Add nice title and description for search engines
IgorMinar authored
9 <meta name="Description"
10 content="AngularJS is what HTML would have been, had it been designed for building web-apps.
11 Declarative templates with data-binding, MVC, dependency injection and great
12 testability story all implemented with pure client-side JavaScript!">
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
13 <title>AngularJS — Superheroic JavaScript MVC Framework</title>
720b9e8 @mhevery upgrade to rc6
authored
14 <link rel="icon" href="favicon.ico" type="image/x-icon">
15 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
16 <link rel="stylesheet" href="css/bootstrap.min.css">
17 <link rel="stylesheet" href="css/docs.css">
18 <link rel="stylesheet" href="css/font-awesome.css">
19 <link href="google-code-prettify/prettify.css" type="text/css" rel="stylesheet">
20
7ac1d49 @mhevery Make it work on IE
authored
21 <!--[if lte IE 8]>
22 <script>
23 document.createElement('tabs');
24 document.createElement('pane');
25 document.createElement('ng-pluralize');
26 </script>
27 <![endif]-->
0f98927 @mhevery basic presentation
authored
28 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
1a7f4bc @mhevery presentation
authored
29 <script src="js/bootstrap.min.js" type="text/javascript"></script>
0f98927 @mhevery basic presentation
authored
30 <script src="google-code-prettify/prettify.min.js" type="text/javascript"></script>
31 <script src="http://code.angularjs.org/angular-1.0.0rc8.js" type="text/javascript"></script>
1a7f4bc @mhevery presentation
authored
32 <script src="http://code.angularjs.org/1.0.0rc8/angular-bootstrap-prettify-1.0.0rc8.js" type="text/javascript"></script>
33 <script src="http://code.angularjs.org/1.0.0rc8/angular-bootstrap-1.0.0rc8.js" type="text/javascript"></script>
0f98927 @mhevery basic presentation
authored
34 <script src="http://code.angularjs.org/angular-resource-1.0.0rc8.js" type="text/javascript"></script>
35 <script src="js/homepage.js" type="text/javascript"></script>
a9520da @mhevery Brad review
authored
36 </head>
0f98927 @mhevery basic presentation
authored
37 <body ng-app="homepage">
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
38 <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
39 chromium.org/developers/how-tos/chrome-frame-getting-started -->
40 <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
41 <div role="main" class="container">
7d27bb5 @mhevery added expert section
authored
42
43 <div class="row" style="padding-top: 80px;">
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
44 <div class="span12">
a5c9f77 @mhevery upgrade to rc7
authored
45 <div class="hero-unit" style="height: 350px;">
196a178 @mhevery minor fixes
authored
46 <div class="center">
47 <img class="AngularJS-large" src="img/AngularJS-large.png">
b664845 @IgorMinar initial commit - still messy, begs for work
IgorMinar authored
48 </div>
0f98927 @mhevery basic presentation
authored
49 <br>
50 <br>
51 <br>
52 <br>
53 <br>
bb27f57 @mhevery added github and donload button
authored
54 <div class="center">
d17ab23 @bradlygreen Lower case for the tagline
bradlygreen authored
55 <h1>HTML enhanced for web apps!</h1>
bb27f57 @mhevery added github and donload button
authored
56 </div>
e0e8614 Removed extra closing div and fix some naming conventions
Vojta Jina authored
57 </div>
58 </div>
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
59 </div>
b1728bc @mhevery added logo
authored
60
1a7f4bc @mhevery presentation
authored
61 <h1>HTML Hello World</h1>
62 <div class="row example">
66b3886 @mhevery less wide
authored
63 <div class="span6 app-source">
1a7f4bc @mhevery presentation
authored
64 <div class="tabbable">
65 <div class="tab-pane" title="index.html">
66 <script id="hello-world.html" type="html">
67 <p>Hello World!</p>
68 </script>
69 <pre class="prettyprint linenums" ng-set-text="hello-world.html"></pre>
70 </div>
71 </div>
72 </div>
73 <div class="span4">
74 <div class="tabs-spacer"></div>
75 <div ng-set-html="hello-world.html" class="well"></div>
76 </div>
77 </div>
78
79
80
81 <h1>JS Hello World</h1>
82 <div class="row example">
66b3886 @mhevery less wide
authored
83 <div class="span6 app-source">
1a7f4bc @mhevery presentation
authored
84 <div class="tabbable">
85 <div class="tab-pane" title="index.html">
86 <pre class="prettyprint linenums">&lt;p id="greeting"&gt;&lt;/p&gt;</pre>
87 </div>
88 <div class="tab-pane" title="script.js">
89 <pre class="prettyprint linenums" ng-set-text="hello-world.js"></pre>
90 </div>
91 </div>
92 </div>
93 <div class="span4">
94 <div class="tabs-spacer"></div>
95 <div class="well" id="greeting"></div>
96 <script id="hello-world.js">
97 var isIE = document.attachEvent;
98 var addListener = isIE
99 ? function(e, t, fn) { e.attachEvent('on' + t, fn);}
100 : function(e, t, fn) { e.addEventListener(t, fn, false);};
101
102 addListener(window, 'load', function(){
103 var greeting = document.getElementById('greeting');
104 if (isIE) {
105 greeting.innerText = 'Hello World!';
106 } else {
107 greeting.textContent = 'Hello World!';
108 }
109 });
110 </script>
111 </div>
112 </div>
113
114
115
116 <h1>AngularJS Hello World</h1>
117 <div class="row example">
66b3886 @mhevery less wide
authored
118 <div class="span6 app-source" app-source="angular-hello-world.html hello.js"></div>
1a7f4bc @mhevery presentation
authored
119 <div class="span4">
120 <div class="tabs-spacer"></div>
121 <div app-run="angular-hello-world.html" class="well"></div>
122 </div>
123 </div>
124 <script id="angular-hello-world.html" type="html">
125 <p ng-controller="HelloController">{{greeting}}</p>
126 </script>
127 <script id="hello.js">
128 function HelloController($scope) {
129 $scope.greeting = 'Hello World';
130 }
131 </script>
132
133
134
4a94319 @mhevery Reset script and final touches
authored
135 <h1>The Basics</h1>
a9520da @mhevery Brad review
authored
136 <div class="row example">
66b3886 @mhevery less wide
authored
137 <div class="span6 app-source" app-source="hello.html"></div>
b1728bc @mhevery added logo
authored
138 <div class="span4">
5d6e7c8 @mhevery g+, popover pulse
authored
139 <span class="pull-right" js-fiddle="hello.html"></span>
140 <div class="tabs-spacer"></div>
b1728bc @mhevery added logo
authored
141 <div app-run="hello.html" class="well"></div>
142 </div>
143 </div>
144
145
146
5d6e7c8 @mhevery g+, popover pulse
authored
147 <h1>Add Some Control</h1>
a9520da @mhevery Brad review
authored
148 <div class=" row example">
66b3886 @mhevery less wide
authored
149 <div class="span6 app-source" app-source="todo.html todo.js todo.css"></div>
7d27bb5 @mhevery added expert section
authored
150 <div class="span4">
151 <span class="pull-right" js-fiddle="todo.html todo.js todo.css"></span>
5d6e7c8 @mhevery g+, popover pulse
authored
152 <div class="tabs-spacer"></div>
7d27bb5 @mhevery added expert section
authored
153 <div app-run="todo.html" class="well"></div>
5c862a6 @IgorMinar sarah's new design from 11-04-20 after code cleanup and file renames
IgorMinar authored
154 </div>
ad9de8f @IgorMinar add downloads and community subpages
IgorMinar authored
155 </div>
98917d5 @mhevery added google search, intermediate, and advanced skeloton
authored
156
64e0679 @mhevery video moved to lightbox
authored
157 <div class="modal hide fade" style="display: none;" id="videoModal">
158 <div class="modal-header">
159 <a class="close" data-dismiss="modal">×</a>
160 <h3>AngularJS Todo Tutorial</h3>
161 </div>
162 <div class="modal-body">
163 </div>
164 </div>
a9520da @mhevery Brad review
authored
165
98917d5 @mhevery added google search, intermediate, and advanced skeloton
authored
166
5d6e7c8 @mhevery g+, popover pulse
authored
167 <h1>Wire up a Backend</h1>
a9520da @mhevery Brad review
authored
168 <div class=" row example">
66b3886 @mhevery less wide
authored
169 <div class="span6 app-source" app-source="project.html project.js list.html detail.html mongolab.js" resource="resource" module="project"></div>
7d27bb5 @mhevery added expert section
authored
170 <div class="span4">
53dc001 @mhevery Added more popover texts
authored
171 <span class="pull-right" js-fiddle="project.html list.html detail.html project.js mongolab.js" resource="resource" module="project"></span>
5d6e7c8 @mhevery g+, popover pulse
authored
172 <div class="tabs-spacer"></div>
7ac1d49 @mhevery Make it work on IE
authored
173 <!--[if lt IE 10]>
174 <div class="alert alert-error">
175 Your browser doesn't support <a href="http://www.w3.org/TR/cors/">CORS</a>, therefore
176 it can not fetch data from an external domain resulting in no projects shown in this example.
177 </div>
178 <![endif]-->
7d27bb5 @mhevery added expert section
authored
179 <div app-run="project.html" module="project" class="well"></div>
98917d5 @mhevery added google search, intermediate, and advanced skeloton
authored
180 </div>
181 </div>
182
a9520da @mhevery Brad review
authored
183
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
184
5d6e7c8 @mhevery g+, popover pulse
authored
185 <h1>Create Components</h1>
a9520da @mhevery Brad review
authored
186 <div class=" row example">
66b3886 @mhevery less wide
authored
187 <div class="span6 app-source" app-source="tabs.html components.js beers.js" module="components"></div>
7d27bb5 @mhevery added expert section
authored
188 <div class="span4">
7ac1d49 @mhevery Make it work on IE
authored
189 <span class="pull-right" js-fiddle="tabs.html components.js beers.js" module="components"></span>
5d6e7c8 @mhevery g+, popover pulse
authored
190 <div class="tabs-spacer"></div>
0f98927 @mhevery basic presentation
authored
191 <div app-run="tabs.html" module="components" class="well"></div>
7d27bb5 @mhevery added expert section
authored
192 </div>
193 </div>
194
0f98927 @mhevery basic presentation
authored
195 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
db4deb3 @mhevery fix jsfiddle examples; make footer dark
authored
196 </div>
197
198 <footer class="footer">
199 <div class="container">
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
200 <p class="pull-right"><a href="#">Back to top</a></p>
201 <p>Super-powered by Google ©2010-2012</p>
db4deb3 @mhevery fix jsfiddle examples; make footer dark
authored
202 <p>Code licensed under the
203 <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The
204 MIT License</a>. Documentation licensed under <a
205 href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
206 </p>
db4deb3 @mhevery fix jsfiddle examples; make footer dark
authored
207 </div>
208 </footer>
e0e8614 Removed extra closing div and fix some naming conventions
Vojta Jina authored
209
769d292 @mhevery Initial page layout with bootstrap and google-code-prettify
authored
210 <!-- JavaScript at the bottom for fast page loading -->
211 <!-- end scripts -->
ad9de8f @IgorMinar add downloads and community subpages
IgorMinar authored
212
b1728bc @mhevery added logo
authored
213 <div class="hello-code">
214 <!-- ============== Hello ============== -->
7700f46 @mhevery added projects example
authored
215
b1728bc @mhevery added logo
authored
216 <script type="text/ng-template" id="hello.html">
5d6e7c8 @mhevery g+, popover pulse
authored
217 <div>
b1728bc @mhevery added logo
authored
218 <label>Name:</label>
5d6e7c8 @mhevery g+, popover pulse
authored
219 <input type="text" ng-model="yourName" placeholder="Enter a name here">
b1728bc @mhevery added logo
authored
220 <hr>
221 <h1>Hello {{yourName}}!</h1>
222 </div>
223 </script>
224 </div>
225 <div class="todo-code">
226 <!-- ============== TODO ============== -->
7ac1d49 @mhevery Make it work on IE
authored
227 <style type="text/css" id="todo.css">
a9520da @mhevery Brad review
authored
228 .done-true {
229 text-decoration: line-through;
230 color: grey;
231 }
232 </style>
b1728bc @mhevery added logo
authored
233 <script id="todo.js">
234 function TodoCtrl($scope) {
235 $scope.todos = [
236 {text:'learn angular', done:true},
237 {text:'build an angular app', done:false}];
238
239 $scope.addTodo = function() {
240 $scope.todos.push({text:$scope.todoText, done:false});
241 $scope.todoText = '';
242 };
7700f46 @mhevery added projects example
authored
243
b1728bc @mhevery added logo
authored
244 $scope.remaining = function() {
245 var count = 0;
246 angular.forEach($scope.todos, function(todo) {
196a178 @mhevery minor fixes
authored
247 count += todo.done ? 0 : 1;
b1728bc @mhevery added logo
authored
248 });
249 return count;
7700f46 @mhevery added projects example
authored
250 };
251
b1728bc @mhevery added logo
authored
252 $scope.archive = function() {
253 var oldTodos = $scope.todos;
254 $scope.todos = [];
255 angular.forEach(oldTodos, function(todo) {
256 if (!todo.done) $scope.todos.push(todo);
257 });
7700f46 @mhevery added projects example
authored
258 };
b1728bc @mhevery added logo
authored
259 }
260 </script>
261 <script type="text/ng-template" id="todo.html">
262 <h2>Todo</h2>
263 <div ng-controller="TodoCtrl">
264 <span>{{remaining()}} of {{todos.length}} remaining</span>
265 [ <a href="" ng-click="archive()">archive</a> ]
266 <ul class="unstyled">
267 <li ng-repeat="todo in todos">
268 <input type="checkbox" ng-model="todo.done">
269 <span class="done-{{todo.done}}">{{todo.text}}</span>
270 </li>
271 </ul>
272 <form ng-submit="addTodo()">
a9520da @mhevery Brad review
authored
273 <input type="text" ng-model="todoText" size="30"
b1728bc @mhevery added logo
authored
274 placeholder="add new todo here">
275 <input class="btn-primary" type="submit" value="add">
276 </form>
277 </div>
278 </script>
279 </div>
280 <div class="project-code">
281 <!-- ============== Projects ============== -->
7ac1d49 @mhevery Make it work on IE
authored
282 <style type="text/css" id="project.css">
a9520da @mhevery Brad review
authored
283 table { text-align: left; }
284 table td, table th {
285 vertical-align: top;
286 padding: 0 .25em;
287 }
288 </style>
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
289 <script id="mongolab.js">
290 // This is a module for cloud persistance in mongolab - https://mongolab.com
291 angular.module('mongolab', ['ngResource']).
292 factory('Project', function($resource) {
293 var Project = $resource('https://api.mongolab.com/api/1/databases' +
294 '/angularjs/collections/projects/:id',
295 { apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
296 update: { method: 'PUT' }
297 }
298 );
299
300 Project.prototype.update = function(cb) {
301 return Project.update({id: this._id.$oid},
302 angular.extend({}, this, {_id:undefined}), cb);
b1728bc @mhevery added logo
authored
303 };
304
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
305 Project.prototype.destroy = function(cb) {
306 return Project.remove({id: this._id.$oid}, cb);
307 };
7700f46 @mhevery added projects example
authored
308
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
309 return Project;
310 });
b1728bc @mhevery added logo
authored
311 </script>
312 <script id="project.js">
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
313 angular.module('project', ['mongolab']).
a9520da @mhevery Brad review
authored
314 config(function($routeProvider) {
315 $routeProvider.
53dc001 @mhevery Added more popover texts
authored
316 when('/list', {controller:ListCtrl, template:'list.html'}).
317 when('/edit/:projectId', {controller:EditCtrl, template:'detail.html'}).
318 when('/new', {controller:CreateCtrl, template:'detail.html'}).
a9520da @mhevery Brad review
authored
319 otherwise({redirectTo:'/list'});
320 });
7700f46 @mhevery added projects example
authored
321
322
53dc001 @mhevery Added more popover texts
authored
323 function ListCtrl($scope, Project) {
b1728bc @mhevery added logo
authored
324 $scope.projects = Project.query();
325 }
7700f46 @mhevery added projects example
authored
326
327
53dc001 @mhevery Added more popover texts
authored
328 function CreateCtrl($scope, $location, Project) {
b1728bc @mhevery added logo
authored
329 $scope.save = function() {
53dc001 @mhevery Added more popover texts
authored
330 Project.save($scope.project, function(project) {
331 $location.path('/edit/' + project._id.$oid);
b1728bc @mhevery added logo
authored
332 });
333 }
7700f46 @mhevery added projects example
authored
334 }
335
336
53dc001 @mhevery Added more popover texts
authored
337 function EditCtrl($scope, $location, $routeParams, Project) {
b1728bc @mhevery added logo
authored
338 var self = this;
7700f46 @mhevery added projects example
authored
339
53dc001 @mhevery Added more popover texts
authored
340 Project.get({id: $routeParams.projectId}, function(project) {
341 self.original = project;
342 $scope.project = new Project(self.original);
b1728bc @mhevery added logo
authored
343 });
7700f46 @mhevery added projects example
authored
344
b1728bc @mhevery added logo
authored
345 $scope.isClean = function() {
53dc001 @mhevery Added more popover texts
authored
346 return angular.equals(self.original, $scope.project);
b1728bc @mhevery added logo
authored
347 }
7700f46 @mhevery added projects example
authored
348
b1728bc @mhevery added logo
authored
349 $scope.destroy = function() {
53dc001 @mhevery Added more popover texts
authored
350 self.original.destroy(function() {
b1728bc @mhevery added logo
authored
351 $location.path('/list');
352 });
353 };
7700f46 @mhevery added projects example
authored
354
b1728bc @mhevery added logo
authored
355 $scope.save = function() {
53dc001 @mhevery Added more popover texts
authored
356 $scope.project.update(function() {
a9520da @mhevery Brad review
authored
357 $location.path('/list');
358 });
b1728bc @mhevery added logo
authored
359 };
360 }
361 </script>
362 <script type="text/ng-template" id="project.html">
363 <h2>JavaScript Projects</h2>
364 <div ng-view></div>
365 </script>
a9520da @mhevery Brad review
authored
366 <script type="text/ng-template" id="list.html">
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
367 <input type="text" ng-model="search" class="search-query" placeholder="Search">
b1728bc @mhevery added logo
authored
368 <table>
369 <thead>
7700f46 @mhevery added projects example
authored
370 <tr>
371 <th>Project</th>
372 <th>Description</th>
373 <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
374 </tr>
b1728bc @mhevery added logo
authored
375 </thead>
376 <tbody>
bbf0329 @mhevery change predicate to search
authored
377 <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
db4deb3 @mhevery fix jsfiddle examples; make footer dark
authored
378 <td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
6291d68 @mhevery advanced example
authored
379 <td>{{project.description}}</td>
7700f46 @mhevery added projects example
authored
380 <td>
53dc001 @mhevery Added more popover texts
authored
381 <a href="#/edit/{{project._id.$oid}}"><i class="icon-pencil"></i></a>
7700f46 @mhevery added projects example
authored
382 </td>
383 </tr>
b1728bc @mhevery added logo
authored
384 </tbody>
385 </table>
386 </script>
a9520da @mhevery Brad review
authored
387 <script type="text/ng-template" id="detail.html">
b1728bc @mhevery added logo
authored
388 <form name="myForm">
389 <div class="control-group" ng-class="{error: myForm.name.$invalid}">
390 <label>Name</label>
a9520da @mhevery Brad review
authored
391 <input type="text" name="name" ng-model="project.name" required>
b1728bc @mhevery added logo
authored
392 <span ng-show="myForm.name.$error.required" class="help-inline">
393 Required</span>
394 </div>
7700f46 @mhevery added projects example
authored
395
b1728bc @mhevery added logo
authored
396 <div class="control-group" ng-class="{error: myForm.site.$invalid}">
397 <label>Website</label>
a9520da @mhevery Brad review
authored
398 <input type="url" name="site" ng-model="project.site" required>
b1728bc @mhevery added logo
authored
399 <span ng-show="myForm.site.$error.required" class="help-inline">
400 Required</span>
401 <span ng-show="myForm.site.$error.url" class="help-inline">
402 Not a URL</span>
403 </div>
7700f46 @mhevery added projects example
authored
404
b1728bc @mhevery added logo
authored
405 <label>Description</label>
a9520da @mhevery Brad review
authored
406 <textarea name="description" ng-model="project.description"></textarea>
6291d68 @mhevery advanced example
authored
407
b1728bc @mhevery added logo
authored
408 <br>
409 <a href="#/list" class="btn">Cancel</a>
410 <button ng-click="save()" ng-disabled="isClean() || myForm.$invalid"
411 class="btn btn-primary">Save</button>
412 <button ng-click="destroy()"
53dc001 @mhevery Added more popover texts
authored
413 ng-show="project._id" class="btn btn-danger">Delete</button>
b1728bc @mhevery added logo
authored
414 </form>
415 </script>
416 </div>
417 <div class="tabs-code">
418 <!-- ============== Tabs ============== -->
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
419 <script id="components.js">
420 angular.module('components', []).
a9520da @mhevery Brad review
authored
421 directive('tabs', function() {
422 return {
423 restrict: 'E',
424 transclude: true,
425 scope: {},
426 controller: function($scope, $element) {
eeec4c8 @mhevery added placeholders for popovers
authored
427 var panes = $scope.panes = [];
a9520da @mhevery Brad review
authored
428
429 $scope.select = function(pane) {
eeec4c8 @mhevery added placeholders for popovers
authored
430 angular.forEach(panes, function(pane) {
a9520da @mhevery Brad review
authored
431 pane.selected = false;
432 });
433 pane.selected = true;
b1728bc @mhevery added logo
authored
434 }
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
435
436 this.addPane = function(pane) {
437 if (panes.length == 0) $scope.select(pane);
438 panes.push(pane);
439 }
440 },
441 template:
442 '<div class="tabbable">' +
443 '<ul class="nav nav-tabs">' +
444 '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
445 '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
446 '</li>' +
447 '</ul>' +
448 '<div class="tab-content" ng-transclude></div>' +
449 '</div>',
450 replace: true
a9520da @mhevery Brad review
authored
451 };
452 }).
453 directive('pane', function() {
454 return {
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
455 require: '^tabs',
a9520da @mhevery Brad review
authored
456 restrict: 'E',
457 transclude: true,
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
458 scope: { title: 'bind' },
459 link: function(scope, element, attrs, tabsCtrl) {
460 tabsCtrl.addPane(scope);
a9520da @mhevery Brad review
authored
461 },
462 template:
463 '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
464 '</div>',
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
465 replace: true
a9520da @mhevery Brad review
authored
466 };
467 })
b1728bc @mhevery added logo
authored
468 </script>
469 <script>
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
470 angular.module('components-us', ['components', 'ngLocal.us']);
471 angular.module('components-sk', ['components', 'ngLocal.sk']);
b1728bc @mhevery added logo
authored
472 </script>
473 <script id="beers.js">
474 function BeerCounter($scope, $locale) {
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
475 $scope.beers = [0, 1, 2, 3, 4, 5, 6];
b1728bc @mhevery added logo
authored
476 if ($locale.id == 'en-us') {
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
477 $scope.beerForms = {
b1728bc @mhevery added logo
authored
478 0: 'no beers',
479 one: '{} beer',
480 other: '{} beers'
481 };
482 } else {
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
483 $scope.beerForms = {
5d6e7c8 @mhevery g+, popover pulse
authored
484 0: 'žiadne pivo',
b1728bc @mhevery added logo
authored
485 one: '{} pivo',
486 few: '{} pivá',
487 other: '{} pív'
488 };
b41508e @mhevery added zippy
authored
489 }
490 }
b1728bc @mhevery added logo
authored
491 </script>
492 <script type="text/ng-template" id="tabs.html">
493 <tabs>
d511c4e @mhevery remove NGULAR; switch to resource and mongolab
authored
494 <pane title="Localization">
b1728bc @mhevery added logo
authored
495 Date: {{ '2012-04-01' | date:'fullDate' }} <br>
496 Currency: {{ 123456 | currency }} <br>
497 Number: {{ 98765.4321 | number }} <br>
498 </pane>
499 <pane title="Pluralization">
500 <div ng-controller="BeerCounter">
91c1bb8 @mhevery Completed all popovers, mostly first draft
authored
501 <div ng-repeat="beerCount in beers">
502 <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
503 </div>
b1728bc @mhevery added logo
authored
504 </div>
505 </pane>
506 </tabs>
507 </script>
508 </div>
5c862a6 @IgorMinar sarah's new design from 11-04-20 after code cleanup and file renames
IgorMinar authored
509 </body>
bbf0329 @mhevery change predicate to search
authored
510 </html>
Something went wrong with that request. Please try again.