Monthly Archives: August 2013

AngularJS ngAnimate Transitions – Basic Demo

Hey everyone,

I’ve just starting using Angular and went to do a few animations. I had a bit of trouble trying to find anywhere that mentioned what each class does. This is the demo we’ll be making, it’s pretty basic but hopefully enough to get you started: JSFiddle Demo

Dummy Page
To start with, just create a new page with the following. Note that none of the stuff below applies to the animation itself, this is just so that we’ve got something to work with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html ng-app="">
	<head>
		<title>Test Animation</title>
		<link href='/css/styles.css' rel='stylesheet' type='text/css' />
	</head>
	<body>
		<div ng-controller='PeopleController'>
			<div>
				<input type='text' ng-model='name' placeholder='Name' /> <button ng-click='addPerson()'>Add</button>
			</div>
 
			<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'>
				{{person.name}}
			</div>			
		</div>
 
		<!-- Scripts -->
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js'></script>
		<script>
 
			//Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see
			function PeopleController($scope){
				$scope.name = "";
				$scope.people = [
					{ name: "Santa Clause"},
					{ name: "Easter Bunny"},
					{ name: "Tooth Fairy"},
					{ name: "Chris Owens"},
					{ name: "Phillip Farnsworth"},
					{ name: "Clark Kent"},
					{ name: "Lana Lang"}				
				];
 
				$scope.removePerson = function(row){
					$scope.people.splice(row, 1);					
				}
 
				$scope.addPerson = function(){
					$scope.people.push({name: $scope.name});
					$scope.name = "";
				}
			}
		</script>
	</body>
</html>

Adding the ng-animate Directive
The first step to adding the transitions is to add the ng-animate directive:

<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'  ng-animate="'person'">
     {{person.name}}
</div>

Classes for Adding a New Element
Now we’re going to add the styles that are used when a new element is added to the page. To start with, you’ll want to create .person-enter. This is the class that will be animated from. In this instance we want new elements to start off invisible so we’ll set the opacity to 0.

1
2
3
4
5
6
7
8
.person-enter{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 0;
}

Next we’ll want to add the styles for .person-enter.person-enter-active. These will be the styles that we want to animate to. Because we’re going from invisible to visible we’ll adjust the opacity:

.person-enter.person-enter-active{
	opacity: 1;
}

Classes for Removing an Element
Now we’ll add the class to animate from. This will the opposite of what we used when adding an element – start visible, go to invisble:

.person-leave{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 1;
}

And finally the class to animate to when an element is removed:

.person-leave.person-leave-active{
	opacity: 0;
}

All Together Now
Finally we can put the whole thing together. The people boxes should now fade out and in whenever an element is added or removed. You can see it in action here: JSFiddle Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html ng-app="">
	<head>
		<title>Test Animation</title>
		<link href='/css/styles.css' rel='stylesheet' type='text/css' />
 
		<style>
			.person{
				padding: 20px;
				width: 50px;
				height: 50px;
				background-color: #E8FCE4;
				border: 1px solid #C0E2BB;
				float: left;
				margin: 5px;
				text-align: center;
				box-shadow: 2px 2px 2px #DAD3D3;
				text-shadow: 0px -1px 1px #FFF;
				cursor: pointer;
			}
 
 
			/*
				Note: you can condense these, however they've been split to make the explanation a little easier to follow;
			*/
 
			/* This is the class that will be animated *FROM* when a new person is added */
			.person-enter{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 0;
			}
 
			/* This is the class that will be animated *TO* when a new person is added */
			.person-enter.person-enter-active{
				opacity: 1;
			}
 
 
			/* This is the class that will be animated *FROM* when a person is removed */
			.person-leave{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 1;
			}
 
			/* This is the class that will be animated *TO* when a person is removed */
			.person-leave.person-leave-active{
				opacity: 0;
			}
 
 
		</style>
	</head>
	<body>
		<div ng-controller='PeopleController'>
			<div>
				<input type='text' ng-model='name' placeholder='Name' /> <button ng-click='addPerson()'>Add</button>
			</div>
 
			<div ng-repeat="person in people" class='person' ng-click='removePerson($index)'  ng-animate="'person'">
				{{person.name}}
			</div>			
		</div>
 
		<!-- Scripts -->
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js'></script>
		<script>
 
			//Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see
			function PeopleController($scope){
				$scope.name = "";
				$scope.people = [
					{ name: "Santa Clause"},
					{ name: "Easter Bunny"},
					{ name: "Tooth Fairy"},
					{ name: "Chris Owens"},
					{ name: "Phillip Farnsworth"},
					{ name: "Clark Kent"},
					{ name: "Lana Lang"}				
				];
 
				$scope.removePerson = function(row){
					$scope.people.splice(row, 1);					
				}
 
				$scope.addPerson = function(){
					$scope.people.push({name: $scope.name});
					$scope.name = "";
				}
			}
		</script>
	</body>
