AngularJS Directives/Components by Mark Qian:

• Coolshare Virtual Traveler: Virtually travel anywhere!


• HTML Controller: "No javascript!" Yes, you can do your client logic within HTML!


• ChatSpeak: A multi-media chat component where you can chat with text, speech and video


• RoutedTab: A routing ready tab - come to see how much better than the tabs in Boostrap!! The Design Behind


• YoutubeSearcher: A handy youtube gadget where you can search and play.


• TextSpeak: Turning text into speech on any type of DOM components. The Design Behind
  
  
• MediaDetailer: Present detail in text, speech, audio and video.


• ActionLink: A HTML level controller: a easy way to glue DOM components without javascript coding! The Design Behind


• DomFun:Just for fun!


• ReadingBug:Bugs that can discover links in your pages

1. HTMLController
Description:

The directive allows you to do your logic with in HTML. You can build relationship among DOM components using either connection or pub/sub. The logic can be specified widthin a "HTMLController" tag or add them as attributes in involved DOM components.

Dependency:

• jquery.min.js
• angular.min.js

Usage: Simply add an attribute, "html-Controller", in the body tag. Then you can speicify your logic with in a "HTMLController" tag (See an example below) or add control logic to the involved DOM components.

Demo: Try it here


2. ChatSpeak
Description:

The directive provides an easy way to embed a chat in your web page and it can "speaks" out the chat content too! It also allows you to post chat video from You Tube

Dependency:

• jquery.min.js
• angular.min.js
• a Backend Node.js web server that fetches url of mp3 from google
• a Backend Node.js socket/chat server that ordinate the chatting

Usage: The restriction is AEC. For example, just add "chat-speak" as an attribute and assign it a room ID as following

<div chat-speak="RoomA"></div>,



where "RoomA" is the room ID which is used by chat server to tell where to deliver chat messages.
With the room id, you can place "rooms" on any page (different pages or the same page).
Two chatSpeaks can "see" each other as long as their room ID are the same.

Demo: Try it here


3. RoutedTab
Description:

A custom tabs component with route ready for templates and controllers: no more manually routing - everything is done within the html tags!

Dependency:

• jquery.min.js
• angular.min.js
• angular-ui-router.js
Usage:

1). Just insert a "Routed-Tab" tag;

							<Routed-Tab>
								<tab name = "main">
									<tabheader>
										<title>Main Page</title>
									</tabheader>
									<tabbody>
										<url>/main</url>
										<templateUrl>views/Main.htm</templateUrl>
										<controller>MainController</controller>
									</tabbody>
								</tab>
								<tab name="page1">
									<tabheader>
										<title>Page 1</title>
									</tabheader>
									<tabbody>
										<url>/page1</url>
										<templateUrl>views/Page1.htm</templateUrl>
										<controller>Page1Controller</controller>
									</tabbody>
								</tab>
							</Routed-Tab>		
					

2). include "RoutedTab.js";

							<script src="RoutedTab.js"></script>
					

3). import "Coolshare" module.

							angular.module('app', ['ui.router', 'Coolshare'])
					




Demo: Try it here


4. ActionLink
Description:

The directive can be used to control other DOM components. It can be used as a "html level controller". See how it "glues" ChatSpeak and YoutubeSearcher

Dependency:

• jquery.min.js
• angular.min.js

Usage: Just add attribute "action-Link" to any DOM component and assign a control command to attribute "action-Link".
A command consists of a series fields divided by "|": [targetId]|[action]|[additionalValue]
Current following commands are supported:



• append - appends the text of this element to the target element's original text. For example, <p active-Link="InputA|append">Text to be appened</p>. This will insert text "Text to be appened" to the end of "InputA"'s content
• prepend - prepends the text of this element to the target element's original text. For example, <p active-Link="InputA|prepend">Text to be prepend</p>. This will insert text "Text to be prepend" to the beginning of "InputA"'s content
• replace - replaces the text of this element to the target element's original text. For example, <p active-Link="InputA|replace">Text to be replace</p>. This will place text "Text to be replace" to replace of "InputA"'s content
• selectValue - selects the text of this element as option value on the target element (a select tag). For example, <p active-Link="SelectA|selectValue">California</p>. This will select the option with value as "California". You can specify a third field for value to match instead of using the text of current element.
• selectLabel - selects the text of this element as option label on the target element (a select tag). For example, <p active-Link="SelectA|selectLabel">California</p>. This will select the option with label as "California". You can specify a third field for label to match instead of using the text of current element.
• addOption - add an option to a select element. For example, <p active-Link="SelectA|addOption|Florida">State of Florida</p>. This will add an option with "Florida" as value and "State of Florida" as label. You can also specify label as the forth field.

