{"id":9497,"date":"2023-04-30T18:21:12","date_gmt":"2023-04-30T16:21:12","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9497"},"modified":"2023-05-01T16:56:37","modified_gmt":"2023-05-01T14:56:37","slug":"angular-working-with-angular-examples","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2023\/04\/30\/angular-working-with-angular-examples\/","title":{"rendered":"Angular | Working with Angular Examples"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">General<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On the <a href=\"https:\/\/angular.io\/guide\/example-apps-list\" data-type=\"URL\" data-id=\"https:\/\/angular.io\/guide\/example-apps-list\">Angular Website<\/a>, there are a lot of examples. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1024x485.png\" alt=\"\" class=\"wp-image-9500\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1024x485.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-300x142.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-768x363.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image.png 1251w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You could download each of them and look around. In this post, i will show you to do this at once for all examples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, we will<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>get list of all examples<\/li>\n\n\n\n<li>download zip files of examples<\/li>\n\n\n\n<li>extract examples<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Preparation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, we define some variables for the Chrom Browser and the resulting output files.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Mac OS\nCHROME=\/Applications\/Chromium.app\/Contents\/MacOS\/Chromium\n\n# Windows WSL\nCHROME='\/mnt\/c\/Program Files\/Google\/Chrome\/Application\/chrome.exe'\n\nLISTOFZIPS=listofzips<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Download List of examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we will download the list of examples from <a href=\"https:\/\/angular.io\/guide\/example-apps-list\" data-type=\"URL\" data-id=\"https:\/\/angular.io\/guide\/example-apps-list\">https:\/\/angular.io\/guide\/example-apps-list<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is not a static html file. The list will be created dynamically when viewing the page. So, only download the page with <code><code data-enlighter-language=\"shell\" class=\"EnlighterJSRAW\">wget <\/code><\/code>or <code data-enlighter-language=\"shell\" class=\"EnlighterJSRAW\">curl<\/code><code data-enlighter-language=\"scss\" class=\"EnlighterJSRAW\"> does <\/code>not help, because we need to run the JavaScript code in the browser to create the list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Therefore, we will use Chrome in headless mode: Load the page and dump the contents of the page (dom) into a file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">do_get_list() {\n        \"$CHROME\" --headless --dump-dom https:\/\/angular.io\/guide\/example-apps-list | tr '>' '>\\n ' >${LISTOFZIPS}.html\n\n        echo \"##. Download List of Examples\"\n        echo \"    #Examples: ($(grep 'href=\"guide\/' listofzips.html | wc -l))\"\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then, we will extract all the links to the zip examples files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A quick look into the html file shows, that the html code with the links looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1-1024x212.png\" alt=\"\" class=\"wp-image-9502\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1-1024x212.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1-300x62.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1-768x159.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1-1536x318.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-1.png 1770w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We need the part in the <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">href<\/code> of the <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">&lt;a<\/code> tag.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, we will split the html file, so that every html tag will be on a separate line.<\/li>\n\n\n\n<li>Then, we will cut out only the parts between apostrophes. <\/li>\n\n\n\n<li>Then, we search all files containing &#8220;.zip&#8221; and the end of the line ($)<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">do_extract() {\n        cat ${LISTOFZIPS}.html                                          |\\\n        tr ' ' '\\n'                                                     |\\\n        cut -d \\\" -f2                                                   |\\\n        grep -e '.zip$'                                                 > ${LISTOFZIPS}\n\n        echo \"generated\/zips\/component-overview\/component-overview.zip\" >> ${LISTOFZIPS}\n\n        echo \"##. Extract zip files ($(wc -l ${LISTOFZIPS}))\"\n        echo \"    #Examples: ($(wc -l ${LISTOFZIPS}))\"\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The result will be the list of URL&#8217;s for each example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-3-1024x439.png\" alt=\"\" class=\"wp-image-9506\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-3-1024x439.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-3-300x128.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-3-768x329.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/04\/image-3.png 1074w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Download Examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next, for each of these example $ZIP, we will download the zip from the Angular Website with <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">wget -q https:\/\/angular.io\/$ZIP<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">do_download() {\n        echo \"##. Download Zips\"\n\n        (\n                rm    -rf zip\n                mkdir -p  zip\n                cd        zip\n\n                cat ..\/$LISTOFZIPS | while read ZIP\n                do\n                        echo \"Download $ZIP\"\n                        if [ ! -f $ZIP ]; then\n                                wget -q https:\/\/angular.io\/$ZIP\n                        fi\n                done\n\n                rm *.zip.1\n        )\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Extract ZIP Files<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">do_unzip() {\n        echo \"##. Unzip\"\n\n        rm    -rf src\n        mkdir -p  src\n\n        find zip -type f -exec basename {} \\; | \\\n        while read FILE\n        do\n                FLDR=${FILE\/.zip\/}\n                echo unzip zip\/$FILE -d src\/$FLDR\n                unzip zip\/$FILE -d src\/$FLDR\n        done\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Upgrade all node modules to current version<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will need toe tool npm-check-updates for this.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Install it with<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install -g npm-check-updates<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">ncu <\/code>updates all packages to the latest version. Some Angular Examples require an earlier version of Typescript, so, after upgrade i changes the Typescript Version to 4.9.5<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">do_upgrade() {\n\techo \"##. Upgrade\"\n\n\t(\n\t\tcd src\n\t\tls | \\\n\t\twhile read FLDR\n\t\tdo \n\t\t\techo \"     $FLDR\"\n\t\t\t(\n\t\t\t\tcd $FLDR\n\t\t\t\tncu -u\n\t\t\t\t#     \"typescript\": \"~4.9.3\"\n\t\t\t\tsed -i '1,$s\/\"typescript\": \".*\"\/\"typescript\": \"~4.9.5\"\/' package.json\n\t\t\t\t# pnpm install\n\t\t\t)\n\t\tdone\n\t)\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Appendix<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The code for the complete script is <a href=\"https:\/\/gist.github.com\/r14r\/7b409900b68c8d50d04a463e3a94c956\" data-type=\"URL\" data-id=\"https:\/\/gist.github.com\/r14r\/7b409900b68c8d50d04a463e3a94c956\">here<\/a>:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#!\/bin\/bash\n\n# Mac OS\nCHROME=\/Applications\/Chromium.app\/Contents\/MacOS\/Chromium\n\n# Windows WSL\nCHROME='\/mnt\/c\/Program Files\/Google\/Chrome\/Application\/chrome.exe'\n\nLISTOFZIPS=listofzips\n\ndo_get_list() {\n        \"$CHROME\" --headless --dump-dom https:\/\/angular.io\/guide\/example-apps-list | tr '>' '>\\n ' >${LISTOFZIPS}.html\n\n        echo \"##. Download List of Examples\"\n        echo \"    #Examples: ($(grep 'href=\"guide\/' listofzips.html | wc -l))\"\n}\n\ndo_extract() {\n        cat ${LISTOFZIPS}.html                                          |\\\n        tr ' ' '\\n'                                                                     |\\\n        cut -d \\\" -f2                                                           |\\\n        grep -e '.zip$'                                                         > ${LISTOFZIPS}\n\n        echo \"generated\/zips\/component-overview\/component-overview.zip\" >> ${LISTOFZIPS}\n\n        echo \"##. Extract zip files ($(wc -l ${LISTOFZIPS}))\"\n        echo \"    #Examples: ($(wc -l ${LISTOFZIPS}))\"\n}\n\ndo_download() {\n        echo \"##. Download Zips\"\n\n        (\n                rm    -rf zip\n                mkdir -p  zip\n                cd        zip\n\n                cat ..\/$LISTOFZIPS | while read ZIP\n                do\n                        echo \"Download $ZIP\"\n                        if [ ! -f $ZIP ]; then\n                                wget -q https:\/\/angular.io\/$ZIP\n                        fi\n                done\n\n                rm *.zip.1\n        )\n}\n\ndo_unzip() {\n        echo \"##. Unzip\"\n\n        rm    -rf src\n        mkdir -p  src\n\n        find zip -type f -exec basename {} \\; | \\\n        while read FILE\n        do\n                FLDR=${FILE\/.zip\/}\n                echo unzip zip\/$FILE -d src\/$FLDR\n                unzip zip\/$FILE -d src\/$FLDR\n        done\n}\n\ndo_upgrade() {\n\techo \"##. Upgrade\"\n\n\t(\n\t\tcd src\n\t\tls | \\\n\t\twhile read FLDR\n\t\tdo \n\t\t\techo \"     $FLDR\"\n\t\t\t(\n\t\t\t\tcd $FLDR\n\t\t\t\tncu -u\n\t\t\t\t#     \"typescript\": \"~4.9.3\"\n\t\t\t\tsed -i '1,$s\/\"typescript\": \".*\"\/\"typescript\": \"~4.9.5\"\/' package.json\n\t\t\t\t# pnpm install\n\t\t\t)\n\t\tdone\n\t)\n}\n\n\ncase \"$1\" in\n        \"get\")       do_get_list;;\n        \"extract\")   do_extract;;\n        \"download\")  do_download;;\n        \"unzip\")     do_unzip;;\n        \"upgrade\")   do_upgrade;;\n        *)\n\n                echo \"run $0 get|extract|download|unzip\";;\nesac<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>General On the Angular Website, there are a lot of examples. You could download each of them and look around. In this post, i will show you to do this at once for all examples. So, we will Preparation First, we define some variables for the Chrom Browser and the resulting output files. Download List of examples Next, we will download the list of examples from https:\/\/angular.io\/guide\/example-apps-list. This is not a static html file. The list will be created dynamically when viewing the page. So, only download the page with wget or curl does not help, because we need to run [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5095,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[90],"tags":[],"class_list":["post-9497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2019\/08\/logo_toolbox_angular.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9497"}],"version-history":[{"count":6,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions"}],"predecessor-version":[{"id":9511,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions\/9511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/5095"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}