Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Angular version #10

Closed
wants to merge 6 commits into from

2 participants

@n1k0
Collaborator

Different approach than in #9, still to engage the conversation and as suggested friday, this angularjs based version starts as minimal and simple as possible. No bloat, but it works :)

Feel free to walk through the code and give any feedback.

Disclaimer: I didn't include the bootstrap stuff like in #9, but you get the picture.

@dmose
Owner

I'm curious: what motivated you to choose Angular rather than Backbone for the minimalist version?

@n1k0
Collaborator

Investigation. I wanted to dirty my hands with other solutions I'm a bit less comfortable with, and offer alternatives to the team. I've also been pleased to discover that angular's docs are much better nowadays.

I (or someone else, of course) could eventually make a minimal backbone app as well for comparison, and a flight or ember one also if the team finds it useful.

I think these kinds of exercises are all but wastes of time for the project, as everybody can see actually bootstrapped code and comment the proposed implementation. I really wish the final choice will be a team's one :)

@dmose
Owner

Based on decision in today's meeting; we're going to start with Backbone. Closing this PR.

@dmose dmose closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
12 server.js
@@ -21,26 +21,30 @@ function findNewNick(aNick) {
return nickParts[1] + newDigits;
}
+server.get('/users', function(req, res) {
+ res.send(200, JSON.stringify(server.get('users')));
+});
+
server.post('/signin', function(req, res) {
var users = server.get('users');
var nick = req.body.nick;
while (users.indexOf(nick) !== -1)
nick = findNewNick(nick);
- res.send(200, JSON.stringify({nick: nick, users: users}));
users.push(nick);
server.set('users', users);
+ res.send(200, JSON.stringify({nick: nick, users: users}));
});
server.post('/signout', function(req, res) {
var users = server.get('users');
var pos = users.indexOf(req.body.nick);
- if (pos == -1)
- res.send(404, 'User not logged in');
+ if (pos === -1)
+ return res.send(404, 'User not logged in');
users.pop(pos);
server.set('users', users);
- res.send(200);
+ res.redirect("/");
});
var _listen = server.listen;
View
35 static/index.html
@@ -1,18 +1,35 @@
<!DOCTYPE html>
-<html>
+<html ng-app>
<head>
<meta charset="utf-8">
<title>Talkilla</title>
- <script type="text/javascript" src="talkilla.js"></script>
+ <style>
+ .hide {display:none;}
+ </style>
</head>
-
-<body>
+<body ng-controller="AppController">
<h1 id="title">Welcome to Talkilla!</h1>
- <form id="login" onsubmit="login(); return false;" action="signin" method="post">
- <p>Please enter a nickname to use with Talkilla: <input id="nick" name="nick" type="text">
- <input id="submit" type="submit"></p>
+ <form id="loginForm" ng-submit="login()">
+ <p>
+ Please enter a nickname to use with Talkilla:
+ <input id="nick" name="nick" type="text" ng-model="nick" required>
+ <input id="submit" type="submit">
+ </p>
</form>
- <p id="invite" style="display: none">You are the only person logged in, invite your friends.</p>
- <ul id="friends"></ul>
+ <form id="userInfo" method="post" action="/signout" class="hide">
+ <p>
+ Hello, <strong>{{nick}}</strong>
+ <input type="hidden" name="nick" value="{{nick}}">
+ <button type="submit">Sign out</button>
+ </p>
+ </form>
+ <p id="invite" class="hide">
+ You are the only person logged in, invite your friends.
+ </p>
+ <ul id="friends">
+ <li ng-repeat="user in users">{{user}}</li>
+ </ul>
+ <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
+ <script src="talkilla.js"></script>
</body>
</html>
View
44 static/talkilla.js
@@ -1,25 +1,23 @@
-function login() {
- var form = document.getElementById("login")
- var xhr = new XMLHttpRequest();
- xhr.onload = function() {
- if (this.status !== 200) {
- form.style.display = "";
- return;
- }
- var data = JSON.parse(this.responseText);
- document.getElementById("title").textContent = "Welcome " + data.nick + "!";
- if (!data.users.length) {
- document.getElementById("invite").style.display = "";
- return;
- }
- var ul = document.getElementById("friends");
- data.users.forEach(function(user) {
- var li = document.createElement("li");
- li.textContent = user;
- ul.appendChild(li);
+/*global angular*/
+function AppController($scope, $http) {
+ $scope.nick = 'guest';
+
+ $http.get('/users').success(function(users) {
+ $scope.users = users;
+ }).error(function() {
+ alert('unable to load users');
+ });
+
+ $scope.login = function() {
+ $http.post('/signin', {nick: $scope.nick}).success(function(result) {
+ $scope.users = result.users;
+ angular.element(document.querySelector('#loginForm')).toggleClass('hide');
+ angular.element(document.querySelector('#userInfo')).toggleClass('hide');
+ if (result.users.length === 1) {
+ angular.element(document.querySelector('#invite')).removeClass('hide');
+ }
+ }).error(function() {
+ alert('unable to sign in');
});
- }
- xhr.open("POST", "signin", true);
- xhr.send(new FormData(form));
- form.style.display = "none";
+ };
}
View
4 test/presence_api_test.js
@@ -41,7 +41,7 @@ describe("Server", function() {
request.post("http://localhost:3000/signin", {form: {nick: nick1}}, function(err, res, body) {
var data = JSON.parse(body);
expect(data.nick).to.eql(nick1);
- expect(data.users).to.be.empty;
+ expect(data.users).to.eql(["foo"]);
done();
});
});
@@ -84,7 +84,7 @@ describe("Server", function() {
request.post("http://localhost:3000/signin", {form: {nick: nick2}}, function(err, res, body) {
var data = JSON.parse(body);
expect(data.nick).to.eql(nick2);
- expect(data.users).to.eql([nick1]);
+ expect(data.users).to.eql([nick1, nick2]);
done();
});
});
Something went wrong with that request. Please try again.