Multiple actions can be chained into a single action link. For example,

<span action-Link="inputA|replace,alertInput|click">Place me into the input field and alert</span>

will first replace the content in inputA with "Place me into the input field and alert" and then do a click at element "alertInout".

The third field is used the "specified source value" meaning the ActionLink will use the content in this field instead of the content in current element in case the third field is not empty.

For example, <div action-Link="input_chatSpeak0|replace|IM1vss7FXs8">Florida</div>

will use "IM1vss7FXs8" to replace content of element with id "input_chatSpeak0" instead of using "Florida"

The forth field is used the "specified source id" meaning the ActionLink will use the content as the id to find "the source value element". Then it will use the content of "the source value element" instead of the content in current element in case the forth field is not empty.

For example, <div action-Link="input_chatSpeak0|replace||vimg_YoutubeSearcher0">Florida</div>

will use the content of element with id as "vimg_YoutubeSearcher0" to replace content of element with id "input_chatSpeak0" instead of using "Florida"



Demo: Try it here


5. YoutubeSearcher
Description:

The directive allows users to search Youtube and play the results

Dependency:

• jquery.min.js
• angular.min.js
• Node.js Server - Server is basically for JSON-P and hiding Google API ID

Usage: Just add a "youtube-Searcher" tag anywhere on your page. Supported attributes:


• play - the selected video will be played if set to true, otherwise nothing happen after selection. In some case, you may not want to set it to true. Here is one example in ChatSpeak
• autostart - The value of attribute "autostart" will be used as a starting criteria so that a search result is ready initially.

The directive also store selected title in to a hidden field with id vtitle_[DirectiveId] and selected thumbnail image url in vimg_[DirectiveId] to make integration with other directives easier.


Demo: Try it here


6. TextSpeak
Description:

The directive "speaks" the content of target DOM element as users mouse over those DOM elements with "text-Speak" attribute.

Dependency:

• jquery.min.js
• angular.min.js
• a Backend Node.js web server that fetches url of mp3 from google

Usage: The restriction is AEC. Simply add an attribute into any HTML tag to speak the content in the tag. For example,

<select text-Speak>

or <p text-Speak>



as a speaker icon indicates the following block/component is speech enabled.

Demo: Try it here


7. MediaDetailer
Description:

The directive can be used to show more details and it can also "speaks" out the details too! The details it can display include text, audio and video. One very useful feature is that you can use any DOM component as the "detail" by setting the id of the DOM component to "mediaDetailer_XXX", where "XXX" is the id of header/anchor component.

Dependency:

• jquery.min.js
• angular.min.js
• a Backend Node.js web server that fetches url of mp3 from google

Usage: The restriction is AEC. For example, just add "media-Detailer" to a text container element such as p or div. Then inside the container element,
place a div with class as "mediaDetailDiv" containing the details you like to show. You can do something with the attribute "media-Detailer":


• Assign nothing to it - this setting will show a "Show Details" button and the details will be displayed as it is clicked.
• Assign "SpeechOn" to it - this setting will show a "Show Details" button and the details will be displayed and the content of details will be speaked out as it is clicked.
• Assign "SpeechOn|textOff" to it - this setting will show a "Listen to Details" button and nothing will be displayed but the content of details will be speaked out as it is clicked.
• Assign "SpeechOn|textOff" to it and point to a audio url - this setting will show a "Listen to Details" button and nothing will be displayed but assigned url will be played out as it is clicked.
• Assign "SpeechOn|textOff" to it and point to a video url - this setting will show a "Show to Video" button and nothing will be displayed but assigned video url will be played out as it is clicked. The video attribute contains two parts: the first part is a video type (mp4 or youtube) and the other part is the url of video. "|" is used to separate those two parts.
• Assign "noButton" to remove the "Show Details" button
• Assign "hoverShow" to show detail as mouse hover the header
• Assign "underline" to set underline to the header
• Assign "moveDetail" to move the DOM as detail to popup instead of cloning it

