{"id":8232,"date":"2014-06-22T05:10:16","date_gmt":"2014-06-21T19:10:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8232"},"modified":"2014-06-22T05:10:16","modified_gmt":"2014-06-21T19:10:16","slug":"angularjs-javascript-custom-directives-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/angularjs-javascript-custom-directives-tutorial\/","title":{"rendered":"AngularJS Javascript Custom Directives Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"AngularJS Javascript Custom Directives Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/AngularJS_CustomDirectives-30of.jpg\" title=\"AngularJS Javascript Custom Directives Tutorial\"  \/><\/a><p class=\"wp-caption-text\">AngularJS Javascript Custom Directives Tutorial<\/p><\/div>\n<p>Building on the previous <a href=\"#ajft\" title=\"AngularJS Javascript Form Tutorial\">AngularJS Javascript Form Tutorial<\/a> as shown below, we continue our tutorial-based learning adventure into the front-end Javascript product AngularJS by examining the use of Custom Directives, to improve the readability and quality of your HTML and Javascript in the eCommerce webpages being developed during this tutorial set.   Most often there are two areas for me where I ask, &#8220;Can this be done easier?&#8221; &#8230; and these are &#8230;<\/p>\n<ul>\n<li>front-end web work<\/li>\n<li>the boringly robotic database backend tasks &#8230; (look up <a target=_blank href='https:\/\/www.google.com.au\/?gfe_rd=ctrl&#038;ei=3s4rU6TsBsHC8gfOtYHAAw&#038;gws_rd=cr#q=%22CRUD%22' title='CRUD'>CRUD<\/a> in your search engine for this one)<\/li>\n<\/ul>\n<p>Today&#8217;s tutorial relates to the first of these, and is the next part on the journey of discovery into Google&#8217;s great AngularJS software.<\/p>\n<p>Here we re-re-introduce ourselves (though many of you may already have introduced yourself &#8230; perhaps with &#8220;<i>G&#8217;day DiAngleAllyMeLad!<\/i> <b><i>Angular J.S. to you, matey.<\/i><\/b>&#8220;) to AngularJS, &#8220;a client-side Javascript framework for adding interactivity to HTML&#8221; (to quote the brilliant Google AngularJS tutor).<\/p>\n<p>With the eCommerce <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/\" title='Click picture.'>tutorial<\/a> here we very closely follow the wonderful <a target=_blank title='Google AngularJS tutorial' href='http:\/\/campus.codeschool.com\/courses\/shaping-up-with-angular-js\/'>Google AngularJS tutorial<\/a> with snapshots, and try to value add (but in no way pretend that you should not do this tutorial series yourself, should you want to pursue this topic) from the eyes of a novice who takes extra snapshots at the bits where things got too complicated for all tastes.<\/p>\n<p>As of the end of the session (did (our) fourth tutorial part, the fifth of which talks of the use of web services to glean your product information &#8230; do all the tutorials and\/or go to (have a first read of) this <a target=_blank href='http:\/\/courseware.codeschool.com\/shaping-up-with-angular-js\/Slides\/level05.pdf' title='More advanced AngularJS'>link<\/a> &#8230; will have to try this into the future) &#8220;sanity check&#8221;, took my code from the tutorial, amended the link and script tags to be publicly hosted URLs, placed the resultant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/mystore.html-GETME\" title='mystore.html'>mystore.html<\/a> (HTML source code) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/app.js-GETME\" title='app.js'>app.js<\/a> (Javascript source code) onto this server, and you can see a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/mystore.html\" title='Work (with no imagery) as simulation of work achieved by completion of levels 4 of 6 of the Google AngularJS tutorial series'>live run<\/a> (or the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/AngularJS_CustomDirectives-99of.jpg\" title='Last slide.'>last slide<\/a>, as a snapshot of this) where the imagery is missing, but you can see a lot of what the functionality is.   All in all, this AngularJS framework could be great to put together an impressive eCommerce website, but, patently, that is just one idea for how to use this great Javascript framework.<\/p>\n<p>Here are links to some downloadable programming source code explaining changes made from the previous AngularJS code to enable Custom Directives functionality here &#8230; <a target=_blank title='mystore.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/mystore.html-GETME\">mystore.html<\/a> and <a target=_blank title='app.js' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/app.js-GETME\">app.js<\/a><\/p>\n<p>Other downloadable HTML and CSS code (now that the code is so modularised) would be:<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/application.css-GETME\" title='application.css'>application.css<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/product-tabs.html-GETME\" title='product-tabs.html'>product-tabs.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/product-specs.html-GETME\" title='product-specs.html'>product-specs.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/product-reviews.html-GETME\" title='product-reviews.html'>product-reviews.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/product-gallery.html-GETME\" title='product-gallery.html'>product-gallery.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/product-description.html-GETME\" title='product-description.html'>product-description.html<\/a><\/li>\n<\/ul>\n<p>Here are links to some downloadable programming source code explaining changes made from the previous AngularJS code to enable the Custom Directives and Form functionality here &#8230; <a target=_blank title='mystore.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/mystore_old.html-GETME\">mystore.html<\/a> and <a target=_blank title='app.js' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/CustomDirectives\/app_old.js-GETME\">app.js<\/a><\/p>\n<p>Some good open source download sources for this tutorial are:<\/p>\n<ul>\n<li><a target=_blank title='Google hosted libraries ... look for AngularJS' href='https:\/\/developers.google.com\/speed\/libraries\/devguide'>Google hosted libraries<\/a> &#8230; look for AngularJS<\/li>\n<li><a target=_blank title='Twitter Bootstrap' href='http:\/\/getbootstrap.com\/2.3.2\/'>Twitter Bootstrap<\/a> &#8230; as recommended by AngularJS tutor<\/li>\n<\/ul>\n<p>Here is a link to the AngularJS <a target=_blank title='AngularJS Home Page' href='https:\/\/angularjs.org\/'>home page<\/a>.<\/p>\n<hr \/>\n<p id=\"ajft\">Previous relevant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpess\/?p=8155\">AngularJS Javascript Form Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"AngularJS Javascript Form Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/AngualrJS_Form-27of.jpg\" title=\"AngularJS Javascript Form Tutorial\"  \/><\/a><p class=\"wp-caption-text\">AngularJS Javascript Form Tutorial<\/p><\/div>\n<p>Building on the previous <a href=\"#ajpt\" title=\"AngularJS Javascript Primer Tutorial\">AngularJS Javascript Primer Tutorial<\/a> as shown below, we continue our tutorial-based learning adventure into the front-end Javascript product AngularJS by examining the use of form HTML data in the eCommerce webpages being developed during this tutorial set.   Most often there are two areas for me where I ask, &#8220;Can this be done easier?&#8221; &#8230; and these are &#8230;<\/p>\n<ul>\n<li>front-end web work<\/li>\n<li>the boringly robotic database backend tasks &#8230; (look up <a target=_blank href='https:\/\/www.google.com.au\/?gfe_rd=ctrl&#038;ei=3s4rU6TsBsHC8gfOtYHAAw&#038;gws_rd=cr#q=%22CRUD%22' title='CRUD'>CRUD<\/a> in your search engine for this one)<\/li>\n<\/ul>\n<p>Today&#8217;s tutorial relates to the first of these, and is the next part on the journey of discovery into Google&#8217;s great AngularJS software.<\/p>\n<p>Here we re-introduce ourselves (though many of you may already have introduced yourself &#8230; perhaps with &#8220;<i>G&#8217;day DiAngleAllyMeLad!<\/i> <b><i>Angular J.S. to you, matey.<\/i><\/b>&#8220;) to AngularJS, &#8220;a client-side Javascript framework for adding interactivity to HTML&#8221; (to quote the brilliant Google AngularJS tutor).<\/p>\n<p>With the eCommerce <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/\" title='Click picture.'>tutorial<\/a> here we very closely follow the wonderful <a target=_blank title='Google AngularJS tutorial' href='http:\/\/campus.codeschool.com\/courses\/shaping-up-with-angular-js\/'>Google AngularJS tutorial<\/a> with snapshots, and try to value add (but in no way pretend that you should not do this tutorial series yourself, should you want to pursue this topic) from the eyes of a novice who takes extra snapshots at the bits where things got too complicated for all tastes.<\/p>\n<p>As of the end of the session (did third tutorial part, the fifth of which talks of the use of web services to glean your product information &#8230; do all the tutorials and\/or go to (have a first read of) this <a target=_blank href='http:\/\/courseware.codeschool.com\/shaping-up-with-angular-js\/Slides\/level05.pdf' title='More advanced AngularJS'>link<\/a> &#8230; will have to try this into the future) &#8220;sanity check&#8221;, took my code from the tutorial, amended the link and script tags to be publicly hosted URLs, placed the resultant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/mystore.html-GETME\" title='mystore.html'>mystore.html<\/a> (HTML source code) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/app.js-GETME\" title='app.js'>app.js<\/a> (Javascript source code) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/application.css-GETME\" title='application.css'>application.css<\/a> (CSS source code) onto this server, and you can see a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/mystore.html\" title='Work (with no imagery) as simulation of work achieved by completion of levels 3 of 6 of the Google AngularJS tutorial series'>live run<\/a> (or the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/AngualrJS_Form-99of.jpg\" title='Last slide.'>last slide<\/a>, as a snapshot of this) where the imagery is missing, but you can see a lot of what the functionality is.   All in all, this AngularJS framework could be great to put together an impressive eCommerce website, but, patently, that is just one idea for how to use this great Javascript framework.<\/p>\n<p>Here are links to some downloadable programming source code explaining changes made from the previous AngularJS code to enable form functionality here &#8230; <a target=_blank title='mystore.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/mystore.html-GETME\">mystore.html<\/a> and <a target=_blank title='app.js' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/Form\/app.js-GETME\">app.js<\/a><\/p>\n<p>Some good open source download sources for this tutorial are:<\/p>\n<ul>\n<li><a target=_blank title='Google hosted libraries ... look for AngularJS' href='https:\/\/developers.google.com\/speed\/libraries\/devguide'>Google hosted libraries<\/a> &#8230; look for AngularJS<\/li>\n<li><a target=_blank title='Twitter Bootstrap' href='http:\/\/getbootstrap.com\/2.3.2\/'>Twitter Bootstrap<\/a> &#8230; as recommended by AngularJS tutor<\/li>\n<\/ul>\n<p>Here is a link to the AngularJS <a target=_blank title='AngularJS Home Page' href='https:\/\/angularjs.org\/'>home page<\/a>.<\/p>\n<hr \/>\n<p id=\"ajpt\">Previous relevant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7932\">AngularJS Javascript Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"AngularJS Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/AngularJS_Primer-45of.jpg\" title=\"AngularJS Javascript Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">AngularJS Javascript Primer Tutorial<\/p><\/div>\n<p>Quite often, in I.T., you ask yourself &#8220;Well, that is fine and dandy &#8230; but is there a better way to do this?&#8221;.   For myself, I most often ask this with:<\/p>\n<ul>\n<li>front-end web work<\/li>\n<li>the boringly robotic database backend tasks &#8230; (look up <a target=_blank href='https:\/\/www.google.com.au\/?gfe_rd=ctrl&#038;ei=3s4rU6TsBsHC8gfOtYHAAw&#038;gws_rd=cr#q=%22CRUD%22' title='CRUD'>CRUD<\/a> in your search engine for this one)<\/li>\n<\/ul>\n<p>Today&#8217;s tutorial relates to the first of these, and is the starting part on the journey of discovery into Google&#8217;s great AngularJS software.<\/p>\n<p>Here we introduce ourselves (though many of you may already have introduced yourself &#8230; perhaps with &#8220;<i>G&#8217;day DiAngleAllyMeLad!<\/i> <b><i>Angular J.S. to you, matey.<\/i><\/b>&#8220;) to AngularJS, &#8220;a client-side Javascript framework for adding interactivity to HTML&#8221; (to quote the brilliant Google AngularJS tutor).<\/p>\n<p>With the eCommerce <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/\" title='Click picture.'>tutorial<\/a> here we very closely follow the wonderful <a target=_blank title='Google AngularJS tutorial' href='http:\/\/campus.codeschool.com\/courses\/shaping-up-with-angular-js\/'>Google AngularJS tutorial<\/a> with snapshots, and try to value add (but in no way pretend that you should not do this tutorial series yourself, should you want to pursue this topic) from the eyes of a novice who takes extra snapshots at the bits where things got too complicated for all tastes.<\/p>\n<p>As an end of session (did 2 of 6 tutorial parts, the fifth of which talks of the use of web services to glean your product information &#8230; do all the tutorials and\/or go to (have a first read of) this <a target=_blank href='http:\/\/courseware.codeschool.com\/shaping-up-with-angular-js\/Slides\/level05.pdf' title='More advanced AngularJS'>link<\/a> &#8230; will have to try this into the future) &#8220;sanity check&#8221;, took my code from the tutorial, amended the link and script tags to be publicly hosted URLs, placed the resultant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/mystore.html_GETME\" title='mystore.html'>mystore.html<\/a> (HTML source code) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/app.js_GETME\" title='app.js'>app.js<\/a> (Javascript source code) onto this server, and you can see a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/mystore.html\" title='Work (with no imagery) as simulation of work achieved by completion of levels 2 of 6 of the Google AngularJS tutorial series'>live run<\/a> (or the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/AngularJS\/AngularJS_Primer-99of.jpg\" title='Last slide.'>last slide<\/a>, as a snapshot of this) where the imagery is missing, but you can see a lot of what the functionality is.   All in all, this AngularJS framework could be great to put together an impressive eCommerce website, but, patently, that is just one idea for how to use this great Javascript framework.<\/p>\n<p>Some good open source download sources for this tutorial are:<\/p>\n<ul>\n<li><a target=_blank title='Google hosted libraries ... look for AngularJS' href='https:\/\/developers.google.com\/speed\/libraries\/devguide'>Google hosted libraries<\/a> &#8230; look for AngularJS<\/li>\n<li><a target=_blank title='Twitter Bootstrap' href='http:\/\/getbootstrap.com\/2.3.2\/'>Twitter Bootstrap<\/a> &#8230; as recommended by AngularJS tutor<\/li>\n<\/ul>\n<p>Here is a link to the AngularJS <a target=_blank title='AngularJS Home Page' href='https:\/\/angularjs.org\/'>home page<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#7932' onclick='var dv=document.getElementById(\"d7932\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7932' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#8155' onclick='var dv=document.getElementById(\"d8155\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8155' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#8232' onclick='var dv=document.getElementById(\"d8232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8232' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Building on the previous AngularJS Javascript Form Tutorial as shown below, we continue our tutorial-based learning adventure into the front-end Javascript product AngularJS by examining the use of Custom Directives, to improve the readability and quality of your HTML and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/angularjs-javascript-custom-directives-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[82,375,576,652,997,1319],"class_list":["post-8232","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-angularjs","tag-ecommerce","tag-html","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8232"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=8232"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8232\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=8232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=8232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=8232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}