diff --git a/README.md b/README.md index b5e156459..cccac5f95 100644 --- a/README.md +++ b/README.md @@ -44,18 +44,18 @@ To see the changes which between any two lessons use the git diff command. ### step-1 - We have converted the seed application by removing all of the boiler-plate code. -- We have added single static HTML file which shows a static list of phones. (we will convert this - static page into dynamic one with the help of angular) +- We have added a single static HTML file which shows a static list of phones. We will convert this + static page into dynamic one with the help of angular. ### step-2 - Converted static page into dynamic one by: - - create a root controller for the application + - creating a root controller for the application - extracting the data from HTML into a the controller as a mock dataset - - convert the static document into a template with the use of `ng:` [directive] (iterate over + - converting the static document into a template with the use of `ng:` [directive] (iterate over mock data using [ng:repeat] and render it into a view) -- Added unit test, which mostly shows how one goes about writing a unit test, rather then test +- Added a unit test, which mostly shows how one goes about writing a unit test, rather than test something of value on our mock dataset. @@ -212,7 +212,7 @@ info. version.txt --> version file unit/ --> unit level specs/tests controllersSpec.js --> specs for controllers - directivessSpec.js --> specs for directives + directivesSpec.js --> specs for directives filtersSpec.js --> specs for filters servicesSpec.js --> specs for services @@ -234,6 +234,6 @@ For more information on AngularJS please check out http://angularjs.org/ [node-generic]: https://github.com/joyent/node/wiki/Installation [java]: http://www.java.com [$resource]: http://docs.angularjs.org/#!angular.service.$resource -[$rouet]: http://docs.angularjs.org/#!angular.service.$route +[$route]: http://docs.angularjs.org/#!angular.service.$route [service]: http://docs.angularjs.org/#!angular.service [$xhr]: http://docs.angularjs.org/#!angular.service.$xhr diff --git a/app/css/animations.css b/app/css/animations.css new file mode 100644 index 000000000..46f3da6ec --- /dev/null +++ b/app/css/animations.css @@ -0,0 +1,97 @@ +/* + * animations css stylesheet + */ + +/* animate ngRepeat in phone listing */ + +.phone-listing.ng-enter, +.phone-listing.ng-leave, +.phone-listing.ng-move { + -webkit-transition: 0.5s linear all; + -moz-transition: 0.5s linear all; + -o-transition: 0.5s linear all; + transition: 0.5s linear all; +} + +.phone-listing.ng-enter, +.phone-listing.ng-move { + opacity: 0; + height: 0; + overflow: hidden; +} + +.phone-listing.ng-move.ng-move-active, +.phone-listing.ng-enter.ng-enter-active { + opacity: 1; + height: 120px; +} + +.phone-listing.ng-leave { + opacity: 1; + overflow: hidden; +} + +.phone-listing.ng-leave.ng-leave-active { + opacity: 0; + height: 0; + padding-top: 0; + padding-bottom: 0; +} + +/* cross fading between routes with ngView */ + +.view-container { + position: relative; +} + +.view-frame.ng-enter, +.view-frame.ng-leave { + background: white; + position: absolute; + top: 0; + left: 0; + right: 0; +} + +.view-frame.ng-enter { + -webkit-animation: 0.5s fade-in; + -moz-animation: 0.5s fade-in; + -o-animation: 0.5s fade-in; + animation: 0.5s fade-in; + z-index: 100; +} + +.view-frame.ng-leave { + -webkit-animation: 0.5s fade-out; + -moz-animation: 0.5s fade-out; + -o-animation: 0.5s fade-out; + animation: 0.5s fade-out; + z-index: 99; +} + +@keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} +@-moz-keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} +@-webkit-keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} +@-moz-keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} +@-webkit-keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} + diff --git a/app/css/app.css b/app/css/app.css index 8d3eae692..8e2ff4db1 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1 +1,92 @@ /* app css stylesheet */ + +body { + padding-top: 20px; +} + + +.phone-images { + width: 450px; + height: 450px; + overflow: hidden; + position: relative; + float: left; +} + +.phones { + list-style: none; +} + +.thumb { + float: left; + margin: -1em 1em 1.5em 0em; + padding-bottom: 1em; + height: 100px; + width: 100px; +} + +.phones li { + clear: both; + height: 100px; + padding-top: 15px; +} + +/** Detail View **/ +img.phone { + float: left; + margin-right: 3em; + margin-bottom: 2em; + background-color: white; + padding: 2em; + height: 400px; + width: 400px; +} + +ul.phone-thumbs { + margin: 0; + list-style: none; +} + +ul.phone-thumbs li { + border: 1px solid black; + display: inline-block; + margin: 1em; + background-color: white; +} + +ul.phone-thumbs img { + height: 100px; + width: 100px; + padding: 1em; +} + +ul.phone-thumbs img:hover { + cursor: pointer; +} + + +ul.specs { + clear: both; + margin: 0; + padding: 0; + list-style: none; +} + +ul.specs > li{ + display: inline-block; + width: 200px; + vertical-align: top; +} + +ul.specs > li > span{ + font-weight: bold; + font-size: 1.2em; +} + +ul.specs dt { + font-weight: bold; +} + +h1 { + border-bottom: 1px solid gray; +} diff --git a/app/index-async.html b/app/index-async.html index 42465d8a7..33f91986f 100644 --- a/app/index-async.html +++ b/app/index-async.html @@ -14,11 +14,11 @@ + + + + + + + + +
+ +