What is an angularjs directive

     At times Angular can be very confusing, particularly those of us who come from a background of 'old school' javascript. Gone are the days of a bunch of functions. Now we have things like controllers, services/factories and directives, still functions just with added layers of complexity. Finding clear definitions and understandings of what each element is for can be difficult to find on the AngularJS website. Many of the tutorials online are dated back to Version 1.2, in other words, out dated. I was looking for an accurate definition of what  a Directive is as it pertains to AngularJS and found this excellent definition on stackoverflow. I have quoted and posted a link to the original post below that. Hopefully this will help some of the newcomers to AngularJS.


______________________________________________

What is an AngularJS Directive? 

What it is (see the clear definition of jQuery as an example)?

A directive is essentially a function^† that executes when the Angular compiler finds it in the DOM. The function(s) can do almost anything, which is why I think it is rather difficult to define what a directive is. Each directive has a name (like ng-repeat, tabs, make-up-your-own) and each directive determines where it can be used: element, attribute, class, in a comment.

^† A directive normally only has a (post)link function. A complicated directive could have a compile function, a pre-link function, and a post-link function.

What practical problems and situations is it intended to address?

    The most powerful thing directives can do is extend HTML. Your extensions are a Domain Specific Language (DSL) for building your application. E.g., if your application runs an online shopping site, you can extend HTML to have "shopping-cart", "coupon", "specials", etc. directives -- whatever words or objects or concepts are more natural to use within the "online shopping" domain, rather than "div"s and "span"s (as @WTK already mentioned).
Directives can also componentize HTML -- group a bunch of HTML into some reusable component. If you find yourself using ng-include to pull in lots of HTML, it is probably time to refactor into directives.

What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs

Directives are where you manipulate the DOM and catch DOM events. This is why the directive's compile and link functions both receive the "element" as an argument.

You can

• define a bunch of HTML (i.e., a template) to replace the directive

• bind events to this element (or its children)

• add/remove a class

• change the text() value

• watch for changes to attributes defined in the same element (actually it is the attributes' values that are watched -- these are scope properties, hence the directive watches the "model" for changes)

• etc.

---

In HTML we have things like <a href="...">, <img src="...">, <br>, <table><tr><th>. How would you describe what a, href, img, src, br, table, tr, and th are? That's what a directive is.

Source: http://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive/13898058#13898058

The Way of Angular

    Angular is a phenomenal javascript framework created by Google which makes the lives of us javascript developers easier...

Features:

• Extends HTML with new attributes

• Ideal for SPA (Single Page Applications)

• Easy to learn

or, so I've been told...

   ...follow along as I explore some
of the core concepts of Angular.

---

Core Concept:

   MVC or MV*

(Model - View - Control   or  Model - View Whatever)

MVC stands for Model, View, Controller, 

a proven approach to organizing application code 

Model: That's the data; the business information of the application.
View: The HTML and presentation of the data. That's what the user sees and interacts with.
Controller: The connector that makes all the different pieces of our application work together. 

Angular likes to use MV* techniques, where the * stands for 'whatever' (often refered to as MVW). In other words, the Controller part is different to usual

---

Components of Angular:

Scopes & Directives:

One of the most fundamental parts of Angular is scopes. 
   
Scopes Explained - 

Scopes hold your Models (that's your data), 
    they cooperate with your Controllers, 
           and they give the Views everything they need (that's what the user sees and interacts with). 

     The first scope we'll need is the application scope, that's the scope your Angular application can operate in. This is set up in our HTML using the ng-app attribute.

Example: <html ng-app="myApp">

The name of our app is "myApp". 

The second scope is ng-controller; 
this will determine where our controller can operate. There can be multiple controllers within our application. Each controller will have its own scope. 

<div ng-controller="thisCtrl">

     <!-- anything in here is within thisCtrl scope -->

</div>

Both ng-app and ng-controller, are Angular directives. 
Think of an Angular directive as something that allows you to extend your HTML. 


To be continued......


Resources:

- Angular: https://angularjs.org/
- AngularJS Tutorial by Thinkful: http://www.thinkful.com/learn/angularjs-tutorial-build-a-gmail-clone/#Setup-Scopes-and-Directives

The Beginnings or the Way of a Web Developer

The beginnings... 

      I started my computer adventure with a Ti99a and a Trash80 more commonly called a Radio Shack TRS80. After that short lived adventure where I learned to program in BASIC, I was given an Apple II plus. With that I graduated to an Apple GS, opting it over the Mac. There ended my adventure with the Apples as I was convinced to get a DOS based 486 where upon delving into machine language, assembly and of course BASIC. Along with that was the modem wars with the ever pursuit of faster speeds moving from 300 baud working my way up to 56k, lightning speed! And the BBS’s!, lots of fond memories with those…then evolving to AOL. DOS died eventually to be replaced by Windows pc’s where I was mostly a gamer not really desiring to become a progammer. I was a hardware and Windows OS guy though, always the one being called to help with fixing the families and friends pc’s. So after spending many years working in the pizza delivery business I finally realized that I wanted to make a living with computers.

 The Way of a Web Developer... 

      I looked around and said, “I want to be a web developer.” Since then I have self-educated myself with the skills of being a web developer as I evolved acquiring the skills necessary to finally become an HTML5 developer. After a couple of companies and many freelance projects I have arrived at Mobiquity, Inc. Where I believe I have finally found a company I can believe in and who believes in me to achieve my desire to be a mobile app developer using HTML5.