I wrote some angular app and I would appreciate a rating of my code and tips from some awesome guys. I already use a directive and service in my code to provide more functionality, but failed to use design pattern like observer or IIFE (can you describe IIFE as an design pattern? Not sure) and a bunch of other maybe useful practices when writing javascript. I myself am not satisfied with this code, but I tried. Thanks if you take your time to look at this plnkr and write what you think.
Hey, this is the plnkr http://ift.tt/1RtAOLT
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/198QQJG"></script>
<script data-require="angular-animate@*" data-semver="1.4.3" src="http://ift.tt/1RtAMUc"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="http://ift.tt/1E2nZQG"></script>
<script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="mainController.js"></script>
<script src="userDirective.js"></script>
<script src="userService.js"></script>
</head>
<body ng-app="PixClixApp" ng-controller="MainController as ctrl">
<div class="wrapper-content">
<div ng-userdata=""></div>
</div>
</body>
</html>
app.js
var pixclixapp = angular.module('PixClixApp', ['ui.router', 'ngAnimate']);
pixclixapp.constant('BASE_URL', '/').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 'BASE_URL', function($stateProvider, $urlRouterProvider, $locationProvider, BASE_URL) {
$urlRouterProvider.otherwise(BASE_URL);
$stateProvider
.state(BASE_URL, {
url: BASE_URL,
templateUrl: 'index.html',
controller: 'MainController',
conrollerAs: 'ctrl',
});
}]);
mainController.js
// MAIN CONTROLLER
pixclixapp.controller('MainController', ['$scope', 'BASE_URL', '$interval', 'userService', function MainController($scope, BASE_URL, $interval, userService) {
var ctrl = this;
console.log("INFO: mainController loaded");
ctrl.init = function() {
userService.loopThroughUserData();
};
ctrl.init();
}]);
module userDirective.js
pixclixapp.directive('ngUserdata', ['$rootScope', '$timeout', 'userService', function($rootScope, $timeout, userService) {
return {
restrict: 'A',
replace: 'true',
templateUrl: 'userTemplate.html',
scope: true,
link: function(scope, element, attr) {
scope.currentUser = {};
scope.init = true;
function slideRight(time) {
$(element).addClass('slideInRight');
$timeout(function() {
$(element).removeClass('slideInRight');
slideLeft(1000);
}, time);
}
function slideLeft(time) {
$(element).addClass('slideOutLeft');
$timeout(function() {
$(element).removeClass('slideOutLeft');
}, time);
}
scope.$watch(
function() {
return userService.getCurrentUser();
},
function(newValue, oldValue) {
if (newValue !== oldValue) {
scope.init = false;
scope.currentUser = userService.getCurrentUser();
console.log(scope.currentUser.username);
slideRight(1000);
}
}
);
},
};
}]);
userService.js
pixclixapp.service('userService', ['$rootScope', '$interval', function($rootScope, $interval) {
var service = this;
service.allUserData = [{
username: "Michael",
password: "1",
age: 21,
}, {
username: "Lars",
password: "2",
age: 31,
}, {
username: "Bohennen",
password: "3",
age: 41,
}, {
username: "Dundie",
password: "4",
age: 15,
}, {
username: "Spock",
password: "5",
age: 64,
}];
service.currentUser = {};
service.loopThroughUserData = function loopThroughUserData() {
service.iterator = 0;
$interval(function() {
if (service.iterator >= (service.allUserData.length - 1)) {
service.iterator = 0;
} else {
service.iterator++;
}
}, 2000);
$rootScope.$watch(
function() {
return service.allUserData[service.iterator];
},
function(newValue, oldValue) {
if (newValue !== oldValue) {
service.currentUser = service.allUserData[service.iterator];
}
}
);
};
service.getAllUser = function() {
return service.allUserData;
};
service.setCurrentUser = function(currentUser) {
service.currentUser = currentUser;
};
service.getCurrentUser = function() {
return service.currentUser;
};
}]);
userTemplate.html
<div ng-hide="init" class="wrapper-content-userdata">
<p> username: {{ currentUser.username }} </p>
<p> password: {{ currentUser.password }}</p>
<p> age : {{ currentUser.age }}</p>
</div>
style.css
/* Styles go here */
.wrapper-content-userdata {
display: block;
background-color: darkgrey;
width: 80%;
height: 180px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
font-family: monospace;
font-size: 24px;
font-weight: bold;
}
/* Animations */
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(120%, 0, 0);
transform: translate3d(120%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(120%, 0, 0);
transform: translate3d(120%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
-moz-animation-name: slideInRight;
animation-name: slideInRight;
animation-duration: 1s;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-120%, 0, 0);
transform: translate3d(-120%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-120%, 0, 0);
transform: translate3d(-120%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
-moz-animation-name: slideOutLeft;
animation-name: slideOutLeft;
animation-duration: 1s;
}
Aucun commentaire:
Enregistrer un commentaire