Build an awesome re-usable Angular.js directive for your web projects!

Preflight Checklist

Ensure you're ready to code!
Ensure that you have the tools you will need to code. This may sound like a no brainer, but I need to make sure before we go any farther.

Introducing Angular.js

Look at the Angular.js Website
Ensure that you've familiarized yourself with Angular.js by visiting its website at http://angularjs.org

Be sure to check out some things people have built using Angular.js at http://builtwith.angularjs.org
Look at Available Modules
Look at the available modules that people have already built for Angular.js!

http://ngmodules.org

Getting Angular.js

Setup a web page with Angular.js
You can setup a brand new web page from scratch or use the companion code that I've included. Ensure that you have encluded the Angular.js JavaScript file from either a local source or from Google's CDN.
Bootstrap Angular.js
Ensure that you've bootstrapped Angular.js using one of the two methods described in the video.

Directives - Overview

Review the Companion Code
Look over the companion code or some other examples of directives that you may have found on the internet. Analyze their structure and look at how they are defined.

Directives - Scope

Create a directive with scope: true
Go ahead and create a simple directive (or modify the one in the companion code) with a scope value of true.
Define Some Attributes
Define some attributes when calling the directive from your HTML code and bring them into your directive scope in the JavaScript by assigning $scope variables to the $attrs.
Use the Scope
Use the $scope variables that you just defined in some way. You can either log them to your console or use display them on the page using the directive's template.
Now define an object for the "scope" property.
Now that you've tried using "true" for the directive scope, take a shot at using an object. This method is a little more complicated, but provides for a lot of flexibility. Be sure to watch the lesson video on this.

Directives - Templates

Add an inline template to your directive
If you haven't done so already, define some HTML in your directive's "template" property.
Try an external template
Now try using "templateUrl" instead in order to load the template from an external file.

Directives - Controllers

Include a controller
Include a controller in your directive and access some property from it to test out how that works.

Directives - Other Settings & Final Notes

Experiment!
Experiment a bit with some of the settings and be sure to reference the Angular.js documentation now that you have a better understanding how directives are put together.
Share your directive!
Be sure to share your directive with us in the gallery. Note that you will need some web hosting in order to do this. If you want, you can always host your example on GitHub pages.

Additional Resources

GitHub

As a developer, you really should be using this. Or at least some other method of revision control.
Sandbox Application

This GitHub repository is great to fork and use to get up to speed in no time at all. By utilizing GitHub Pages, you can even get some free hosting for your work while you're learning. If you don't have a code editor on your machine, also not to worry! GitHub allows you to edit through your web browser (and so does Cloud9IDE - see other link).

This is probably the fastest and most hands off approach that you can take to getting a development environment up and running.
Cloud9IDE

If you don't have an IDE or way to edit code locally (or don't want to), you can use this IDE through your web browser! I suggest signing in using your GitHub account so you can easily work with your code repositories.
Koding

Koding is another online IDE that's perhaps better than Cloud9IDE because they actually give you a virtual machine (web server) all ready to go! So you could, in a matter of minutes, be up and developing with a full on dev site to preview your work.

It is currently in private beta, but see if you can get an invite by going to their site. It is truly an amazing way to work - ESPECIALLY for learning and experimenting.

You will be able to install their GitHub app, browse for my user "tmaiaroto" and scroll down until you find the "sandbox" project. Clone that, then move it to your "Web" directory and you'll be able to load it up in another web browser window/tab. Hands down, probably the fastest way to get going.
Web Hosting: DigitalOcean

You shouldn't have a need to pay for a space to put your files while building...However, you may wish to host your completed project somewhere reliable. DigitalOcean is a very reliable and affordable hosting solution.
Angular.js documentation.

While this reference covers many elements of Angular, it can be confusing at times (especially before you wrap your head around how it all works from a higher level). I still highly recommend using it as excellent reference material.

http://docs.angularjs.org/api
Built With Angular
NGModules
Some free places to host your code.

http://plnkr.co

Plunker is excellent for showing off some JavaScript and is already full of Angular.js demos and examples.

http://jsfiddle.net

Another great place to share some of your HTML/JavaScript/CSS examples and experiments.

http://tmaiaroto.github.io/sandbox/
http://pages.github.com

GitHub will also get the job done in a clever fashion if you're familiar with Git. If not, no worries, you can fork my "sandbox" repository and add and edit files through your web browser. I will briefly go over this in my videos. With GitHub pages, you then can show off what you've built!

https://www.nitrous.io

If you're looking for something a little more robust you can always use this awesome collaborative web base IDE and development environment. Note that you will need to know some back-end development to get this up and going.

http://www.atspace.com

If you're looking for a more traditional web hosting service, but don't want to pay anything for it, you can give these guys a try.

http://www.rackspace.com

If you don't have a web hosting service and are ready to buy it, I can't express how much I love Rackspace for web hosting.
Google CDN Hosted Angular.js

You can simply include Angular.js in your projects, without even downloading it, by using Google's hosted version.
Tutorial Companion Code

I created some example code for you to reference and use to experiment with and learn. It's available in my Sandbox repository, but you can load the site up in your web browser for reference as well.

You can also review the code on GitHub.
http://angular-ui.github.io/ui-utils

Angular UI Utilities includes a bunch of great directives to use in your projects.
Angular Document for Directives

This is quite lengthy and can be a bit confusing. I'll go over the basic components of a directive in the video lessons...But for your reference, you can check this out.
Angular Templates Documentation

Nathan Sepulveda

6

7