You can also change the button label using attribute "detailLabel" like

<div media-Detailer="speechOn|textOff" detailLabel="Answer"> [Your header Text]

<div class="mediaDetailerDiv">[Your Detail Text]</div>
</div> The directive also have two hidden fields, vtitle_[DirectiveId] and vimg_[DirectiveId]. The chat will use the content store in these two field as additional info (the title and thumbnail image) to be broadcasted. This is specially useful as you want to integrate ChatSpeak with other directives.

Demo: Try it here

8. DomFun
Description: Animation sometimes is the best way to catch visitor's attention. This directive provides a variety of text animation.

Dependency:

• jquery.min.js
• angular.min.js

Usage: Just add attribute "dom-Fun" to a div containing the text to be animated.
The content of "dom-Fun" can be a "json" like string: <div dom-Fun="{'action':'wave','trigger':'mousemove','parseTo':'char'}">



• action - this field could be one of following: float, wave
• trigger - events that trigger the animation. This field can container more than one events divided by comma. For example, 'trigger':'click,keydown'
• parseTo - parse level: char or word



Demo: Try it here



































The Problem:

So far (by 4/2015) UI Bootstrap provides a extremely simple tab component (ui.bootstrap.tabs) without built-in routing. You need to include the content of tab within the "tab" tags. Or do it yourself with ui-view. In order to get a tab work with your templates and controllers for your tab content area, you need to to wire a lot (routing and insert controllers).
Here is another approach as a directive but you still need to do a lot of coding "outside" the tab tags.

The problem is that we don't want to do any javascript wiring and don't want to embed content of tabs within the tabs in the main html either. We only want to assign the reference of template and controller for each tab inside main HTML.

The Solution:

The major reason that the Boostrap tabs directive can not deal with routing is that the link of directive is invoked after the cofiguration phase where the routing has to be done. Directives are a mean provided AngularJS to extand html (tag like tabs) but it faces a "chicken and egg" issue: Tags needs to exist before routing can be carried out but tags like "tabs" require setting up routing during during their construction.

Instead of building the tabs in directives, I break the "chicken and egg" relation by processing scanning and construction of tabs before the configuration phase so that the tabs elements can be routed in the phase.

The result is that all the configuration of the tabs including specifying templateUrls and controllers is done within the HTML tag "Routed-Tab". No coding/wiring/routing outside the tab HTML block!

The Problems:

• 1). Google TTS only support speach text with under 100 characters-length. Any text excess 100 will be ignored.
• 2). Google TTS API accepts only http GET meaning your text size can not excess the size limitation of GET (Most webservers have a limit of 8192 bytes)
• 3). You won't be able to invoke a http GET from your page since it is "Crossing Domain"
• 4). I used Node.js as my server to acheive a solution to all problems list above. The Node.js is used in the server side to handle text process but Node.js is a single thread server. What if you send a huge size text over: will the huge size request mess up other requests in the single thread?

The Solutions:

• 1). Like many others, I divided any text longer than 100 characters into pieces with length less than 100. Then send these pieces to Google and archive the response from Google (mp3 streams) them into files in my server. A list of file urls is return to my client and client plays one url after another.
• 2) & 3). I used JSONP resolve both issue 2) and 3). With JSONP you can send a configurable size of "script"(your speach text) (see details at maxJsonLength property) and of course, crossing domain.
• 4). I used multi-threading to handle the huge text pieces. Since my node server knows how big is the text received so I chose to use Backgrounder instead of Cluster because in many case like chating, I don't even need multi-threading


Dig into source

The Problem:

The more web frameworks are introduced, the more web "developers" intend not to code, specially using programming language. Let's look at a real example. The chatSpeak component (an AngluarJS directive) can accept video ID of Youtube meaning it will play the video if you enter it ID into to chat text field. But how to find an ID to enter? OK, we have another component, YoutubeSearcher that allows you to find the video you like to show to others.
So our web "developers" don't think they should code in java-script: they have two components and ...they only need to "plug" one to the other. Now the problem we face is that how can we "hook" YoutubeSearcher to chatSpeak...without coding?

The Solution:

ActionLink resolves exactly the problem we face. It works like a channel piping the IDs from YoutubeSearcher to chatSpeak. See details here