{"id":7966,"date":"2014-06-08T05:06:57","date_gmt":"2014-06-07T19:06:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7966"},"modified":"2014-06-08T05:06:57","modified_gmt":"2014-06-07T19:06:57","slug":"angularjs-javascript-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/angularjs-javascript-primer-tutorial\/","title":{"rendered":"AngularJS Javascript Primer Tutorial"},"content":{"rendered":"<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 of the end of the 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","protected":false},"excerpt":{"rendered":"<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: front-end web work the boringly robotic database backend tasks &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/angularjs-javascript-primer-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,462,467,513,576,652,997,1319],"class_list":["post-7966","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-angularjs","tag-ecommerce","tag-framework","tag-front-end","tag-google","tag-html","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/7966"}],"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=7966"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/7966\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=7966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=7966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=7966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}