Web.Designer.Advanced.Angular-P2P

• The transition property is great to add efficient animation transitions to your UI. It is
also really quick to experiment with
• When using opacity to hide HTML elements the browser will still behave as if they are
there. This can block click events on lower elements
•Incorporating z-index into the CSS transition gives you more control over the hidden
element. Chaining transitions can be really useful
• Try visiting css3gen.com/box-shadow. It is a great tool for creating box shadows as
well as a host of other CSS3 effects
File separation of
your application
The folder structure within this
tutorial may seem excessive,
but when integrated with a larger
application, a well-defined structure
makes maintenance and
extension very easy
to manage.
directive is bound to, and any attribute on that element. Then reference your
new ‘title’ property and set in the scope within your directive Template.
001 scope: {
002 title: "=myTitle"
003 },
004 controller: function($scope, $element, $attrs){
005 }
006 //scripts/directives/templates/gallery.html
007 {{title}}
008
09
Add some images
Now the structure of the application is set up you can add some
images. Add image files (both full size and thumbnail) to an images folder. Then
create a JSON object within your ‘galleryModule.js’ file, include both the main
and thumbnail paths to each image, along with a short description. This data
could be generated from a web service provided by a CMS platform.
10
Pass your images to your directive
Now use the same technique as with the ‘galleryTitle’ property to pass
the images array to your directive, using a new attribute named ‘data-myimages’.
Extend the scope of your directive to set these images and make
them available to your gallery.
001
002
003
004 //scripts/directives/galleryDirective.js
005 scope: {
006 title: "=myTitle",
007 images: "=myImages"
008 }