Skip to content

Commit 41c7f10

Browse files
Amir-61Amir-61
committed
Create Angular.js client - no lb-services.js 
1 parent 96905af commit 41c7f10

16 files changed

+30631
-5
lines changed

‎client/css/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/*global*/
2+
* {
3+
margin:0;
4+
padding:0;
5+
}
6+
body {
7+
font-family:'courier new';
8+
font-size:1rem;
9+
}
10+
button {
11+
background:#eee;
12+
border:0;
13+
color:#777;
14+
cursor:pointer;
15+
font-family:'courier new';
16+
font-size:1rem;
17+
padding:.5rem;
18+
}
19+
button:active {
20+
background:#ddd;
21+
}
22+
[disabled] {
23+
background:#eee;
24+
color:#ccc;
25+
}
26+
fieldset {
27+
color:#777;
28+
padding:1rem;
29+
}
30+
fieldset legend {
31+
border:1px solid #777;
32+
padding:0 .5rem;
33+
}
34+
label {
35+
display:inline-block;
36+
text-align:right;
37+
vertical-align:middle;
38+
width:200px;
39+
}
40+
select {
41+
background:#ddd;
42+
text-indent: 0.01px;
43+
text-overflow: "";
44+
}
45+
p {
46+
padding:1rem;
47+
}
48+
/*header*/
49+
body > header {
50+
border-bottom:1px solid #ccc;
51+
}
52+
body > header h1 {
53+
font-size:2rem;
54+
padding:1rem 1rem 0 1rem;
55+
}
56+
body > header h2 {
57+
font-size:1rem;
58+
padding:0 1rem;
59+
}
60+
/*nav*/
61+
body > header nav {
62+
padding:1rem;
63+
}
64+
body > header nav li {
65+
display:inline-block;
66+
padding-bottom:.5rem;
67+
}
68+
body > header nav li a {
69+
color:#777;
70+
padding:.5rem;
71+
text-decoration:none;
72+
}
73+
body > header nav li a.active {
74+
background:#eee;
75+
}
76+
/*main*/
77+
main section {
78+
padding:1rem;
79+
}
80+
main section article {
81+
padding-bottom:2rem;
82+
}
83+
main section article h1 {
84+
font-size:1.5rem;
85+
}
86+
main section article h2 {
87+
font-size:1rem;
88+
margin-bottom:1rem;
89+
}
90+
/*main form*/
91+
main input,
92+
select,
93+
textarea {
94+
background:#ddd;
95+
border:0;
96+
display:inline-block;
97+
font-family:'courier new';
98+
margin-bottom:1rem;
99+
padding:.5rem;
100+
vertical-align:middle;
101+
}
102+
main select,
103+
textarea {
104+
width:300px;
105+
}

‎client/index.html

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,47 @@
1-
<head><title>LoopBack</title></head>
2-
<body>
3-
<h1>LoopBack Rocks!</h1>
4-
<p>Hello World... </p>
5-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="app">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>loopback-getting-started-intermediate</title>
6+
<link href="css/style.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>Coffee shop reviews</h1>
11+
<h2 ng-show="currentUser">Hello {{currentUser.email}}</h2>
12+
<nav>
13+
<ul>
14+
<li>
15+
<a ui-sref="all-reviews" ui-sref-active="active">All reviews</a>
16+
</li>
17+
<li ng-hide="currentUser">
18+
<a ui-sref="sign-up" ui-sref-active="active">Sign up</a>
19+
</li>
20+
<li ng-show="currentUser">
21+
<a ui-sref="my-reviews" ui-sref-active="active">My Reviews</a>
22+
</li>
23+
<li ng-show="currentUser">
24+
<a ui-sref="add-review" ui-sref-active="active">Add Review</a>
25+
</li>
26+
<li ng-hide="currentUser">
27+
<a ui-sref="login" ui-sref-active="active">Log in</a>
28+
</li>
29+
<li ng-show="currentUser">
30+
<a ui-sref="logout" ui-sref-active="active">Log out</a>
31+
</li>
32+
</ul>
33+
</nav>
34+
</header>
35+
36+
<main ui-view></main>
37+
38+
<script src="vendor/angular.js"></script>
39+
<script src="vendor/angular-resource.js"></script>
40+
<script src="vendor/angular-ui-router.js"></script>
41+
<script src="js/app.js"></script>
42+
<script src="js/services/lb-services.js"></script>
43+
<script src="js/controllers/auth.js"></script>
44+
<script src="js/controllers/review.js"></script>
45+
<script src="js/services/auth.js"></script>
46+
</body>
47+
</html>