</html>

Problems
If you’re having issues, one of the first things to check is that you’re on the right version of angular. There have been a lot of changes and many of the styles used in one this version don’t seem to work in the older ones. If there’s anything else that’s not working let me know!

Where to From Here?
There’s heaps more that nganimate can do, make sure you checkout http://www.nganimate.org/.

Chrome Incognito Mode not Working – Registry Fix

Hey everyone,

I use incognito mode at work as a quick test for cookie/caching issues. I ran into a bit of an issue with it this morning after an MOE update yesterday. Using the shortcut (ctrl + shift + n) did nothing, and the tools option showed incognito mode greyed out.

After a bit of Googling I came across a registry value that had been added to prevent incognito mode. The fix for this is pretty simple, just remove the value. There are a few variations on this so you may have to do a bit of digging to find which one has been added to your machine (Run > regedit or C:\Windows\regedit.exe).

One additonal note, my unwanted registry key was added during the login process each time I removed it. A quick way around this is to do up a quick batch script to remove it. Just modify my one below to include your registry key and throw it in your startup folder:

reg delete HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome /v IncognitoModeAvailability /f

Cannot set property ‘show’ of undefined at new DeathrayMenuController – AngularJS

Hey everyone,

I’ve just started working my way through AngularJS by Brad Green & Shyam Seshadri. Unfortunately I ran into a bit of an issue on page 23 (line 19):

TypeError: Cannot set property 'show' of undefined
    at new DeathrayMenuController (http://127.0.0.1/:18:27)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:174)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:304)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:239)
    at $get.g (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) 

The solution to this problem turned out to be pretty straight forward, just set the menu state in a similar fashion to that used in the previous exercises:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html ng-app=''>
	<head>
		<title>Your Shopping Cart</title>
	</head>
	<body>
 
		<div ng-controller="DeathrayMenuController">
			<button ng-click='toggleMenu()'>Toggle Menu</button>
			<ul ng-show='menuState.show'>
				<li ng-click='stun()'>Stun</li>
				<li ng-click='disintergrate()'>Disintergrate</li>
				<li ng-click='erase()'>Erase</li>
			</ul>
		</div>
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
		<script>
			function DeathrayMenuController($scope){
				/*$scope.menuState.show = false; //Switch this line with the one below
				$scope.menuState = {show: false}; 
 
				$scope.toggleMenu = function(){
					$scope.menuState.show = !$scope.menuState.show;
				}
 
				$scope.erase = function(){
					window.alert('erased');
				}
 
				$scope.disintergrate = function(){
					window.alert('Disintergrated');
				}
 
				$scope.stun = function(){
					window.alert('Stunned');
				}
			}
		</script>
		<!--<script type='text/javascript' src='controllers.js'></script>-->	
	</body>
</html>

wget or curl on Windows

Hey everyone,

Just a quick post on a Window’s equivalent to wget/curl.

To start, you’ll need to open PowerShell (run > powershell.exe). To retrieve the page, you’ll just need to enter the following one liner:

(new-object System.Net.WebClient).DownloadFile('http://www.whatibroke.com','C:\my_output_file.txt')

The page contents will be stored in the output file provided as the second parameter to DownloadFile. To view it, just open the file in a text editor.

If you’d rather something with a GUI, winwget has been recommended on SuperUser.