{"id":484,"date":"2017-06-27T14:33:51","date_gmt":"2017-06-27T02:33:51","guid":{"rendered":"http:\/\/deborahfitchett.com\/blog\/?p=484"},"modified":"2017-06-27T14:33:51","modified_gmt":"2017-06-27T02:33:51","slug":"getting-started-with-angular-ui-development-for-dspace-or2017","status":"publish","type":"post","link":"https:\/\/deborahfitchett.com\/blog\/2017\/06\/getting-started-with-angular-ui-development-for-dspace-or2017\/","title":{"rendered":"Getting started with Angular UI development for Dspace #OR2017"},"content":{"rendered":"<p>by Tim Donohue and Art Lowel; <a href=\"https:\/\/www.conftool.net\/or2017\/index.php?page=browseSessions&amp;form_session=282\">session overview<\/a>; <a href=\"https:\/\/wiki.duraspace.org\/display\/DSPACE\/OR2017+DSpace+Angular+Workshop\">Wiki with instructions for setup<\/a>; <a href=\"https:\/\/dspace7-demo.atmire.com\/home\">demo site<\/a><\/p>\n<p>[So my experience started off inauspiciously because I have an ancient version of MacOS so installing Node.js and yarn ran into issues with Homebrew and Xcode developer tools and I don&#8217;t know what else, but after five and a half hours I got it working. I then left all my browser and Terminal windows open for the next several days on the &#8220;if it ain&#8217;t broke&#8221; principle&#8230;.]<\/p>\n<p><strong>Angular in DSpace<\/strong><\/p>\n<p>Angular 4.0 came out March 2017 &#8211; straight after conference there&#8217;ll be a sprint to get that into DSpace. (<a href=\"https:\/\/angular.io\/tutorial\">Angular tutorial<\/a>) How Angular works with DSpace:<\/p>\n<ul>\n<li>user goes to website<\/li>\n<li>server returns first page in pre-compiled html, and javascript<\/li>\n<li>user requests data via REST<\/li>\n<li>API (could be hosted on different server than Angular) returns JSON data<\/li>\n<\/ul>\n<p>With Angular Universal (available in Angular 2, packaged in Angular 4), it can still work with a browser that doesn&#8217;t have javascript (search engine browser, screen-reader, etc). Essentially if Angular app doesn&#8217;t load, your browser requests the page instead of the json, so the server will return the pre-compiled html again.<\/p>\n<p>Caches (API replies and objects) on client-side in your browser so very quick to return to previously seen pages.<\/p>\n<p><strong>Building\/running Angular apps<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\">node.js<\/a> &#8211; server-side JS platform (can provide pre-compiled html)<\/li>\n<li>npm &#8211; Node&#8217;s package manager (pulls in dependencies from registry)<\/li>\n<li><a href=\"https:\/\/yarnpkg.com\/en\/docs\/install\">yarn<\/a> &#8211; third-party Node package manager (same config, faster)<\/li>\n<li><a href=\"http:\/\/www.typescriptlang.org\/\">TypeScript language <\/a>&#8211; extension of ES6 (latest javascript &#8211; adds types instead of generic &#8216;var&#8217;) &#8211; gets compiled down by Angular to ES5 javascript before it gets sent to the browser<\/li>\n<\/ul>\n<p>You write angular applications by<\/p>\n<ul>\n<li>composing html <strong>templates<\/strong> with angularized markup &#8211; almost all html is valid; can load other components via their selector; components have their own templates<\/li>\n<li>writing <strong>component<\/strong> classes to manage those templates &#8211; lets you create new html tags that come with their own code and styling; consist of view (template) and controller. Implements interfaces eg onInit; extends another component; has a &lt;selector&gt;; has a constructor defining inputs; has a template. Essentially a component has a class and a template.<\/li>\n<li>adding app logic in <strong>services<\/strong> &#8211; retrieve data for components, or operations to add or modify data &#8211; created once, used globally by injecting into component<\/li>\n<li>boxing component(s) and optionally service(s) in <strong>modules<\/strong> &#8211; useful for organising app into blocks of functionality &#8211; would use this for supporting 3rd-party DSpace extensions (however business logic would be dealt with in REST API not in the Angular UI)<\/li>\n<\/ul>\n<p><strong>DSpace-angular folder structure<\/strong><\/p>\n<ul>\n<li>config\/<\/li>\n<li>resources\/ &#8211; static files eg i18n, images<\/li>\n<li>src\/app\/ &#8211; each feature in its own subfolder\n<ul>\n<li>.ts &#8211; component class<\/li>\n<li>.html &#8211; template<\/li>\n<li>.scss &#8211; component style<\/li>\n<li>.spec.ts &#8211; component specs\/test<\/li>\n<li>.module.ts &#8211; module definition<\/li>\n<li>.service.ts &#8211; service<\/li>\n<\/ul>\n<\/li>\n<li>src\/backend\/ &#8211; mock REST data<\/li>\n<li>src\/platform\/ &#8211; root modules for client\/server<\/li>\n<li>src\/styles\/ &#8211; global stylesheet<\/li>\n<li>dist\/ &#8211; compiled code<\/li>\n<\/ul>\n<p><strong>Hands-on<\/strong><\/p>\n<p>[Here we got into the first couple of steps from the <a href=\"https:\/\/wiki.duraspace.org\/display\/DSPACE\/OR2017+DSpace+Angular+Workshop\">Wiki\/gitHub project<\/a> linked from there.]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Tim Donohue and Art Lowel; session overview; Wiki with instructions for setup; demo site [So my experience started off inauspiciously because I have an ancient version of MacOS so installing Node.js and yarn ran into issues with Homebrew and Xcode developer tools and I don&#8217;t know what else, but after five and a half [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[274,15,273],"_links":{"self":[{"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/posts\/484"}],"collection":[{"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":2,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/posts\/484\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deborahfitchett.com\/blog\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}