Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
todomvc
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Eugene Shen
todomvc
Commits
bdb644a3
Commit
bdb644a3
authored
May 04, 2012
by
Eric Bidelman
Committed by
Sindre Sorhus
May 04, 2012
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Close GH-157: Updating Angular demo to v1.0 of the library.
parent
7980e75e
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
290 additions
and
310 deletions
+290
-310
architecture-examples/angularjs/index.html
architecture-examples/angularjs/index.html
+48
-47
architecture-examples/angularjs/js/controllers.js
architecture-examples/angularjs/js/controllers.js
+92
-104
architecture-examples/angularjs/js/directive.js
architecture-examples/angularjs/js/directive.js
+0
-34
architecture-examples/angularjs/js/libs/angular/angular.min.js
...tecture-examples/angularjs/js/libs/angular/angular.min.js
+150
-125
No files found.
architecture-examples/angularjs/index.html
View file @
bdb644a3
<!doctype html>
<html
xmlns:ng=
"http://angularjs.org/"
xmlns:my=
"http://rx.org
"
>
<html
ng-app=
"todomvc
"
>
<head>
<meta
charset=
"utf-8"
>
<title>
AngularJS - TodoMVC
</title>
<link
rel=
"stylesheet"
href=
"css/base.css"
>
<link
rel=
"stylesheet"
href=
"css/app.css"
>
<!--[if IE]>
<script src="../../assets/ie.js"></script>
<![endif]-->
<meta
charset=
"utf-8"
>
<title>
AngularJS - TodoMVC
</title>
<link
rel=
"stylesheet"
href=
"css/base.css"
>
<link
rel=
"stylesheet"
href=
"css/app.css"
>
<!--[if IE]>
<script src="../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div
ng:controller=
"App.Controllers.TodoController"
id=
"todoapp"
>
<header>
<h1>
Todos
</h1>
<form
id=
"todo-form"
ng:submit=
"addTodo()"
>
<input
id=
"new-todo"
name=
"newTodo"
type=
"text"
placeholder=
"What needs to be done?"
>
</form>
</header>
<section
id=
"main"
ng:show=
"hasTodos()"
>
<input
id=
"toggle-all"
type=
"checkbox"
name=
"allChecked"
ng:click=
"toggleAllStates()"
>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<ul
id=
"todo-list"
>
<li
ng:repeat=
"todo in todos"
my:dblclick=
"editTodo(todo)"
ng:class=
"(todo.done && ' done ') + (todo.editing && ' editing ')"
>
<div
class=
"view"
>
<input
class=
"toggle"
type=
"checkbox"
name=
"todo.done"
>
<label>
{{ todo.title }}
</label>
<a
class=
"destroy"
ng:click=
"removeTodo(todo)"
></a>
</div>
<form
ng:submit=
"finishEditing(todo)"
>
<input
class=
"edit"
type=
"text"
name=
"todo.title"
my:focus=
"todo.editing"
my:blur=
"finishEditing(todo)"
>
</form>
</li>
</ul>
</section>
<footer
ng:show=
"hasTodos()"
>
<a
id=
"clear-completed"
ng:click=
"clearCompletedItems()"
ng:show=
"hasFinishedTodos()"
>
{{ clearItemsText() }}
</a>
<div
id=
"todo-count"
><b>
{{ remainingTodos() }}
</b>
{{ itemsLeftText() }}
</div>
</footer>
</div>
<div
id=
"instructions"
>
Double-click to edit a todo.
</div>
<div
id=
"credits"
>
Created by
<a
href=
"http://twitter.com/cburgdorf"
>
Christoph Burgdorf
</a>
.
</div>
<script
src=
"../../assets/base.js"
></script>
<script
src=
"js/booter.js"
></script>
<script
src=
"js/libs/angular/angular.min.js"
ng:autobind
></script>
<script
src=
"js/controllers.js"
></script>
<script
src=
"js/directive.js"
></script>
<div
ng-controller=
"App.Controllers.TodoController"
id=
"todoapp"
>
<header>
<h1>
Todos
</h1>
<form
id=
"todo-form"
ng-submit=
"addTodo()"
>
<input
type=
"text"
id=
"new-todo"
name=
"newTodo"
ng-model=
"newTodo"
placeholder=
"What needs to be done?"
>
</form>
</header>
<section
id=
"main"
ng-show=
"todos.length"
>
<input
type=
"checkbox"
id=
"toggle-all"
ng-click=
"markAllDone()"
ng-checked=
"remainingTodos().length == 0"
>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<ul
id=
"todo-list"
>
<li
ng-repeat=
"todo in todos"
ng-dblclick=
"editTodo(todo)"
ng-class=
"{done: todo.done, editing: todo.editing}"
>
<div
class=
"view"
>
<input
type=
"checkbox"
class=
"toggle"
name=
"todo.done"
ng-model=
"todo.done"
>
<label>
{{todo.title}}
</label>
<a
class=
"destroy"
ng-click=
"removeTodo(todo)"
></a>
</div>
<form
ng-submit=
"finishEditing(todo)"
>
<input
type=
"text"
class=
"edit"
name=
"todo.title"
ng-model=
"todo.title"
my:blur=
"finishEditing(todo)"
>
</form>
</li>
</ul>
</section>
<footer
ng-show=
"todos.length"
>
<a
id=
"clear-completed"
ng-click=
"clearDoneTodos()"
ng-show=
"doneTodos().length"
>
Clear {{doneTodos().length}} items
</a>
<div
id=
"todo-count"
>
<ng-pluralize
count=
"remainingTodos().length"
when=
"todoForms"
></ng-pluralize>
</div>
</footer>
</div>
<div
id=
"instructions"
>
Double-click to edit a todo.
</div>
<div
id=
"credits"
>
Credits:
<a
href=
"http://twitter.com/cburgdorf"
>
Christoph Burgdorf
</a>
,
<a
href=
"http://ericbidelman.com"
>
Eric Bidelman
</a>
</div>
<script
src=
"../../assets/base.js"
></script>
<script
src=
"js/booter.js"
></script>
<script
src=
"js/libs/angular/angular.min.js"
></script>
<script
src=
"js/controllers.js"
></script>
</body>
</html>
\ No newline at end of file
architecture-examples/angularjs/js/controllers.js
View file @
bdb644a3
/* App Controllers */
App
.
Controllers
.
TodoController
=
function
()
{
var
self
=
this
;
self
.
newTodo
=
""
;
var
retrieveStore
=
function
()
{
var
store
=
localStorage
.
getItem
(
'
todo-angularjs
'
);
return
(
store
&&
JSON
.
parse
(
store
)
)
||
[];
};
var
updateStore
=
function
()
{
var
isEditing
=
angular
.
Array
.
count
(
self
.
todos
,
function
(
x
)
{
return
x
.
editing
;
});
if
(
!
isEditing
){
localStorage
.
setItem
(
'
todo-angularjs
'
,
JSON
.
stringify
(
self
.
todos
));
}
};
//not sure if its intended to do so. However, we need a hook to update the store
//whenever angular changes any properties
self
.
$watch
(
updateStore
);
self
.
todos
=
retrieveStore
();
self
.
addTodo
=
function
()
{
if
(
self
.
newTodo
.
trim
().
length
===
0
)
return
;
self
.
todos
.
push
({
title
:
self
.
newTodo
,
done
:
false
,
editing
:
false
});
self
.
newTodo
=
""
;
};
self
.
editTodo
=
function
(
todo
)
{
//cancel any active editing operation
angular
.
forEach
(
self
.
todos
,
function
(
value
)
{
value
.
editing
=
false
;
});
todo
.
editing
=
true
;
};
self
.
finishEditing
=
function
(
todo
)
{
if
(
todo
.
title
.
trim
().
length
===
0
){
self
.
removeTodo
(
todo
);
}
else
{
todo
.
editing
=
false
;
}
};
self
.
removeTodo
=
function
(
todo
)
{
angular
.
Array
.
remove
(
self
.
todos
,
todo
);
};
var
countTodos
=
function
(
done
)
{
return
function
()
{
return
angular
.
Array
.
count
(
self
.
todos
,
function
(
x
)
{
return
x
.
done
===
(
done
===
"
done
"
);
});
}
};
var
pluralize
=
function
(
count
,
word
)
{
return
count
===
1
?
word
:
word
+
'
s
'
;
};
self
.
remainingTodos
=
countTodos
(
"
undone
"
);
self
.
finishedTodos
=
countTodos
(
"
done
"
);
self
.
itemsLeftText
=
function
(){
return
pluralize
(
self
.
remainingTodos
(),
'
item
'
)
+
'
left
'
};
self
.
clearItemsText
=
function
(){
var
finishedTodos
=
self
.
finishedTodos
();
return
'
Clear
'
+
finishedTodos
+
'
completed
'
+
pluralize
(
finishedTodos
,
'
item
'
);
};
self
.
clearCompletedItems
=
function
()
{
var
oldTodos
=
self
.
todos
;
self
.
todos
=
[];
angular
.
forEach
(
oldTodos
,
function
(
todo
)
{
if
(
!
todo
.
done
)
self
.
todos
.
push
(
todo
);
});
self
.
allChecked
=
false
;
};
self
.
toggleAllStates
=
function
(){
angular
.
forEach
(
self
.
todos
,
function
(
todo
){
todo
.
done
=
self
.
allChecked
;
})
};
self
.
hasFinishedTodos
=
function
()
{
return
self
.
finishedTodos
()
>
0
;
};
self
.
hasTodos
=
function
()
{
return
self
.
todos
.
length
>
0
;
};
var
todomvc
=
angular
.
module
(
'
todomvc
'
,
[]);
App
.
Controllers
.
TodoController
=
function
(
$scope
)
{
$scope
.
todos
=
retrieveStore
();
// Call updateStore() whenever the todos array changes.
$scope
.
$watch
(
'
todos
'
,
updateStore
,
true
);
$scope
.
todoForms
=
{
0
:
"
You're done!
"
,
one
:
'
{} item left
'
,
other
:
'
{} items left
'
};
function
retrieveStore
()
{
var
store
=
localStorage
.
getItem
(
'
todo-angularjs
'
);
return
(
store
&&
JSON
.
parse
(
store
))
||
[];
};
function
updateStore
()
{
var
isEditing
=
$scope
.
todos
.
filter
(
function
(
val
)
{
return
val
.
editing
;
}).
length
;
if
(
!
isEditing
)
{
localStorage
.
setItem
(
'
todo-angularjs
'
,
JSON
.
stringify
(
$scope
.
todos
));
}
};
$scope
.
addTodo
=
function
()
{
if
(
this
.
newTodo
.
trim
().
length
===
0
)
{
return
;
}
$scope
.
todos
.
push
({
title
:
this
.
newTodo
,
done
:
false
,
editing
:
false
});
this
.
newTodo
=
''
;
};
$scope
.
editTodo
=
function
(
todo
)
{
//cancel any active editing operation
$scope
.
todos
.
forEach
(
function
(
val
)
{
val
.
editing
=
false
;
});
todo
.
editing
=
true
;
};
$scope
.
finishEditing
=
function
(
todo
)
{
if
(
todo
.
title
.
trim
().
length
===
0
)
{
$scope
.
removeTodo
(
todo
);
}
else
{
todo
.
editing
=
false
;
}
};
$scope
.
removeTodo
=
function
(
todo
)
{
for
(
var
i
=
0
,
len
=
$scope
.
todos
.
length
;
i
<
len
;
++
i
)
{
if
(
todo
===
$scope
.
todos
[
i
])
{
$scope
.
todos
.
splice
(
i
,
1
);
}
}
};
$scope
.
remainingTodos
=
function
()
{
return
$scope
.
todos
.
filter
(
function
(
val
)
{
return
!
val
.
done
;
});
};
$scope
.
doneTodos
=
function
()
{
return
$scope
.
todos
.
filter
(
function
(
val
)
{
return
val
.
done
;
});
}
$scope
.
clearDoneTodos
=
function
()
{
$scope
.
todos
=
$scope
.
remainingTodos
();
};
$scope
.
markAllDone
=
function
()
{
var
markDone
=
true
;
if
(
!
$scope
.
remainingTodos
().
length
)
{
markDone
=
false
;
}
$scope
.
todos
.
forEach
(
function
(
todo
)
{
todo
.
done
=
markDone
;
});
};
};
architecture-examples/angularjs/js/directive.js
deleted
100644 → 0
View file @
7980e75e
angular
.
directive
(
'
my:blur
'
,
function
(
expression
,
compiledElement
)
{
var
compiler
=
this
;
return
function
(
linkElement
)
{
var
scope
=
this
;
linkElement
.
bind
(
'
blur
'
,
function
(
event
)
{
scope
.
$apply
(
expression
,
linkElement
);
event
.
stopPropagation
();
});
};
});
angular
.
directive
(
'
my:dblclick
'
,
function
(
expression
,
compiledElement
)
{
var
compiler
=
this
;
return
function
(
linkElement
)
{
var
scope
=
this
;
linkElement
.
bind
(
'
dblclick
'
,
function
(
event
)
{
scope
.
$apply
(
expression
,
linkElement
);
event
.
stopPropagation
();
});
};
});
angular
.
directive
(
"
my:focus
"
,
function
(
expression
,
compiledElement
){
return
function
(
element
){
this
.
$watch
(
expression
,
function
(){
if
(
angular
.
formatter
.
boolean
.
parse
(
expression
)){
element
[
0
].
focus
();
element
[
0
].
select
();
}
},
element
);
};
});
architecture-examples/angularjs/js/libs/angular/angular.min.js
View file @
bdb644a3
This source diff could not be displayed because it is too large. You can
view the blob
instead.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment