Skip to content

Commit 1f45679

Browse files
zafaralizafarali
committed
adds paragraphs on ng-animate
1 parent 91a1562 commit 1f45679

File tree

2 files changed

+131
-1
lines changed

2 files changed

+131
-1
lines changed

‎08-0-ngAnimate.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ngAnimate</title>
5+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
6+
<script src="https://code.angularjs.org/1.3.0-beta.11/angular-animate.min.js"></script>
7+
<script>
8+
var app = angular.module('myApp', ['ngAnimate']);
9+
10+
app.factory('phonebook', function(){
11+
return {
12+
people:[
13+
{name:'Jane', number:'5144440912'},
14+
{name:'John', number:'5144429101'},
15+
{name:'Bob', number:'1230091111'},
16+
{name:'Alice', number:'1233011122'}]
17+
}
18+
});
19+
20+
app.controller('PhoneCtrl', ['phonebook','$scope', function(phonebook, $scope){
21+
$scope.phonebook = phonebook;
22+
$scope.data = {searchQuery:'', checked:true, css:'special'};
23+
}]);
24+
</script>
25+
<style>
26+
/*Notification animations*/
27+
.notification{
28+
padding:10px;
29+
border:1px solid black;
30+
background-color: yellow;
31+
}
32+
.notification{
33+
-webkit-transition:all linear 0.5s;
34+
transition: all linear 0.5s;
35+
}
36+
.animate-show{opacity: 1;}
37+
.animate-show.ng-hide-add.ng-hide-add-active,
38+
.animate-show.ng-hide-remove.ng-hide-remove-active{
39+
-wekit-transition:all linear 0.5s;
40+
transition:all linear 0.5s;
41+
}
42+
.animate-show.ng-hide{opacity: 0;}
43+
44+
/*repeater animations*/
45+
.repeat-element{line-height: 20px;}
46+
.repeat-element.ng-move,
47+
.repeat-element.ng-enter,
48+
.repeat-element.ng-leave{
49+
-webkit-transition:all linear 0.5s;
50+
transition: all linear 0.5s;
51+
}
52+
.repeat-element.ng-leave.ng-leave-active,
53+
.repeat-element.ng-move,
54+
.repeat-element.ng-enter{
55+
opacity: 0;
56+
max-height: 0;
57+
}
58+
.repeat-element.ng-leave,
59+
.repeat-element.ng-move.ng-move-active,
60+
.repeat-element.ng-enter.ng-enter-active{
61+
opacity:1;
62+
max-height: 20px;
63+
}
64+
/*just to demonstrate when this class is activated*/
65+
.repeat-element.ng-enter.ng-enter-active{
66+
color:red;
67+
font-size: 2em;
68+
}
69+
70+
/*select animations at the bottom of the page*/
71+
.special-add, .special-remove{
72+
-webkit-transition:all linear 0.5s;
73+
transition:all linear 0.5s;
74+
}
75+
.special, .special-add.special-add-active{
76+
color:red;
77+
font-size: 3em;
78+
-webkit-transform:rotate(-180deg);
79+
transform:rotate(-180deg);
80+
}
81+
.special-remove.special-remove-active{
82+
font-size: 1em;
83+
color:black;
84+
-webkit-transform:rotate(180deg);
85+
transform:rotate(180deg);
86+
}
87+
</style>
88+
</head>
89+
<body ng-app="myApp">
90+
This page demonstrates ngAnimate.
91+
<br/>
92+
93+
<div ng-controller="PhoneCtrl">
94+
<input type="checkbox" ng-model="data.checked">Make visible
95+
<!--CASE 1-->
96+
<div ng-show="data.checked" class="notification animate-show">This is shown if true</div>
97+
<br />
98+
<div id="repeater">
99+
<input type="text" ng-model="data.searchQuery"><br />
100+
<!--CASE 2-->
101+
<div ng-repeat="person in phonebook.people | filter:data.searchQuery" class="repeat-element">
102+
{{person.name}} | {{person.number}}
103+
</div></div>
104+
<br />
105+
106+
<!--CASE 3-->
107+
<div id="select-animations">
108+
<button ng-click="data.cssvar='special'">Make Special</button> <button ng-click="data.cssvar=''">Clear Special</button><br />
109+
<span ng-class="data.cssvar">Animate me!</span>
110+
</div>
111+
</div>
112+
</body>
113+
</html>

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -414,4 +414,21 @@ Here are some methods:
414414
3. `path()` returns the path the app is currently at.
415415
4. `search()` allows us to get a key value pair for the queries passed in.
416416
5. `url()` returns the path and the query parameters.
417-
*Note that `path()`, `search()` and `url()` are also setters for the same property.
417+
*Note that `path()`, `search()` and `url()` are also setters for the same property.*
418+
419+
- [ ] To Do The Route Life Cycle
420+
421+
### Interesting things to know
422+
Here are a few things I felt like covering to give us a nice break from the very serious factory, provider, module, routing stuff we have been getting into
423+
#### `$resource`
424+
*This has a dependancy ngResource*
425+
The `$resource` is a wrapper for using an API. We create a resource by calling `$resource(url, parameters, actions, options)`
426+
1. **url** contains a parameterized version of the URL we are going to interact with. For example it can be: `http://www.myexample.com/data.json` or `http://www.myexample.com/api/user/:id`.
427+
2. **parameters** sets default parameters that we are going to pass into the object. From what I see the most likely use case is with the `@` parameter. This will be elaborated later.
428+
3. **options** Will be discussed later
429+
4. **actions** will be discussed later
430+
This makes our code easier to deal with by only dealing with objects and not with repeated instances of urls. We must note that `$resource` depends on `$http` which will be discussed shortly.
431+
432+
#### `ngAnimate`
433+
Animations in AngularJS require us to inject a special module known as `ngAnimate` which adds special classes to elements that can be animated in special ways. In [08-0-ngAnimate.html](https://github.com/zafarali/learning-angular/blob/master/08-0-ngAnimate.html) we see three separate cases of how these are done using CSS.
434+
The key thing to remember here is that while the animation is being executed (i.e the transitions and the animations), the class of the element will have `.ng-enter-active`.

0 commit comments

Comments
 (0)