‎client/js/app.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// Copyright IBM Corp. 2015. All Rights Reserved.
2+
// Node module: loopback-getting-started-intermediate
3+
// This file is licensed under the MIT License.
4+
// License text available at https://opensource.org/licenses/MIT
5+
6+
angular
7+
.module('app', [
8+
'ui.router',
9+
'lbServices'
10+
])
11+
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
12+
$urlRouterProvider) {
13+
$stateProvider
14+
.state('add-review', {
15+
url: '/add-review',
16+
templateUrl: 'views/review-form.html',
17+
controller: 'AddReviewController',
18+
authenticate: true
19+
})
20+
.state('all-reviews', {
21+
url: '/all-reviews',
22+
templateUrl: 'views/all-reviews.html',
23+
controller: 'AllReviewsController'
24+
})
25+
.state('edit-review', {
26+
url: '/edit-review/:id',
27+
templateUrl: 'views/review-form.html',
28+
controller: 'EditReviewController',
29+
authenticate: true
30+
})
31+
.state('delete-review', {
32+
url: '/delete-review/:id',
33+
controller: 'DeleteReviewController',
34+
authenticate: true
35+
})
36+
.state('forbidden', {
37+
url: '/forbidden',
38+
templateUrl: 'views/forbidden.html',
39+
})
40+
.state('login', {
41+
url: '/login',
42+
templateUrl: 'views/login.html',
43+
controller: 'AuthLoginController'
44+
})
45+
.state('logout', {
46+
url: '/logout',
47+
controller: 'AuthLogoutController'
48+
})
49+
.state('my-reviews', {
50+
url: '/my-reviews',
51+
templateUrl: 'views/my-reviews.html',
52+
controller: 'MyReviewsController',
53+
authenticate: true
54+
})
55+
.state('sign-up', {
56+
url: '/sign-up',
57+
templateUrl: 'views/sign-up-form.html',
58+
controller: 'SignUpController',
59+
})
60+
.state('sign-up-success', {
61+
url: '/sign-up/success',
62+
templateUrl: 'views/sign-up-success.html'
63+
});
64+
$urlRouterProvider.otherwise('all-reviews');
65+
}])
66+
.run(['$rootScope', '$state', 'LoopBackAuth', 'AuthService', function($rootScope, $state, LoopBackAuth, AuthService) {
67+
$rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
68+
// redirect to login page if not logged in
69+
if (toState.authenticate && !LoopBackAuth.accessTokenId) {
70+
event.preventDefault(); //prevent current page from loading
71+
72+
// Maintain returnTo state in $rootScope that is used
73+
// by authService.login to redirect to after successful login.
74+
// http://www.jonahnisenson.com/angular-js-ui-router-redirect-after-login-to-requested-url/
75+
$rootScope.returnTo = {
76+
state: toState,
77+
params: toParams
78+
};
79+
80+
$state.go('forbidden');
81+
}
82+
});
83+
84+
// Get data from localstorage after pagerefresh
85+
// and load user data into rootscope.
86+
if (LoopBackAuth.accessTokenId && !$rootScope.currentUser) {
87+
AuthService.refresh(LoopBackAuth.accessTokenId);
88+
}
89+
}]);

‎client/js/controllers/auth.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Copyright IBM Corp. 2015. All Rights Reserved.
2+
// Node module: loopback-getting-started-intermediate
3+
// This file is licensed under the MIT License.
4+
// License text available at https://opensource.org/licenses/MIT
5+
6+
angular
7+
.module('app')
8+
.controller('AuthLoginController', ['$scope', 'AuthService', '$state',
9+
function($scope, AuthService, $state) {
10+
$scope.user = {
11+
email: 'foo@bar.com',
12+
password: 'foobar'
13+
};
14+
15+
$scope.login = function() {
16+
AuthService.login($scope.user.email, $scope.user.password)
17+
.then(function() {
18+
19+
// return to saved returnTo state before redirection to login
20+
if ($scope.returnTo && $scope.returnTo.state) {
21+
$state.go(
22+
$scope.returnTo.state.name,
23+
$scope.returnTo.params
24+
);
25+
// maintain the inherited rootscope variable returnTo
26+
// but make the returnTo state of it null,
27+
// so it can be used again after a new login.
28+
$scope.returnTo.state = null;
29+
$scope.returnTo.params = null;
30+
return;
31+
}
32+
// or go to the default state after login
33+
$state.go('add-review');
34+
});
35+
};
36+
}])
37+
.controller('AuthLogoutController', ['$scope', 'AuthService', '$state',
38+
function($scope, AuthService, $state) {
39+
AuthService.logout()
40+
.then(function() {
41+
$state.go('all-reviews');
42+
});
43+
}])
44+
.controller('SignUpController', ['$scope', 'AuthService', '$state',
45+
function($scope, AuthService, $state) {
46+
$scope.user = {
47+
email: 'baz@qux.com',
48+
password: 'bazqux'
49+
};
50+
51+
$scope.register = function() {
52+
AuthService.register($scope.user.email, $scope.user.password)
53+
.then(function() {
54+
$state.transitionTo('sign-up-success');
55+
});
56+
};
57+
}]);

0 commit comments

Comments
 (0)