8:00 – 6:00 SR
- DB Backups
- For irev: http://rhrealitycheck.org/article/2014/08/12/twitterfail-twitters-refusal-handle-online-stalkers-abusers-haters/
- Tentatively building an Angular QueryBuilder app for direct cite/reimbursable. Anyone with a RA account would have access.
- Angular
- First important lesson for the day: Use ng-if rather than ng-show/ng-hide. The former attaches and removes items from the DOM more in style with the other Angular directives, and ng-if behaves MUCH BETTER with animations. Treat
ng-showas deprecated.
- First important lesson for the day: Use ng-if rather than ng-show/ng-hide. The former attaches and removes items from the DOM more in style with the other Angular directives, and ng-if behaves MUCH BETTER with animations. Treat
| Directive | Supported animations |
| ngRepeat | Enter, leave, and move |
| ngView | Enter and leave |
| ngInclude | Enter and leave |
| ngSwitch | Enter and leave |
| ngIf | Enter and leave |
| ngClass | Add and remove |
| Add and remove | |
| form and ngModel | Add and remove |
| ngMessages | Add and remove |
| ngMessage | Enter and leave |
A better ng-class example (here in plunker):
The CSS classes. Note that the ‘base-class’ contains the animation timings:
.base-class {
width: 200px;
height: 50px;
text-align: center;
margin: 10px;
padding: 10px;
-webkit-transition: background-color 1s, color 1s, border-color 1s;
transition: background-color 1s, color 1s, border-color 1s;
}
.base-class.whiteBackground {
background-color: white;
color: black;
border: 3px solid black;
}
.base-class.blackBackground {
background-color: black;
color: white;
border: 3px solid white;
}
.base-class.greenBackground {
background-color: green;
color: yellow;
border: 3px solid yellow;
}
.base-class.blueBackground {
background-color: blue;
color: magenta;
border: 3px solid magenta;
}
.base-class.redBackground {
background-color: red;
color: cyan;
border: 3px solid cyan;
}
The Angular code that cycles through the classes:
<body>
<link href="ngClassSample.css" rel="stylesheet" />
<div ng-controller="MyApp as ma">
<h1>ngClass Animation</h1>
<div>
<button ng-click="ma.doToggle()">Next !</button>
<div class="base-class" ng-class="ma.getAnimationClass()">
This is the 'ugly sweater' of css animations
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('MyApp', [function(){
var self = this;
var classArray = ['', 'blackBackground', 'whiteBackground', 'greenBackground', 'blueBackground', 'redBackground'];
self.toggle = 0;
self.doToggle = function(){
self.toggle++;
}
self.getAnimationClass = function(){
var index = self.toggle%classArray.length;
return classArray[index];
}
}]);
</script>
</body>
viztales 